novicell / novicell-frontend Goto Github PK

Novicell default build setup, for compiling PostCSS to CSS, Babeling JS, making SVG sprites, optimizing images and more

Home Page: https://frontend.novicell.cloud

JavaScript 38.69% CSS 57.98% Handlebars 3.34%

novicell post-css fractal styleguide pattern-library novicell-frontend babel build-tool

novicell-frontend's Introduction

Novicell Frontend

Novicell Default Frontend package is a framework for your frontend setup. This setup helps developer by automizing frontend workflow using certain technologies like NPM Scripts and Webpack. It includes PostCSS, Stylelint, Webpack, ESLint, Babel, Fractal. When setup, it also helps you optimize images, combine SVGs to a sprite, generate favicons, minifying/optimizing CSS and Javascript.

Setup

Download and install Node.js min. v. 8.9.2 (https://nodejs.org/en/download/)

Clone the repo git clone https://github.com/Novicell/novicell-frontend.git.
Run npm install to install all dependencies.
Insert paths/variables to config.js and package.json. Configuration and paths
Run npm run build:dev to build the dist folder with all the minified/optimized files.
Run npm run dev to start watching file changes and continuous copilation.

Configuration and paths

The whole automized build system looks for paths and variables in order to work dynamically with different projects. Therefore, when starting new project edit options in 2 files (they are both in root directory):

config.js
package.json

config.js:

const dist = '/dist/'; // /dist by default. Folder where all the built files will go to (minified/optimized/compiled)
const sourceRootFolder = '/src/'; // /src by default. Folder where ATOM modules belong
const modulesDir = '/src/modules/**/*.js'; // Where JavaScript files should be placed. Add CSS files here if you want them as separate bundle
const assetsDir = '/assets/'; // Wheer you keep images, fonts, icons...

Look for "config" field in package.json and fill in:

    "config": {
        "DIST": "dist",
        "CSS_MODULES": "src/modules/*.css"
    },

NPM Scripts

These are most often used scripts:

for development: npm run dev and npm run build:dev
for production: npm run prod and npm run build:prod

But there are more available in this package (add npm run before script name):

fractal - Runs fractal
fractal:build - Builds static site
clean - Deletes the files/directories defined in: gulp/config.js > pathsToClean
fonts - Copies the fonts defined in: config.js to dist
images - Minifies images defined in: config.js to dist/images
sprites - Minifies all sprites from assets/icons to dist/icons.
styles - Minifies/lints and bundles CSS files defined in: src/modules to dist/styles
webpack - Minifies/optimizes/lints and bundles JS files defined in: src/modules to dist/scripts
watch:styles - Automatically bundles CSS changes while developing
watch:webpack - Automatically bundles JS changes while developing
deploy - Uploads file via FTP, configuration can be found in gulp/config.js
dev - webpack:watch + styles:watch + fractal
start - Equal to dev
prod - Same as dev but in production (extra optimization) but slower build,
fix - Fixes all possible linting for JavaScript
buildDrupal - (For drupal projects) Bundles JavaScript and CSS into same location
generateFavicon - generates a favicon based on config/favicon/faviconDescription.json settings

Generate component

To allow generating components write: npm link in the root dir. (only have to do it once)
Run

createComponent -t a -n my-component

This example will create files in /src/01-atoms/my-component

Argument	Name	Type	Description
-t	Type	`a/m/o/p`	Defines the type of your component, this decides where the component is created. a = atom, m = molecule, o = organism, p = page;
-n	Name	`string`	Sets the filename of the component files, and a capitalized version will be used as title in the config file

Additional

If you need more information, we have a Wiki that contains in-depth explanations:

Contribution

Looking to contribute something? Here's how you can help. Please take a moment to review our contribution guidelines in order to make the contribution process easy and effective for everyone involved.

License

The Novicell Frontend is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Collaborators

_{Danni Larsen}

_{Juozas Rastenis}

_{Jonas Havmøller}

_shp-novicell

_{Henrik Madsen}

_Bjornnyborg

_emilankersen

_MKAndersen

This project follows the all-contributors specification. Contributions of any kind welcome!

novicell-frontend's People

Contributors

Stargazers

Watchers

Forkers

hesselberg jhavmoeller lus1n ottzen msoelvsteen shp-novicell sergismj magnify bjornnyborg tbb2 ankeris henrikschytze sebimoe albertoleon gregorredinger simoneldevig

novicell-frontend's Issues

No need for vendorprefix mixins

We have a collection of vendor-prefix-mixins, but we also have autoprefixer, which does the trick aswell.
Maybe we should remove the mixins.

Font loading

Make standard async font loading pattern, as novicell.font.js or whatever.

Optimize package.json

Look for redundancies in the package.json, specifically jshint.

Use Webpack

Consider switching build setup from Gulp to Webpack (4).
Does anyone have experience with Webpack?

https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.qkfrveivf

Split framework from build setup

Divide the frontend framework (scripts and less) from the gulp build setup.
These two things does not directly depend on each other, and should be in separate repos, for easier maintenance.
If we do this, it could be possible to update the gulp build setup separately from the project files like, less components and so on.

Update Bower references

Update jquery and svg4everybody to the latest versions

Lazyload - "load always" don't work

Made a pull request to fix this: #80

Move dummy/test files to examples/test folder

Hola,

We can add a .npmignore file to the repo that makes sure we don't add example files such as https://github.com/Novicell/novicell-frontend/blob/master/images/map-pin.png.

So, when you are working on the package, you can get the files, but when someone uses the package for a new project, they won't get them.

Makes sense? We can discuss it further in person.

Add FTP deploy task

For use for HTML task.
We can use the node module gulp-ftp
https://www.npmjs.com/package/gulp-ftp

Cleanup themes task

Remove the task it self, and make the styles task seperate each file in the bundle. Get the name of the minified file from the original file, like the themes task does, right now.

Make docs for HTML task

Merge the javasscript lazyload files

Looking at https://github.com/Novicell/novicell-frontend/blob/master/scripts/components/novicell.lazyload.js and https://github.com/Novicell/novicell-frontend/blob/master/scripts/components/novicell.lazyloadResponsive.js, there are some similarities.

Perhaps we should look into merging them, and maybe remove the lazyload image function, that doesn't take responsiveness into account?

Run through all files in regards to soft tabs vs. tabs

SVG bundles

Make it possible to make multiple SVG sprites, as bundles, eg. for use in CMS backends.
I guess all that needs to be done, is renaming the sprite outputname to the name of the bundle. Find a renaming module and do something like:

.pipe(...)
.pipe(rename(b.name + '.svg'))
.pipe(gulp.dest(config.iconsDist));

Add a way to force height to the image in lazy load responsive

I don't know if I miss something but sometimes I have problems with the height on the images with this plugin, the problem was that there is not a way to force the height of the image and crop it. To solve this I modified the plugin to be able to do this, If you interested in this change I can do a pull request.

Icons task fails on first run-through

When you clone a clean install of the frontend package, you get the following error when running gulp. I'm guessing we need to make sure, it doesn't depend on the icons folder in the dist folder?

{ Error: ENOENT: no such file or directory, mkdir './dist/icons/'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:922:18)
    at writeFile (/Users/larshesselberg/Arbejde/Beneath/Kunder/Kilroy/00000 KILROY - Brand Portal 2016-2018/Benns Frontend/gulp/tasks/icons.js:20:16)
    at genereateIconJsonLibrary (/Users/larshesselberg/Arbejde/Beneath/Kunder/Kilroy/00000 KILROY - Brand Portal 2016-2018/Benns Frontend/gulp/tasks/icons.js:66:9)
    at FSReqWrap.oncomplete (fs.js:123:15)
  errno: -2,
  code: 'ENOENT',
  syscall: 'mkdir',
  path: './dist/icons/' }

