View on GitHub

HTML, SASS, and JavaScript Boilerplate

Base HTML and CSS for beginning a project for Blenderbox

Download this project as a .zip file Download this project as a tar.gz file

Boiling hot HTML Boilerplate

Blenderbox Guidelines for HTML, CSS, and JavaScript

Blenderbox HTML boilerplate

This needs to be updated as of 2014.07.07

INTRODUCTION

This document is a list of guidelines, tips, and examples for creating HTML, JavaScript and CSS for Blenderbox projects. Where applicable, please follow these guidelines to create a clean, SEO friendly website that adheres to Blenderbox's best practices.

1.0 - HTML

2.0 - CSS

Example:

.weather {
  background: LightCyan;
}

.weather > h3 {
  border-bottom: 1px solid white;
}

2.1 - CSS Preprocessor (Sass/Less) Style Guide

Example:

.weather {
  @extends %module;
  background: LightCyan;
  @include transition(all 0.3s ease);

  > h3 {
    border-bottom: 1px solid white;
    @include transform(rotate(90deg));
  }
}

Example:

.weather {

  .cities {

    li {
      // no more!
    }
  }
}

3.0 JavaScript

Use the module pattern

var APP = (function($, undefined) {
    'use strict';

    var app = {},
        $el;

    // define public functions
    app.foo = function() {  };

    // define private functions
    function init() {
        // Init the plugin
    }
    // Call the init function on load
    $(init);
    return app;
} (jQuery));

Only use one var declaration and put each variable on its own line

var a,
    b,
    z;

Use the exactly equal to (equal value and equal type) instead of ==

Example:

    1 === '1'

Don't leave extra spaces.

Validate your JavaScript with a linter such as http://www.jshint.com/ which can be installed as a plugin in most editors.

3.0 - TIPS TO FOLLOW

Some of the common issues with browser compliance as well as the Blenderbox standards can be found below.

CLEARING

We have two options for clearing, first the clearfix class and second the clear class. You can read more about the clearfix here http://www.webtoolkit.info/css-clearfix.html The basic clearing class, .clearfix, uses the ‘:after’ pseudo-selector to add clearing after the tag you are floating. To clear after a floated element, you can use clearfix.

Examples of clearing after:

<div class=”clearfix”>
  <div class="float-left">
    Content that is floating
  </div>
</div>

If you need to use a block element to clear a float, please use a div with a non-breaking space.

Examples:

<div class=”float-left-class”></div>
<div class=”clear”>&nbsp;</div>

BUTTONS

Use the button tag because it can be more reliably styled in every browser

<button type="submit"></button>

IMAGES

4.0 - Template Delivery

5.0 - The default file directory

/fonts

/images

/javascripts
    /app - All page specific Javascripts go here.
        application.js - All application wide JavaScript goes here.  This is where you start the JavaScript development.

    /libs – A folder with libraries written by someone else. jQuery, belatedpng, modernizer, should be here.
        If you add new libraries, place them here.
        jquery-{version}.min.js – the jQuery library.
        log.js - Add logging support to browsers without console.log
        modernizr-{version}.min.js – A JavaScript library for HTML5 tests. http://www.modernizr.com/ This should be included in the Head of your page to add HTML5 elements to IE.  Review the file to see what tests are available and visit the website if you need to add more tests.
        request_interval.js - a shim for request animation support.

    simple-plugin-template.jquery.js – A simpler jQuery plugin template.

/stylesheets
    all.css

index.html – A basic file for starting the site with most relevant HTML elements for style.
humans.txt – Read more: http://goo.gl/IjffW
robots.txt – Read more: http://goo.gl/JzIqS

6.0 - IE Targeted Styles

If you want to style for IE specifically, use the following classes that are added to the HTML node via conditional statements and Modernizr.

IE7 - lt-ie8 IE8 - lt-ie9

.lt-ie8 body { background:lime; }
.lt-ie9 body { background:pink; }

To target browsers that do not have JavaScript support, use the no-js class.

.no-js body { background:light-blue; }

7.0 Icons

We use icon fonts for our icons. To generate them, use icomoon Select the icons you want or upload SVGs of the icons you need and the select download. On the download screen, change the font name to 'icons', check 'encode and embed font in css,' and select 'use class selector.' Then download the font and store the zip in your project in case someone needs to make changes to it later by uploading the selection.json file to icomoon.

Generate all the icons you need for every devise here realfavicongenerator.net

8.0 Compiling

We are compiling the SASS into one file with npm and Grunt). We assume you have npm installed.

Install grunt client with

sudo npm install -g grunt-cli

Assuming that the Grunt CLI has been installed, it's very easy to start working with Grunt:

Change to the project's root directory.

Install project dependencies with

npm install

Run Grunt with

grunt

That's really all there is to it. Installed Grunt tasks can be listed by running grunt --help.