Greenwire grid

Greenwire uses the SingularityGS grid framework. We have a default of 12 columns, which are fluid and gutters are 14px by default.

Starting mobile first we have no columns. Screens wider than 900px get one of the following layouts:

1. 50/50 Layout

This layout has two equal columns which will both be 480px maximum. The gutter is 14px in total. 7px on the right side of the left column and 7px on the left side of the right column. The content of both have columns have a padding of 14px left, right and bottom. This leaves 445px for the content to span on large screens.

Screens below 900px will have just one column with tabbed navigation above. The column width here stretchs from 320px to 883px. The padding is 7px on both sides, so the width for the content is between 306px to 869px.

2. Two-third / One-third Layout

This layout has one main column and one sidebar column. The main column has a maximum width of 640px (2/3 of 960) and a padding on the right 7px. The content can therefore be stretched at a maximum of 633px.

The sidebar can stretch to a maximum of 320px (1/3 of 960) and has a padding on the left of 7px. The content in the sidebar can therefor stretch to a maximum of 313px. Most content in the sidbar is stored in blocks. These block have a side padding of 14px each. When designing for the largest screens, you will have 285px available for content in this layout.