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.
Permalink
Failed to load latest commit information.
jade
sass
.csslintrc
.editorconfig
.gitignore
Gruntfile.js
README.md
package.json

README.md

Frontend Framework

Built with Grunt

Installation

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

Documentation

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

Tasks

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

Grunt

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

Jade

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

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

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.

CSSNano

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.

CSSlint

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

Version

1.0.0

Support / Contributing

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

Todos

  • Performance
  • Precommits

Thanks

Author

More info about me here;

License

Free Software, Hell Yeah!