Home

Awesome

This project is bootstraped with

Frontend Starter Kit

A boilerplate for frontend projects powered by Gulp, latest HTML5 bolierplate, Sass, PostCss, Webpack(for transpiling latest ES6/ES7), and Eslint with AirBnB config and Prettier.

Prerequisites

Installing

After you clone or download this repository, you can kickstart your project just with npm install in your terminal. After required packages are downloaded you can start using starter kit, or make changes to folder structure to suit your needs( remove images or icons folder if you are not using any images, or disable some gulp tasks that you don't need for your project etc. etc.)

Getting Started

Gulp Tasks

gulp watch

The basic usage of Frontend Starter Kit starts with gulp watch task, and it's the main gulp task. I usually start with this one first, and I recommend keeping this one turned on while you are working on your code, because it starts Browsersync server on localhost://3000 and is syncing with your work everytime it's saved. Depending on what file you've just saved it starts gulp styles or gulp scripts tasks automatically.

Usage: just type in terminal gulp watch .

gulp styles

This task starts CSS processing, which process your code through Sass first, then through a few postcss plugins one by one. Code is being transpiled to CSS supported syntax, vendor prefixes are added for some properties, and a bunch of other things that you can look up in plugins docs. This is how processing tree looks like:

 .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([
      require('postcss-partial-import')({
        prefix: '_',
        extension: '.css'
      }),
      require('postcss-assets')({
        basePath: 'app',
        loadPaths: ['assets/images'],
        cachebuster: true
      }), // assets url handling -- https://github.com/borodean/postcss-assets
      require('postcss-normalize')({ browsers: 'last 2 versions' }),
      fontMagician({
        hosted: ['./app/assets/fonts']
      }), // https://github.com/jonathantneal/postcss-font-magician
      require('postcss-cssnext')(), // http://cssnext.io/features/
      sorting({
        order: [
          'custom-properties',
          'dollar-variables',
          'declarations',
          'at-rules',
          'rules'
        ],
        'properties-order': 'alphabetical',
        'unspecified-properties-position': 'bottom'
      }),
      require('postcss-reporter')()
    ]))

I'll explain shortly what each of this plugins do.

postcssurl() Allows you to fix url()s according to postcss to and/or from options (rebase to to first if available, otherwise from or process.cwd()).

postcss-assets Amazing plugin, imo the greatest option is that this allows you to resolve() image file locations instead of writing down exact url, but there are several other interesting features.

('postcss-normalize') PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist. You can specify which versions of browsers are you going to support in options like this require('postcss-normalize')({browsers: 'last 2 versions'}).

fontMagician plugin that magically generates all of your @font-face rules. NOTE: hosted fonts option doesn't seem to work.

cssnext() PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support. Really powerfull plugin with long list of features.

PostCSS Sorting PostCSS plugin to keep rules and at-rules content in order.

Usage: gulp styles

gulp scripts

gulp scripts task is compiling all javascript files into one main file( temp/scripts/App.js ) and while on it transpiling all ES6 code to ES5 through Webpack/Babel, so we can use new ES6 syntax in our work and not worry about browser support.

Usage: gulp scripts

gulp modernizr

gulp modernizr provides support for older browsers( IE6, IE7.. ) that doesnt support flexbox or other new CSS and Js stuff. This task is started automaticaly each time a js file is saved while in gulp watch mode, but it can be started manually with gulp modernizr command.

gulp build

gulp build task triggers building a docs directory in which all files are moved from development to production, CSS/HTML and Js are minified and optimized, images and icons are compressed and new source paths are build in index.html with help of usemin. The docs folder is the folder with files that end user is going to use.

Contributing

Fork it if you can see a way to improve it or suggest improvenments, PR's are welcome.

Changelog

Author

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments