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:
@@ -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
1
.gitignore
vendored
@@ -14,7 +14,6 @@ vendor/
|
||||
node_modules/
|
||||
bower_components/
|
||||
|
||||
|
||||
# Macintosh
|
||||
# -----------------
|
||||
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -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
|
||||
|
||||
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
|
||||
|
||||
| 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
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Main
|
||||
// ==========================================================================
|
||||
/**
|
||||
* Front-end Styles
|
||||
*
|
||||
* @package Boilerplate
|
||||
*/
|
||||
|
||||
@import "_imports.scss";
|
||||
|
||||
@@ -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 : {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user