My personal framework to create awsome front-end
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Frontend Framework

Built with Grunt


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

$ grunt


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

$ grunt

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

Frontend Tecnologies


If you haven't used Grunt before, be sure to check out the Getting Started guide.


Here is the Jade documentation. With Jade it's very easy to start your html. As you can see I use an Atomic structure like Sass. Import your files and DRY.


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.

Plugin docmentation

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.

W3C Validation

Here is the W3C HTML Validation documentation.

Based on



Support / Contributing

Want to contribute? Great! Just open an issue or if you prefer send me a mail or tweet me.


  • Performance
  • Precommits



More info about me here;


Free Software, Hell Yeah!