You need Grunt installed globally.
$ npm i -g grunt
Once Grunt has been installed install the plugins
$ npm install
Finally create basic folders and files
The framework helps you to generate your style.css with nice arquitecture using atomic web design, sass and grunt. It works for every project it doesn't matter if you use Wordpress, Drupal, Symphony, Angular or whatever you want.
These framework is based on Brad Frost's Atomic Design post
Generate basic folders and files
With this default task you generate the minimal folder and files to start
Start development mode
Start your development creating your HTML and CSS, with Jade and Sass it's very easy and you don't need to refresh your browser, just code and see.
$ grunt start
Validate CSS and HTML
Check your CSS and HTML with this task
$ grunt validate
Generate ngrok tunnel
Create a ngrok tunnel to display your project
$ grunt ngrok
Sass is a preprocessor that adds nested rules, variables, mixins and functions, selector inheritance, and more to CSS. Sass files compile into well-formatted, standard CSS to use in your site or application.
This task requires you to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby installed; test with
ruby -v in your terminal. When you've confirmed you have Ruby installed, run
gem install sass to install Sass.
Note: Files that begin with "_" are ignored even if they match the globbing pattern. This is done to match the expected Sass partial behaviour.
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
CSSNanois a modular minifier that aims to utilise small modules from the PostCSS ecosystem, rather than being an all-encompassing module that may be difficult to contribute to. Because it is written on top of PostCSS, it is able to do more than simple whitespace transforms - including advanced optimisations such as custom identifier reduction, z-index rebasing, and adjacent selector merging.
Here is the CSSlint documentation. If you want to change any option you have a .csslintrc file on root directory. Feel free to change.
Here is the W3C HTML Validation documentation.
Support / Contributing
Want to contribute? Great! Just open an issue or if you prefer send me a mail or tweet me.
More info about me here;
Free Software, Hell Yeah!