72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
Charcoal-Boilerplate
|
|
====================
|
|
|
|
Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomotive.
|
|
|
|
|
|
## Getting started
|
|
|
|
### Setup project
|
|
|
|
1. **Clone the boilerplate module into your own module**
|
|
1. `sh clone.sh {{project-name}}`
|
|
- where `{{project-name}}` is the name of the target project.
|
|
- Note: on windows, the `sh` command is usually ran from cygwin.
|
|
2. **Create and setup the database**
|
|
1. Create an empty database (most people use phpmyadmin...)
|
|
2. Setup the database in `www/config/config.json`
|
|
3. **Setup configuration**
|
|
1. Setup the proper `URL` in in `www/config/config.php`
|
|
2. Setup languages and project name, if necessary, in `www/config/config.json`
|
|
4. **Initialize Charcoal**
|
|
1. Make sure the Charcoal core is installed
|
|
- Using SVN, this is normally done with a `svn:externals` property in `www/`
|
|
2. Setup a local admin user
|
|
- Visit `http://{{project-url}}/admin` to start the admin user creation wizard.
|
|
|
|
### Install the node modules / grunt
|
|
|
|
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`
|
|
|
|
## 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 {}`).
|
|
* **Components:** Discrete, complete chunks of UI (e.g. `.carousel {}`).
|
|
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
|
|
classes (e.g. `.hidden {}`).
|
|
|
|
*From [ITCSS](https://twitter.com/itcss_io)*
|
|
|
|
### Grid
|
|
|
|
We are using a simple inline-block grid system.
|
|
|
|
**Usage**
|
|
|
|
Insert a `grid` block and add `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)*
|