Quick Start

HTML/CSS Template View

Includes small website template with basic markup, layout & styles

Download HTML/CSS files

CSS

  • h5bp.css: normalization of styles across browsers and handy defaults. See H5BP docs for more info on that
  • grid.css: the grid framework
  • style.css: your own styles

h5bp.css & grid.css are needed. The content of style.css can be deleted if you want to start real fresh

JS/jQuery

  • plugins.js: put all jQuery plugins you want to use in here
  • script.js: write your own js/jQuery code in here like initializing a jQuery plugin

Link to jQuery and these files at the end of your document for faster page loading. This is commented out in the template so it isn't active by default.

Sketch & Photoshop Templates

Includes 1 psd file and a sketch sheet with 3 views side by side.

Download sketch & psd files

  • 2 grids for fixed sizes of 1000px (6 Columns), 500px (2 Columns) & the mobile view (1 column)

Documentation

All required documentation can be found on this page. It's itself build with the grid framework in use in the HTML/CSS template so it's a live example too. Inspect Element is your friend.

Browser Support

All modern browsers including but not limited to Chrome, Firefox, Safari, Opera and IE8+. IE8 get's a polyfill for HTML5 & Media Queries

Markup

<div class="container">
  <div class="row">
    <div class="col3 grid2-col1">...</div>
    <div class="col3 grid2-col1">...</div>
  </div>
  <div class="row">
    <div class="col2">...</div>
    <div class="col2">...</div>
    <div class="col2">...</div>
  </div>
</div>
  • .container is always full width of the window
  • .row is full width too but with maximum at 1000px, gets centered within window
  • .col* is the number of columns an element is spanning within the grid
  • .grid2-col* controls number of total columns an element is spanning within the optional grid
  • Columns within one .row always need to sum up to 6 (Grid 6) or 2 (Grid 2)

The Grid

Grid 6

The main fluid grid system with 12 flexible columns.

In use for viewport sizes 768px and up.

Grid 2

The optional fluid grid system with 2 columns.

In use for viewport sizes between 480px and 768px.

Mix It

All columns of Grid 6 default to full width columns in a 1 column layout for viewport sizes under 768px.

But the Grid 2 can be used as an addition to Grid 6: by using grid2-col1 or grid-col2 classes you can further control the layout between 480px and 768px.

The Grid 6

This grid preview uses both, Grid 6 & Grid 2 (just like the above text blocks). At a viewport size of 768px and down Grid 2 kicks in. Both grids become a 1 column layout for viewport sizes of under 480px.

Resize your browser window and watch the columns, especially those with two classes.

.col1

.col1

.col1

.col1

.col1

.col1

.col2

.col2

.col2

.col3 & .grid2-col1

.col3 & .grid2-col1

.col4 & .grid2-col1

.col2 & .grid2-col1

.col1

.col5

.col3 & .grid2-col1

.col3 & .grid2-col1

.col6

The Grid 2

Grid 2 could theoretically used standalone. For demonstrating purpose this grid preview maxes out at 768px but it's fluid until 1000px like Grid 6 by default.

.grid2-col2

.grid2-col1

.grid2-col1

Responsive Media

  • These are images which are bigger than the columns they're in. Using max-width:100% for all img elements makes sure they won't exceed the (flexible) width of the spanning column no matter how big they are.

  • Additionally images are always scaled proportionally by using height:auto even if they have width/height attributes in the img tag (doesn't work in IE8).

Responsive & Touch Enabled Image Slider

  • Caption is possible too

FlexSlider is touch optimized so the slides can be moved with a buttery smooth, hardware accelerated swipe.

Literature & Links