The Base Template


Has Touch

The 16 Column Grid

The underlying grid is a variation of the 960 grid system. The syntax is simple, is effective cross-browser, and also has the flexibility to go mobile. Resize the browser to watch the layout react.

A
B
C
D
E
F
G
H
I
J
K
L

Example Code

<!-- The container is a centered 960px -->
<div class="container">
  
  <!-- Give column value in word form (one, two..., twelve) -->
  <div class="sixteen columns">
    <h1>Full Width Column</h1>
  </div>
  
  <!-- Sweet nested columns cleared with a clearfix class -->
  <div class="six columns clearfix">
    <!-- In nested columns give the first column a class of alpha
    and the second a class of omega -->
    <div class="three columns alpha">...</div>
    <div class="three columns omega">...</div>
  </div>

  <!-- Sweet nested columns cleared by wrapping a .row -->
  <div class="five columns">
    <div class="row">
      <div class="three columns alpha">...</div>
      <div class="two columns omega">...</div>
    </div>
  </div>

  <!-- Sweet nested columns cleared by <br class="clear"> -->
  <div class="five columns">
    <div class="three columns alpha">...</div>
    <div class="two columns omega">...</div>
    <br class="clear" />
  </div>

  <!-- Can push over by columns -->
  <div class="five columns offset-by-one"></div>

</div>

<!-- Note: To clear columns (both nested and just stacked columns right inside the
.container, you can give the parent a class of "clearfix," wrap each row of columns in a
"<div class='row'>" or follow the last column in a row with a "<br class='clear'>." They
all work and it's up to your personal preference. -->

Typography

The typography is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

This is a blockquote style example. It stands out, and is awesome

Jonny Awesomesauce, Bossman

Example Code

<!-- Standard Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<!-- Inside blockquote's wrap the content in a <p> then attribute with a <cite>
<blockquote>
  <p>This is a blockquote style example. It stands out, but is awesome</p>
  <cite>Jonny Awesomesauce, Bossman</cite>
</blockquote>

Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.

Click Me For Action

Example Code

<!-- Just add .button to an anchor -->
<a href="#" class="button">Click Me</a>

<!-- Also works on plain button elements -->
<button>Click Me</button>

<!-- To take up full-width of a container? -->
<a href="#" class="full-width button">Click Me</a>

Forms

Some simple styling to alleviate basic form styling headaches:

Checkboxes
Radio Buttons

Example Code

<form action="">
  
  <!-- Label and text input -->
  <label for="regularInput">Regular Input</label>
  <input type="text" id="regularInput" />

  <!-- Label and textarea -->
  <label for="regularTextarea">Regular Textarea</label>
  <textarea id="regularTextarea"></textarea>

  <!-- Label and select list -->
  <label for="selectList">Select List</label>
  <select id="selectList">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </select>

  <!-- Wrap checkbox/radio button groups in fieldsets -->
  <fieldset>
    
    <!-- Give the fieldset a label -->
    <label for="">Checkboxes</label>

    <!-- Wrap each checkbox in a label, then give it the input and span for the text option -->
    <label for="regularCheckbox">
      <input type="checkbox" id="regularCheckbox" value="checkbox 1" />
      <span>Regular Checkbox</span>
    </label>

    <label for="secondRegularCheckbox">
      <input type="checkbox" id="secondRegularCheckbox" value="checkbox 2" />
      <span>Regular Checkbox</span>
    </label>
  </fieldset>

  <fieldset>
    <label for="">Radio Buttons</label>
    <label for="regularRadio">
      <input type="radio" name="radios" id="regularRadio" value="radio 1" />
      <span>Regular Radio</span>
    </label>
    <label for="secondRegularRadio">
      <input type="radio" name="radios" id="secondRegularRadio" value="radio 2" />
      <span>Regular Radio</span>
    </label>
  </fieldset>

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

</form>

Media Queries

This template uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. The media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

  • Smaller than 960: Smaller than the standard base grid
  • Tablet Portrait: Between 768px and 959px
  • All Mobile Sizes: Less than 767px
  • Just Mobile Landscape: Between 480px and 767px
  • Just Mobile Portrait: Less than 479px

Example Code

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

Template Features

Markup:

  1. Home page icon for Android, iOS, Nokia
  2. IE conditional switch (incl. mobile)
  3. Cross-browser viewport optimization for Android, iOS, Mobile IE, Nokia, Blackberry
  4. Better font rendering in Mobile IE
  5. Prevent scaling
  6. iPhone web app meta

JavaScript:

  1. INSTANT button click event
  2. Hide webkit chrome
  3. Textarea autogrow
  4. Cross iOS preload screen
  5. Cross-browser CSS media queries
  6. Firebug lite debugger

CSS:

  1. Mobile helper class and media query
  2. Prevent text resizing in IE/webkit browsers
  3. Prevent callout
  4. HTML5 contenteditable attribute on mobile
  5. S60 3.x and 5.0 devices which animated gif fix
  6. Text overflow with ellipsis
  7. Media query polyfill for low-end smartphones.

Browser Support

  • Latest Chrome (Mac/PC)
  • Latest Firefox, as well as 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Latest Safari
  • IE9, IE8, IE7
  • iPhone (Retina)
  • Android 4.0+
  • iPad

Much of the template defaults and enhancements are derived from the MBP (Mobile Boilerplate) project. Read the full documentation for more details on features, as well as recommended server settings.


Included Files

The file structure for the base template is:

  • index.html: The base html page that includes the necessary initial markup
  • stylesheets
    • base.css: Basic styles of the template
    • grid.css: The template grid
    • layout.css: Specific theme styles, including a variety of media queries
    • dropdown.css: Styling used for the responsive dropdown menu
    • demo.css: Styling used specific for demo content (ie. code snippets)
  • images
    • favicon.ico: Standard 16x16 favicon
    • apple-touch-icon & splash-image: All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina separated in H/M/L folders.