Updated EditorConfig Recommendations
Applied 4-spaces for everything as per: https://locomotivemtl.teamwork.com/tasks/7113032
This commit is contained in:
@@ -4,12 +4,11 @@ root = true
|
|||||||
|
|
||||||
[*]
|
[*]
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
indent_style = tab
|
|
||||||
indent_size = 4
|
|
||||||
end_of_line = lf
|
end_of_line = lf
|
||||||
trim_trailing_whitespace = true
|
indent_size = 4
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[{*.md,.*rc,.*.json,*.yml,.editorconfig,.env,.env.*,.git*,.htaccess,.jshintignore,bower.json,composer.json,package.json}]
|
|
||||||
indent_style = space
|
indent_style = space
|
||||||
indent_size = 2
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.{md,markdown}]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -14,7 +14,6 @@ vendor/
|
|||||||
node_modules/
|
node_modules/
|
||||||
bower_components/
|
bower_components/
|
||||||
|
|
||||||
|
|
||||||
# Macintosh
|
# Macintosh
|
||||||
# -----------------
|
# -----------------
|
||||||
|
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
|||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) Locomotive
|
Copyright (c) Locomotive, Inc.
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
this software and associated documentation files (the "Software"), to deal in
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
|||||||
30
README.md
30
README.md
@@ -1,16 +1,15 @@
|
|||||||
Locomotive front-end boilerplate
|
Locomotive's Front-end Boilerplate
|
||||||
====================
|
==================================
|
||||||
|
|
||||||
Front-end Boilerplate for projects by Locomotive.
|
Front-end boilerplate for projects by [Locomotive][locomtl].
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
| Prerequisite | How to check | How to install |
|
| Prerequisite | How to check | How to install |
|
||||||
| --------------- | ------------- | -------------- |
|
| --------------- | ------------- | -------------------------------- |
|
||||||
| Node.js 4.1.1 | `node -v` | [nodejs.org](//nodejs.org/) |
|
| Node.js 4.1.1 | `node -v` | [nodejs.org](https://nodejs.org) |
|
||||||
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
|
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
|
||||||
|
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
1. **Get the latest node modules**
|
1. **Get the latest node modules**
|
||||||
@@ -22,19 +21,21 @@ Front-end Boilerplate for projects by Locomotive.
|
|||||||
- `grunt`
|
- `grunt`
|
||||||
|
|
||||||
### Grunt
|
### Grunt
|
||||||
|
|
||||||
Each Grunt task has it's own file in the `grunt_tasks` folder.
|
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.
|
BrowserSync will automatically inject, refresh and sync all your browsers.
|
||||||
|
|
||||||
Run `grunt sync`
|
Run `grunt sync`
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
|
|
||||||
- We use [Sass](http://sass-lang.com/) for our CSS Preprocessor
|
- We use [Sass](http://sass-lang.com) for our CSS Preprocessor
|
||||||
- [itcss](http://itcss.io/) CSS architecture
|
- [itcss](http://itcss.io) CSS architecture
|
||||||
- More Minimal BEM like CSS Syntax: `.block_element -modifier`
|
- 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/)
|
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces)
|
||||||
|
|
||||||
### Sass import order
|
### Sass import order
|
||||||
|
|
||||||
@@ -60,15 +61,20 @@ No rows that contain floats, no twelve columns system; just the number of items
|
|||||||
- 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 `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.
|
- 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)*
|
*[Demo][demo-grid]*
|
||||||
|
|
||||||
### Form
|
### 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.
|
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)*
|
*[Demo][demo-form]*
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- We use HTML data attributes to init our JavaScript modules: `data-module`
|
- We use HTML data attributes to init our JavaScript modules: `data-module`
|
||||||
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
|
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
|
||||||
- [jQuery](https://jquery.com/) is globally included
|
- [jQuery](https://jquery.com) is globally included
|
||||||
|
|
||||||
|
[locomtl]: https://locomotive.ca
|
||||||
|
[demo-grid]: https://codepen.io/AntoineBoulanger/pen/EaLNxe
|
||||||
|
[demo-form]: https://codepen.io/AntoineBoulanger/pen/uBJmi
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
// ==========================================================================
|
/**
|
||||||
// Main
|
* Front-end Styles
|
||||||
// ==========================================================================
|
*
|
||||||
|
* @package Boilerplate
|
||||||
|
*/
|
||||||
|
|
||||||
@import "_imports.scss";
|
@import "_imports.scss";
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
prod: {
|
prod: {
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.img.src %>',
|
cwd : '<%= paths.img.dist %>',
|
||||||
src : [ '**/*.svg', '!sprite.svg' ],
|
src : [ '**/*.svg', '!sprite.svg' ],
|
||||||
dest : '<%= paths.img.dist %>',
|
dest : '<%= paths.img.dist %>',
|
||||||
options : {
|
options : {
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ module.exports = {
|
|||||||
tasks: [ 'sass', 'postcss', 'notify:sass' ]
|
tasks: [ 'sass', 'postcss', 'notify:sass' ]
|
||||||
},
|
},
|
||||||
svg: {
|
svg: {
|
||||||
files: [ '<%= paths.img.src %>/**/*.svg' ],
|
files: [ '<%= paths.img.dist %>/**/*.svg' ],
|
||||||
tasks: [ 'svg_sprite', 'notify:svg' ]
|
tasks: [ 'svg_sprite', 'notify:svg' ]
|
||||||
},
|
},
|
||||||
tasks: {
|
tasks: {
|
||||||
|
|||||||
@@ -15,9 +15,8 @@
|
|||||||
<link rel="stylesheet" href="assets/styles/main.css">
|
<link rel="stylesheet" href="assets/styles/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div data-module="Title">
|
<div data-module="Title">
|
||||||
<h1 class="js-label">Locomotive boilerplate</h1>
|
<h1 class="js-label">Locomotive's Boilerplate</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button data-module="Button" type="button" value="Clicked! Title destroyed">Change value and destroy Title()</button>
|
<button data-module="Button" type="button" value="Clicked! Title destroyed">Change value and destroy Title()</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user