Skip to content

Instantly share code, notes, and snippets.

@cwardzala

cwardzala/.editorconfig

Last active August 29, 2015 14:13
Show Gist options
  • Save cwardzala/e1f77eb22e3548f6e25a to your computer and use it in GitHub Desktop.
Save cwardzala/e1f77eb22e3548f6e25a to your computer and use it in GitHub Desktop.
Download ZIP
Code Standards
Raw
.editorconfig
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_size = 4
[*.yml,*.txt]
indent_size = 2
Raw
.jshintrc
{
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"globals" : {
"chrome": true
}
}
Raw
browsers.md

Desktop

Internet Explorer

[x] IE8 [x] IE9 [x] IE10 [x] IE11

Chrome

[x] latest (win) [x] latest (osx) [x] latest (android)

Firefox

[x] latest (win) [x] latest (osx)

Raw
code-standards.md

Coding Standards

Editor

Development Server

  • Hostname uses .dev TLD
  • Vagrant should be used to emulate production server env
  • Vagrantfile
  • Environment should be provisioned with bash scripts
    • provision/bootstrap.sh

Directory Structure

  • dist/
  • src/
    • bower_components/
    • css/ (compiled)
    • images/
    • js/
      • mods/
      • main.js
    • sass/
      • components/
      • mods/
      • _settings.scss
      • styles.scss
      • styleguide.scss

HTML

  • HTML5
    • <!doctype html>
  • XHTML syntax
    • <br />, <input type="" />
      • Always space before close

CSS/SCSS

  • Always use _normalize.scss

  • Always use Bourbon and Neat

  • Compile with libsass via grunt-sass or node-sass

  • Separated into categories

    • components
      • _links.scss
      • _forms.scss
    • modules (mods)
      • _slider.scss
      • _header.scss
      • _footer.scss
    • bower_compoents

  • BEM/SMACSS like class naming

    .thing {
    ...
    .thing-thang { ... }
}
.thing-primary { ... }
.thing-secondary { ... }
    <div class="thing thing-primary">
    <span class="thing-thang"></span>
</div>

  • .scss file per component/module

    • (component) _forms.scss
    • (module) _header.scss
    • component file names are always plural (forms)
    • module file names are always singular (header)

  • minimize element selectors, use class names. NEVER use ID selectors!

  • .js-* classes are reserved for javascript hooks, never style.

  • variables should follow the $<module|base>-<event?>-<css property> format

    • $slider-background
    • $slider-border-color
    • $base-font-family
    • $link-color
    • $link-hover-color

Javascript

  • JSHint should be used to validate all javascript
  • Use require.js for dependency injection and builds
  • separate module files
    • slider.js
  • events should always attach to document
    • $(document).on('event', '.js-module-event', ...);
    • selectors can be used to filter events
    • use .js-<module>-<event> style class selectors
      • .js-slider-click
      • .js-* classes should come first in HTML
        • class="js-foo js-thing bar baz"
  • use data-<module>-<key> attributes to transport data to modules
    • data-slider-id="1234"

JS Modules

  • module file names are always singular (slider)
  • modules can be named, but if so need to be defined in the requirejs paths config
  • modules should always expose/return an API
define('slider', [], function () {
    var slider = {};
    return slider;
});
  • modules should not attach any variables to window
  • modules define their dependencies
  • module events should always be namespaced to the module
    • .on('click:slider', ...)
  • if module is connected to an element store a reference to the module instance in the element's data
$('.js-slider').each(function () {
    $(this).data('slider', new Slider(this));
});

Third-party Javascript

  • Install/manage with Bower
  • If no AMD compat version exists add to requirejs shim config

jQuery

  • Install/manage with Bower
  • use jQuery ~1.11.0.
    • Using the 1.x.x version will keep compatibility with IE8+.
    • bower install jquery#~1.11.0
  • jQuery is AMD compat, make sure to add it to the requirejs paths config
  • Most jQuery plugins are not AMD compat, make sure to add them to the shim config

Dev Tasks

Production Builds

  • output to dist directory
  • compile, minify, and optimize JS and CSS
  • optimize images

App Deployment

  • use Fabric
  • define pre_deploy task
  • define deploy task
  • define post_deploy task
Raw
Gruntfile.js
module.exports = function (grunt) {
'use strict';
var pkg_conf, paths;
require('load-grunt-tasks')(grunt);
pkg_conf = grunt.file.readJSON('package.json');
paths = {
src: {
bower: 'src/bower_components',
css: 'src/css',
img: 'src/images',
js: 'src/js',
scss: 'src/sass'
},
dist: {
css: 'dist/css',
img: 'dist/images',
js: 'dist/js',
scss: 'dist/sass'
}
};
grunt.initConfig({
pkg: pkg_conf,
paths: paths,
watch: {
sass: {
files: ['<%= paths.src.scss %>/{,*/}*.scss'],
tasks: ['sass:dev']
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'dist/**',
'!dist/.git*'
]
}]
}
},
copy: {},
jshint : {
options: {
jshintrc: true,
reporter: require('jshint-stylish')
},
js: ['<%= paths.src.js %>/**/*.js', '!<%= paths.src.js %>/{vendor}/*.js']
},
sass: {
options: {
includePaths: ['<%= paths.src.bower %>']
},
dev: {
options: {
outputStyle: 'nested'
},
files: {
'<%= paths.src.css %>/styles.css': '<%= paths.src.scss %>/styles.scss'
}
},
dist: {
options: {
style: 'compressed'
},
files: {
'<%= paths.dist.css %>/styles.css': '<%= paths.src.scss %>/styles.scss'
}
}
},
requirejs: {
options: {
baseUrl: '<%= paths.src.js %>',
optimize: 'uglify',
mainConfigFile: '<%= paths.src.js %>/main.js',
name: 'almond',
include: ['main'],
preserveLicenseComments: false,
useStrict: true,
wrap: true
},
dist: {
// Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
options: {
out: '<%= paths.dist.js %>/main-dist.js',
}
}
},
hashres: {
options: {
fileNameFormat: '${hash}.${name}.${ext}',
renameFiles: true
},
js: {
src: 'main-dist.js',
dest: ['dist/*.html']
},
css: {
src: 'styles.css',
dest: ['dist/*.html']
}
}
});
grunt.task.registerTask('build', [
'clean:dist',
'sass:dist',
'jshint',
'requirejs:dist',
'hashres'
]);
};
Raw
Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :
# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = "WebHost1(14.04)"
config.vm.box_url = "http://opscode-vm-bento.s3.amazonaws.com/vagrant/virtualbox/opscode_ubuntu-14.04_chef-provisionerless.box"
config.ssh.forward_agent = true
config.vm.synced_folder "src/", "/var/www"
config.vm.network :forwarded_port, guest: 80, host: 8181
config.vm.hostname = ""
config.vm.provider "virtualbox" do |v|
v.memory = 1024
end
config.vm.provision "shell", path: "provision/bootstrap.sh"
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment