README.md

Locomotive front-end boilerplate
====================

Front-end Boilerplate for projects by Locomotive.

## 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` |


## Getting started

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`

### 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/)

### 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
  classes (e.g. `.u-hidden {}`).

### Grid

We are using a simple inline-block grid system.

**Usage**

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.

*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*

### 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)*

## 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
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`Locomotive front-end boilerplate`
Setup instruction in README 2015-03-13 12:47:44 -04:00			`====================`
Initial commit 2014-03-01 09:33:24 -08:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`Front-end Boilerplate for projects by Locomotive.`
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README. We were doing it wrong. 2015-02-15 15:44:11 -05:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`## 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` \|
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README. We were doing it wrong. 2015-02-15 15:44:11 -05:00
Update readme to start project correctly Change csscomb json file location change package json node modules to 0.0.0 2015-03-05 14:57:47 -05:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`## Getting started`
Setup instruction in README 2015-03-13 12:47:44 -04:00
			`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`
Update readme to start project correctly Change csscomb json file location change package json node modules to 0.0.0 2015-03-05 14:57:47 -05:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`### Grunt`
Add Grunt and BrowserSync task in README. 2015-04-20 09:53:11 -04:00			Each Grunt task has it's own file in the `grunt_tasks` folder.

Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`### BrowserSync`
Add Grunt and BrowserSync task in README. 2015-04-20 09:53:11 -04:00			`BrowserSync will automatically inject, refresh and sync all your browsers.`

			Run `grunt sync`

Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`## CSS`
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README. We were doing it wrong. 2015-02-15 15:44:11 -05:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			`- 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`
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README. We were doing it wrong. 2015-02-15 15:44:11 -05:00
			`* 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 {}`).
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			* Objects: Objects, abstractions, and design patterns (e.g. `.o-media {}`).
			* Components: Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README. We were doing it wrong. 2015-02-15 15:44:11 -05:00			`* Trumps: High-specificity, very explicit selectors. Overrides and helper`
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			classes (e.g. `.u-hidden {}`).
Add grid description to README 2015-03-06 10:15:49 -05:00
			`### Grid`

			`We are using a simple inline-block grid system.`

Update grid README for placeholder selectors grid 2015-03-06 11:08:43 -05:00			`Usage`
Add grid description to README 2015-03-06 10:15:49 -05:00
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			Insert a `o-grid` block and add `o-grid_item` elements inside it.
Update grid README 2015-03-23 12:56:15 -04:00			`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.`
Add grid description to README 2015-03-06 10:15:49 -05:00
Update grid README 2015-03-23 12:56:15 -04:00			`- Include the grid mixins in your components classes.`
Mixup between SCSS mixin and CSS class 2015-12-07 11:18:36 -05:00			- 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.
Update grid README 2015-03-23 12:56:15 -04:00			`- 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.`
Add grid description to README 2015-03-06 10:15:49 -05:00
			`[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)`
Add form section in README 2015-03-24 13:05:05 -04:00
			`### 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)`
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00
			`## JavaScript`
Doing some cleaning up 2016-07-19 10:19:52 -04:00			- We use HTML data attributes to init our JavaScript modules: `data-module`
Charcoal Boilerplate -> Locomotive front-end boilerplate - Removing Charcoal files and configuration to be backend agnostic (therefore moving the assets) - Using HTML5 Boilerplate .htaccess to which framework specific rules can be added later on - Updating README with more information and documentation on the boilerplate 2015-12-07 10:35:27 -05:00			- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
			`- [jQuery](https://jquery.com/) is globally included`