Starter is a mix of H5BP and Paweł Ludwiczak's project.

Starter uses LESS.

• css - contains all CSS files generated by LESS
• images - contains all images used in CSS
• js - contains all JS libraries and scripts
• less - contains all LESS files
  • variables.less - this file contains all the variables
  • mixins.less - this file contains all the mixins
  • layout.less - this file contains all layout-related rules
  • common.less - this file contains some generic styles (no need to create a separate less file)
• media - contains all media files used as a content placeholder during development or a place to storage files not used in CSS
• index.html
• robots.txt

All image files should contain a prefix specific for its usage.

• bg- - background images
• ico- - icons
• logo- - all logos, main logo should be named logo.png
• nav- - all images navigation-related
• txt- - all images which are being used as a text replacement

PLEASE NOTE: All content-related images should be placed in assets/media directory.

All LESS files should be named in lowerCamelCase.

All ids & classes should be written in lowercase with dashes instead of spaces.

All properties should be written in following order:

1. Properties that have a major impact on the layout.
2. Dimensions.
3. Margins, borders, padding.
4. Background and colour.
5. Typographic properties.
6. Element type specific properties.
7. Generated content.

element {
  display: ;
  visibility: ;
  overflow: ;
  direction: ;
  unicode-bidi: ;
  
  float: ;
  clear: ;
  
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  clip: ;
  
  width: ;
  min-width: ;
  max-width: ;
  height: ;
  min-height: ;
  max-height: ;
  
  margin: ;
  border: ;
  padding: ;
  outline: ;
  
  background: ;
  color: ;
  
  font: ;
  font-family: ;
  font-size: ;
  font-style: ;
  font-variant: ;
  font-weight: ;
  letter-spacing: ;
  line-height: ;
  text-align: ;
  text-decoration: ;
  text-indent: ;
  text-transform: ;
  vertical-align: ;
  white-space: ;
  word-spacing: ;
  
  list-style: ;
  
  table-layout: ;
  caption-side: ;
  border-collapse: ;
  border-spacing: ;
  empty-cells: ;
  
  quotes: ;
  counter-reset: ;
  counter-increment: ;
  content: ;
}

All JS scripts should use a namespace given in js/scripts.js or similar.

All variables used in scripts should have a prefix $.

var Website = {
  init: function(){
    this.foo();
  },
  
  foo: function(){
    var $foo = $('#bar');
    
    $foo.css('color', 'red')
        .show();
  }
}

$(function(){
  Website.init();
});

If you have any questions related to Starter, feel free to ask: lukasz [at] klis [dot] pl or @LukaszKlis.

H5BP project is being developed by HTML5boilerplate.com's team. Namespace convention was an idea of Paweł Ludwiczak - thanks man!

(c) 2012 Łukasz Kliś