Charcoal-Boilerplate

Boilerplate for Charcoal projects by Locomotive.

Getting started

Setup project

...

1. Clone the boilerplate module into your own module
2. 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.
3. Create and setup the database
4. Create an empty database (most people use phpmyadmin...)
5. Setup the database in www/config/config.json
6. Setup configuration
7. Setup the proper URL in in www/config/config.php
8. Setup languages and project name, if necessary, in www/config/config.json
9. Initialize Charcoal
10. Make sure the Charcoal core is installed - Using SVN, this is normally done with a svn:externals property in www/
11. 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

2. npm install -g npm-check-updates

3. npm-check-updates -u

4. npm install

5. 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

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 fractions like names helpers (ex: %third, %two-thirds), inside a single block.

• Extend the placeholder selectors (%) for more semantic ones to your components.
• Create custom width grid items by extending the %grid__item and adding widths in a fraction format, with the span() function.
• Add media queries, on the helpers selectors or on your custom components, with the $from and $to variables to change the grid items widths, for your content, on different screen sizes .

Demo