A starter kit for front end development including a build system and a style guide to quickly craft components.

• Gulp as task runner

• SASS as CSS preprocessor
• PostCSS plugins
  • Autoprefixer takes care of vendor prefixes
  • CSSnano to optimize and minify CSS
  • Responsive Type for automagical responsive typography
  • Quantity Queries enabling stuffs like :at-most(4) or :between(4, 6)
• BEMIT as CSS naming convention

• Browserify as JS dependencies manager
• ESLint as JS linter
• Babel to use next generation javascript, today

• Imagemin to optimize images
• Realfavicons to generate favicons
• Editorconfig to maintain consistent coding styles

You need to have node and gulp installed. If you have them, you just need to run this task.

  npm install

It will install nodejs dependencies then run gulp to generate files in public directory.

|
|-- frontend/
|  |-- build/
|  |  |-- configs/
|  |  |-- tasks/
|  |-- favicon/
|  |  |-- favicon.png
|  |-- fonts/
|  |-- img/
|  |-- scss/
|  |  |-- base/
|  |  |-- components/
|  |  |-- helpers/
|  |  |-- layout/
|  |  |-- styles.scss
|  |-- js/
|  |  |-- components/ (will be concatened on top of main.js)
|  |  |-- main.js
|-- public/
|  |-- favicons/ (generated favicons)
|  |-- fonts/ (copied fonts)
|  |-- img/ (optimized images)
|  |-- css/
|  |  |-- styles.css
|  |-- js/
|  |  |-- scripts.js
|  |-- index.html
|

Gulp configs and individual tasks are located in build folder. All tasks can be disabled via the config files.

This build system is including support for sourcemaps, notifications and livereload.

The starter kit includes SASS variables for general settings such as font styling color settings breakpoints and transitions.

Some SASS placeholders are also provided: clearfix centerx centery centerxy and hide-text.

The starter kit includes a style guide displaying all CSS components.

All components are in em so you can control their sizes with the font size of their parent. Using rem on values that are not meant to be relative.

Sanitize is included to render elements consistently.

Providing styling for text elements including headings. Typography element and variations can be extended on a container to provide quick typography styling.

Providing styling for form elements with custom select boxes, radio buttons and checkboxes in CSS.

Providing basic styling for buttons with primary secondary and disabled variations.

The MIT License (MIT) Copyright © 2016 Vivian Verswyvel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.