Default Front-End

#

Introduction

Welcome to Default FrontEnd, a workflow for rapid development of interface, facing the front-end developers. Its architecture, and standard nomenclature was created on Styleguide FrontEnd a very good style guide, which gathered itself several technical architectures and standards.

With these two tools your workflow will be much more productive, easy to maintain and scalable, thus reducing to the learning curve of new members in the team.

Benefits

• Facilitate the maintenance of long-term projects;
• Code understanding facility;
• Scalable code;
• Standard designs;
• Code reuse;
• Reduce the learning curve for new team members;
• Modularization design;

Concept of structure

• HTML: @mdo and idiomatic HTML;
• CSS - SASS: BEM, SMACSS SUIT CSS and Idiomatic CSS;
• Javascript: idiomatic JS;

Best of

For you to enjoy all the benefits Default FrontEnd strongly recommend reading the Styleguide FrontEnd.

Instalation and usage

Install the Grunt tasks:

    npm install

Install the Bower packages:

    bower install

To development, simply do:

    grunt

or

    grunt default

This will start a server for you on localhost:9000 or 127.0.0.1:9000, with a watch task for your HTML, Sass and JavaScript files, with LiveReload activated.

If you want to generate the deploy version, run:

    grunt build

It will create a dist folder only the with the files you need to deploy: concatenated and uglyfied JavaScript files, along with minified CSS and optimized imagery.

Structure file

  default-frontend
  ├── app
  |   ├── assets
  |   |   ├── fonts/
  |   |   |
  |   |   ├── img
  |   |   |   ├── public/
  |   |   |   └── sprites
  |   |   |       ├── default
  |   |   |       └── retina
  |   |   |
  |   |   ├── js
  |   |   |   ├── modules/
  |   |   |   └── vendor
  |   |   |       └── jquery
  |   |   |
  |   |   ├── sass
  |   |	  |   ├── base
  |   |	  |   |   ├── _reset.scss
  |   |	  |   |   ├── _typography.scss  
  |   |	  |   |   ├── _fonts.scss
  |   |	  |   |   └── _grid.scss
  |   |	  |   |
  |   |	  │   ├── modules
  |   |	  |   |   ├── _buttons.scss
  |   |	  |   |   ├── _dropdown.scss
  |   |	  |   |   ├── _gallery.scss
  |   |	  |   |   └── _modal.scss
  |   |	  |   |
  |   |	  │   ├── layouts
  |   |   |   |   ├── _header.scss
  |   |   |   |   ├── _main.scss
  |   |   |   |   ├── _footer.scss
  |   |   |   |   └── pages
  |   |   |   |       ├── _home.scss
  |   |   |   |       └── _about.scss
  |   |   |   |
  |   |	  │   ├── helpers
  |   |	  |   |   ├── _class.scss
  |   |	  |   |   ├── _functions.scss
  |   |	  |   |   ├── _mixins.scss
  |   |	  |   |   ├── _placeholder.scss
  |   |	  |   |   └── _variables.scss
  |   |	  |   |
  |   |	  |   ├── breakpoints
  |   |	  |   |   ├── _mobile.scss
  |   |	  |   |   ├── _tablets.scss
  |   |	  |   |   └── _desktop.scss
  |   |	  |   |
  |   |	  │   ├── style.scss
  |   |	  |   └── style-ie.scss
  |   |	  |
  |   |	  └── css
  |   |	      |── style.css
  |   |	      └── style-ie.css
  |   |
  |   └── index.html
  |
  ├── dist/
  |
  |── Gruntfile.js
  |── package.json
  |── bower.json
  |── .bowerrc
  |── .editorconfig
  |── .gitattributes
  |── .gitignore
  |── .jshintrc
  |── .scc-lint.yml
  └── .csscomb.json
  

EditorConfig

Set your editor with the following settings to avoid common inconsistencies in the code dirty and diffs:

• Use soft-tabs with 2 spaces
• Delete the blanks to save
• Set the encoding to UTF-8
• Place a new line at the end of files

Consider document and apply these settings for your project with EditorConfig.

License

MIT License. © Copyright 2015, @renatodeluna.