#
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.
- 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;
- HTML: @mdo and idiomatic HTML;
- CSS - SASS: BEM, SMACSS SUIT CSS and Idiomatic CSS;
- Javascript: idiomatic JS;
For you to enjoy all the benefits Default FrontEnd strongly recommend reading the Styleguide FrontEnd.
Install the Grunt tasks:
npm installInstall the Bower packages:
bower installTo development, simply do:
gruntor
grunt defaultThis 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 buildIt 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.
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
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.
MIT License. © Copyright 2015, @renatodeluna.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent