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.
900px will have just one column with tabbed navigation above. The column width here stretchs from
883px. The padding is
7px on both sides, so the width for the content is between
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
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.