The grid

The website uses a responsive twelve column grid. The grid is broken up into blocks that are the following widths:

  • Full width
  • 1/2
  • 1/3
  • 1/4
  • 2/3
  • 3/4 

The padding around each block is 12px. (5px padding below 480px breakpoint.)

grid

Responsiveness

On a browser that is less than 769px, the navigation drops away and can be revealed by clicking or tapping on the hamburger and + icons. The footers change width to accomodate the smaller browser size.

On a sreen that is 480px or smaller, the blocks all stack.

Breakpoint 768:

  • navigation drops to hamburger
  • 1/3s stay 1/3s
  • 1/2s stay 1/2s
  • 2/3s stay 2/3s


Breakpoint at screen width of 480:

  • 2/3s become Full Width
  • 1/3s become Full Width
  • 1/2s become Full Width
Breakpoints

Pages with left navigation
1000px wide
200px for left navigation (190 + 10px padding)
810px main content width

down to 769px width
the main content shrinks to 579px. Left nav stays the same. 

at 768px width
the top the left nav drops away to the drawer menu under a plus icon
the top nav drops to hamburger menu

Pages with no left nav
1000px wide 

down to 320px width 
the main content shrinks, reflows and stacks

below 768px width
the top nav drops to hamburger menu

Back to Top