novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated EditorConfig Recommendations

Browse Source 
Applied 4-spaces for everything as per: https://locomotivemtl.teamwork.com/tasks/7113032
This commit is contained in:
Chauncey McAskill
2016-08-22 10:30:46 -04:00
parent 3953fbca7b
commit 79219e0659
48 changed files with 1595 additions and 1589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@@ -1,50 +1,51 @@
Locomotive front-end boilerplate
====================
Locomotive's Front-end Boilerplate
==================================
Front-end Boilerplate for projects by Locomotive.
Front-end boilerplate for projects by [Locomotive][locomtl].
## Requirements
| Prerequisite | How to check | How to install |
| --------------- | ------------- | -------------- |
| Node.js 4.1.1 | `node -v` | [nodejs.org](//nodejs.org/) |
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
| Prerequisite | How to check | How to install |
| --------------- | ------------- | -------------------------------- |
| Node.js 4.1.1 | `node -v` | [nodejs.org](https://nodejs.org) |
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
## Getting started
1. **Get the latest node modules**
1. `npm install -g npm-check-updates`
2. `npm-check-updates -u`
3. `npm install`
1. **Get the latest node modules**
1. `npm install -g npm-check-updates`
2. `npm-check-updates -u`
3. `npm install`
2. **Run grunt and start coding**
- `grunt`
2. **Run grunt and start coding**
- `grunt`
### Grunt
Each Grunt task has it's own file in the `grunt_tasks` folder.
### BrowserSync
BrowserSync will automatically inject, refresh and sync all your browsers.
Run `grunt sync`
## CSS
- We use [Sass](http://sass-lang.com/) for our CSS Preprocessor
- [itcss](http://itcss.io/) CSS architecture
- More Minimal BEM like CSS Syntax: `.block_element -modifier`
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
- We use [Sass](http://sass-lang.com) for our CSS Preprocessor
- [itcss](http://itcss.io) CSS architecture
- More Minimal BEM like CSS Syntax: `.block_element -modifier`
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces)
### Sass import order
* **Settings:** Global variables, site-wide settings, config switches, etc.
* **Tools:** Site-wide mixins and functions.
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
* **Objects:** Objects, abstractions, and design patterns (e.g. `.o-media {}`).
* **Components:** Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
* **Settings:** Global variables, site-wide settings, config switches, etc.
* **Tools:** Site-wide mixins and functions.
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
* **Objects:** Objects, abstractions, and design patterns (e.g. `.o-media {}`).
* **Components:** Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
classes (e.g. `.u-hidden {}`).
### Grid
@@ -56,19 +57,24 @@ We are using a simple inline-block grid system.
Insert a `o-grid` block and add `o-grid_item` elements inside it.
No rows that contain floats, no twelve columns system; just the number of items you want, with the classes names you want, inside a single block.
- Include the grid mixins in your components classes.
- Create custom width grid items by including the `grid_item` mixin and adding the widths you need or just include the helpers mixins with fractions like names.
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
- Include the grid mixins in your components classes.
- Create custom width grid items by including the `grid_item` mixin and adding the widths you need or just include the helpers mixins with fractions like names.
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*
*[Demo][demo-grid]*
### Form
We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
*[Demo](http://codepen.io/AntoineBoulanger/pen/uBJmi)*
*[Demo][demo-form]*
## JavaScript
- We use HTML data attributes to init our JavaScript modules: `data-module`
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
- [jQuery](https://jquery.com/) is globally included
- We use HTML data attributes to init our JavaScript modules: `data-module`
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
- [jQuery](https://jquery.com) is globally included
[locomtl]: https://locomotive.ca
[demo-grid]: https://codepen.io/AntoineBoulanger/pen/EaLNxe
[demo-form]: https://codepen.io/AntoineBoulanger/pen/uBJmi