#

Introduction

Welcome, this is a Style Guide for Front-End. A series of recommendations on how to write your CSS, HTML and Javascript code, based on architectures like SMACSS, BEM, SUIT, @mdo, Idiomatic CSS/HTML/JS.

Ensuring that all participants in the development of a project to work with the same Code base and using the same terminology: Developing a standard design, fast and lasting results.

Concept

• Block and Elements of the BEM
• Categorizations and States of the SMACSS
• Modifiers of the SUIT CSS
• Architecture and Standards of @mdo, Idiomatic CSS, idiomatic HTML and idiomatic JS

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;

Styleguide Front-End

• CSS Styleguide
• HTML Styleguide
• Javascript Styleguide

Nomenclature Stylesheet

The pre-porcessador SASS was adopted, but it is your choice to use what is most convenient for your project, the Styleguide Front End will be useful to everyone.

1 - Utilization hyphen to separate words in large or compound names:

  .menu-bar {}

2 - Use underscores to separate a block of an element:

  .menu_item {}

3 - Use double hyphen to structure modifiers:

  .button--big {}

4 - Use the 'is-' prefix to indicate the state of that element:

  .is-active {}

• More details of these nomenclature CSS Styleguide.

Structure file

  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
  

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.