2014-10-09 10:33:09 -04:00
|
|
|
Charcoal-Boilerplate
|
2014-03-01 09:33:24 -08:00
|
|
|
======================
|
|
|
|
|
|
2014-10-09 10:33:09 -04:00
|
|
|
Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomotive.
|
2015-02-15 15:44:11 -05:00
|
|
|
|
|
|
|
|
|
2015-03-05 14:57:47 -05:00
|
|
|
## Getting started
|
|
|
|
|
|
2015-03-05 14:58:59 -05:00
|
|
|
**Get the latest node modules**
|
|
|
|
|
|
2015-03-05 14:57:47 -05:00
|
|
|
We are using this module to get the latest version of every modules and update the package.json
|
|
|
|
|
|
|
|
|
|
`npm install -g npm-check-updates`
|
|
|
|
|
|
|
|
|
|
`npm-check-updates -u`
|
|
|
|
|
|
|
|
|
|
`npm install`
|
|
|
|
|
|
|
|
|
|
|
2015-03-05 14:58:59 -05:00
|
|
|
**Run grunt and start coding**
|
|
|
|
|
|
2015-03-05 14:57:47 -05:00
|
|
|
`grunt`
|
|
|
|
|
|
2015-02-15 15:44:11 -05:00
|
|
|
## SCSS
|
|
|
|
|
|
|
|
|
|
### 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. `.media {}`).
|
2015-02-16 12:36:58 -05:00
|
|
|
* **Components:** Discrete, complete chunks of UI (e.g. `.carousel {}`).
|
2015-02-15 15:44:11 -05:00
|
|
|
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
|
|
|
|
|
classes (e.g. `.hidden {}`).
|
|
|
|
|
|
|
|
|
|
*From [ITCSS](https://twitter.com/itcss_io)*
|