only process changed files

http://gulpjs.org/recipes/only-pass-through-changed-files.html

to help speedup gulp'ing, we could ignore the files that haven't been changed.

Remove lazyload function calls

Remove it in the master.js-file.

Add typescript compiler to setup

Flexbox doesn't work on iOS

When using flexbox in the stylesheet, it is not getting the correct prefixing. This should be handled by "autoprefix" but it's not...

mixins.vendor-prefixes.less removed?

Was this meant to happen:
117f45f

It breaks the gulp styles task.

Update docs for lazyload images

Please update due to this commit: 153ade1

Look into gulp-clean-css

Might be able to save some space by adding gulp-clean-css after cssnano in our styles task.

Rebuild node-sass

Every time npm is installed through visual studio , when we run gulp through git bash afterwards it requires to rebuild node-sass

Remove gulp-sass

This package is the default foundation for Novicell Projects.
In Novicell we always use LESScss, and I see no reason why this package should support SASS / SCSS when we do not use it.

Remove inline fill and stroke

When exporting SVG's from Sketch, we get a lot of bloat including inline fill and stroke attributes on the elements. This prevents us from overriding through CSS.

We need to get GULP to remove the inline elements per bundle, so that you can have a bundle of eg. flags that always should keep their fill and stroke.

Maybe this gulp plugin can help:
https://www.npmjs.com/package/remove-svg-properties

Example of a Sketch exported SVG icon:
arrow.zip

icons.json is not being generated

icons.json is not being generated, after variables is made in the config file. Something is wrong with it. I can cosole.log the object of the icons and the path, but it doesn't work.

Please fix!

Add .editorconfig to the default frontend package

Let's consider adding a .editorconfig to the default package. Look at the docs we agreed on here: novicell.github.io/frontenddocs/

