ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Charcoal Boilerplate -> Locomotive front-end boilerplate

Browse Source 
- 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
This commit is contained in:
dominiclord
2015-12-07 10:35:27 -05:00
parent 822dd4c8b6
commit b012a7a991
84 changed files with 1034 additions and 1881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
README.md
View File

@@ -1,31 +1,18 @@
Charcoal-Boilerplate
Locomotive front-end boilerplate
====================
Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomotive.
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
### 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`
@@ -34,29 +21,31 @@ Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomot
2. **Run grunt and start coding**
- `grunt`
## Grunt
### Grunt
Each Grunt task has it's own file in the `grunt_tasks` folder.
#### BrowserSync
### BrowserSync
BrowserSync will automatically inject, refresh and sync all your browsers.
Run `grunt sync`
## SCSS
## CSS
### Import order
- 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. `.media {}`).
* **Components:** Discrete, complete chunks of UI (e.g. `.carousel {}`).
* **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. `.hidden {}`).
*From [ITCSS](https://twitter.com/itcss_io)*
classes (e.g. `.u-hidden {}`).
### Grid
@@ -64,11 +53,11 @@ We are using a simple inline-block grid system.
**Usage**
Insert a `grid` block and add `grid__item` elements inside it.
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.
- Create custom width grid items by including the `o-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)*
@@ -78,3 +67,8 @@ No rows that contain floats, no twelve columns system; just the number of items
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-app`, `data-widget` and `data-template`
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
- [jQuery](https://jquery.com/) is globally included