1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Updated EditorConfig Recommendations

Applied 4-spaces for everything as per: https://locomotivemtl.teamwork.com/tasks/7113032
This commit is contained in:
Chauncey McAskill
2016-08-22 10:30:46 -04:00
parent 3953fbca7b
commit 79219e0659
48 changed files with 1595 additions and 1589 deletions

View File

@@ -4,12 +4,11 @@ root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[{*.md,.*rc,.*.json,*.yml,.editorconfig,.env,.env.*,.git*,.htaccess,.jshintignore,bower.json,composer.json,package.json}]
indent_size = 4
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.{md,markdown}]
trim_trailing_whitespace = false

1
.gitignore vendored
View File

@@ -14,7 +14,6 @@ vendor/
node_modules/
bower_components/
# Macintosh
# -----------------

View File

@@ -1,6 +1,6 @@
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
this software and associated documentation files (the "Software"), to deal in

View File

@@ -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
| 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` |
## Getting started
1. **Get the latest node modules**
@@ -22,19 +21,21 @@ Front-end Boilerplate for projects by Locomotive.
- `grunt`
### Grunt
Each Grunt task has it's own file in the `grunt_tasks` folder.
### BrowserSync
BrowserSync will automatically inject, refresh and sync all your browsers.
Run `grunt sync`
## CSS
- We use [Sass](http://sass-lang.com/) for our CSS Preprocessor
- [itcss](http://itcss.io/) CSS architecture
- 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/)
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces)
### 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.
- 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
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
- We use HTML data attributes to init our JavaScript modules: `data-module`
- 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

View File

@@ -1,4 +1,7 @@
// ==========================================================================
// Main
// ==========================================================================
/**
* Front-end Styles
*
* @package Boilerplate
*/
@import "_imports.scss";

View File

@@ -11,7 +11,7 @@ module.exports = {
},
prod: {
expand : true,
cwd : '<%= paths.img.src %>',
cwd : '<%= paths.img.dist %>',
src : [ '**/*.svg', '!sprite.svg' ],
dest : '<%= paths.img.dist %>',
options : {

View File

@@ -12,7 +12,7 @@ module.exports = {
tasks: [ 'sass', 'postcss', 'notify:sass' ]
},
svg: {
files: [ '<%= paths.img.src %>/**/*.svg' ],
files: [ '<%= paths.img.dist %>/**/*.svg' ],
tasks: [ 'svg_sprite', 'notify:svg' ]
},
tasks: {

View File

@@ -15,9 +15,8 @@
<link rel="stylesheet" href="assets/styles/main.css">
</head>
<body>
<div data-module="Title">
<h1 class="js-label">Locomotive boilerplate</h1>
<h1 class="js-label">Locomotive's Boilerplate</h1>
</div>
<button data-module="Button" type="button" value="Clicked! Title destroyed">Change value and destroy Title()</button>