Components · Airparks Bootstrap

Requires HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Typography and links

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

Remove margin on the body
Set background-color: white; on the body
Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base
Set the global link color via @linkColor and apply link underlines only on :hover

These styles can be found within scaffolding.less.

Reset via Normalize

With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

Live fluid grid example

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Basic fluid grid HTML

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Fluid offsetting

Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

4 offset 4

3 offset 3

6 offset 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Fluid nesting

Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

Fluid 12

Fluid 6

<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

Fluid layout

Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Heads up!MOST of the Bootstrap responsive code has been deleted or rewritten

Bootstrap bad habits

There are a number of things we don't like about Bootstraps responsive implementation.

It's been designed 'Desktop first' - Additional code is needed to alter this desktop experience for devices with smaller viewports
It's been designed for specific devices - Media Query sizes are based on viewport sizes of a few popular devices. This is quite short sighted, what happens when a new device is released? Do you keep adding more Media Queries?
It's been designed for fixed widths - Although fluid classes are available many of the responsive decisions have been made based on fixed widths. This again is short sighted, what happens when devices are release with different resolutions?
It is not responsive by default - You have to add code to make it work.

Our new site is Future Friendly

It's been designed 'Mobile first' - Our responsive re-work of Bootstrap has been influenced by Andy Clarke and his 320andup project.
It's been designed for the future - When setting the break point widths for our Media Queries, I have considered what is appropriate for our content and our users, rather than just looking at specific devices. If you are interested in designing for the future of the internet, I encourage you to check out the articles at futurefriend.ly/thinking.html.
It's been designed for percentage widths - We are only using the class .container-fluid which allows the widths of the content blocks to be based on percentages rather than a fixed number of pixels. This means all our content will scale to fit which ever device it is being viewed on. Why would you want anything else?
It is responsive by default - Bootstrap doesn't include responsive features by default, but ours does :-)

Responsive utility classes

responsive-utilities.less has been re-written to allow these handy Bootstrap classes to work in our new 'mobile first' environment. They are great for faster mobile-friendly development. Use these utility classes for showing and hiding content by device. Please note: I have retained the names 'Phones', 'Tablets' and 'Desktops' just for ease of use. Technically we're talking about devices with 'small', 'medium' or 'large' viewports.

Below is a table of the available classes and their effect on a given media query layout (labeled by the size of the viewport).

Class	Phones Default	Tablets over 600px	Desktops over 992px
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Phone
Tablet✔ Tablet
Desktop✔ Desktop

Hidden on...

Here, green checkmarks indicate that class is hidden in your current viewport.

Phone✔ Phone
Tablet✔ Tablet
Desktop✔ Desktop

Scaffolding

Global settings