There's a chapter about it at the bottom.

Look also at http://editorconfig.org/ if in doubt.

Add lesshint

Add less hint to keep code consistency through out less files. Also makes sense as we are linting our JS files.
https://github.com/lesshint/lesshint

File not found-error

Would be great if Gulp could throw an error, if there is a reference to a file, that doesn't exist. This would make it far easier to debug typos in filename inside Gulp bundles.

Example:

 {
                name: "master",
                scripts: [
                    ...
                    projectPath + "scripts/components/nobicell.cookieinfo.js",
                    ...

Error: something something, nobicell is not defined.

Cleanup input / forms styling

This needs a good cleanup, including variables, variable names and so on.

Remember to make great documentation, and examples (in the examples folder).

Consider moving focalpoint from the Novicell frontend to the Novicell Umbraco

Currently the focalpoint is just an option for Umbraco. Because of this, I don't think it should be a part of the Novicell frontend, as it isn't cross platform friendly.

Discuss!

Focalpoint image errors

Does not take the parent width, is data-parent is set and it doesn't take the full height of the parent.

Why use spaces over tabs?

Let's debate!

https://www.youtube.com/watch?v=SsoOG6ZeyUI

👾

50% of the source code for the grid isn't used?

While creating a grid based off on the grid in novicell-frontend, I found out that about 50% of the source code isn't even used.

Perhaps we should look into cleaning it, while we're also looking at using the flexbox grid in #40 ?

Generate themes on watch

Themes is not being generated on watch.

Split JS plugins into separate repos

Split all js plugins into separate repos to make easier maintenance and separation of concerns. This is also for not bloating this repository with files not necessarily being used on all projects.

We can then load the the scripts through NPM and extend them via the new syntax mentioned #111.
Make sure the change the scripts to the new syntax, when moving into seperate repos.

Icons can't change fill

We have a problem with icons that have inline "fill", can't have their "fill" overritten by CSS.
Therefore we need to remove the inline "fill"-attribute on all svg's before adding them to the sprite.

The problem is similar to this: svg-sprite/svg-sprite#121

Please fix :)

Flex grid

Skal vi ikke lave vores "bootstrap"-grid om til at køre med flex-box!?

Cleanup buttons styling

Lazyload google maps

Insert a google static maps, and then embed a "real" google map when clicking on the image from static maps.
Remember to update the docs.

Look at srcset

Look at srcset, and figure out if it could replace the focalpoint image, and make a remarkable simpler js method to lazyload images.
At the time of writing this, IE11 is the only broser which is not supporting the srcset, but maybe this could be fixed with a polyfill. IE11 is at 9.4% market share in Denmark.

http://caniuse.com/#search=srcset

Change the way how variables are declared

var novicell = novicell || {};

This is cool, and make sense to me, but after this, we declare the new var like this:

example:

novicell.lazyload = novicell.lazyload || function () {}();

I think is better, and make more sense to me declare the var like this:

novicell.lazyload = function () {}();

The other way, for me, is a little bit "antipattern" and it does not make sense because this declaration is for avoiding "override" when you create a function in javascript, but this way to code must be used for the users that use the package, not by the package, maybe with a little part of code you can understand me:

var novicell = novicell || {};
novicell.package = novicell.package || function() {

    function foo() {
        return "bar";
    }

    return {
        foo: foo
    };
}();

novicell.package = function() {};
console.log(novicell.package.foo());

You can test it on: https://jsfiddle.net/odp1do49/1/

If the user using the package create a function with the same name this will override the function even if it's written this way: novicell.package = novicell.package || function() {}();, and that's because for me not make sense write the function in this way on the package.

Regards :)

Remove typescript

Remove typescript task from the project, as we haven't yet used it, and are probably never going to.
@Novicell/team-contributers @marklonquist

When (npm) installing the packages under node v7.1.0 warnings are given

the following warnings are issued when executing npm install on a "blank" machine:

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g

The dependency-tree for graceful-fs is:

Remove bower

Hi,

I think nowadays bower is kind of obsolete as you can find all your frontend packages on npm.
So I propose we get rid of bower. The advantage is one tool less which means less config.

What do you think?

Cheers,
Cristhian.

Specific gutters on different breakpoints

Had a chat with @KimDolleris about adding specific gutters on different breakpoints. Say on a tablet we want a gutter on 30px, but on desktop we want it to be 40px.

mixins.grid.less:22

// Generate the extra small columns
.make-xs--column(@columns) {
    position: relative;
    float: left;
    width: percentage((@columns / @grid-columns));
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
}

Looking at the above code, I guess we could add various variables for the gutter, so, maybe something like @xs-gutter, and so on for each breakpoint. By default they should all reference the main @gutter, but this does give each project the possibility of adding different gutters.

Thoughts? Let's discuss!