What is the grid system?
OpenCities templates use a lightweight, fluid, mobile-first grid framework to control the layout between different breakpoints.
The framework:
- Is a fluid grid, with gutter/margin sizes relative to the width
- Uses CSS box-sizing
- Is a mobile-first, 12-column grid
- Contains 12 columns in all sizes
- Handles 4 different sizes/breakpoints
- XS - Smaller than 480px (for smaller mobiles and mobiles in portrait mode)
- S - Smaller than 768px (for larger mobiles, mobiles in landscape mode, and some tablets)
- M - Smaller than 992px (for tablets in portrait mode)
- LG - Larger than 992px, but smaller than 1140px (for desktop, laptops, tablets in landscape mode, and high-resolution tablets)
Create a basic grid layout
To make different layouts in each size, use the size-specific classes. A row should always add up to 12 columns and should be wrapped with a DIV with the class “grid”.
Here are some examples:
To generate the above layout, use this HTML markup:
<div class="grid">
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
<div class="col-xs-12 col-s-6 col-m-4 col-lg-3"> </div>
</div>About class names
No matter the width of the screen, there are always 12 columns available inside a grid element.
- col-xs-12 - when the browser width is at the “xs” size, a div with this class should take up all 12 columns of the grid.
- col-s-6 - when the browser width is at the “s” size, a div with this class should take up 6 of the 12 columns of the grid. In other words, at the small size, this element should take up half the width.
- col-m-4 - when the browser width is at the “m” size, a div with this class should take up 4 of the 12 columns of the grid. In other words, at the medium tablet size, this element should take up a third of the width.
- col-lg-3 - when the browser width is at the “lg” size, a div with this class should take up 3 of the 12 columns of the grid. In other words, at the desktop size, this element should take up a quarter of the width.
Create an uneven column layout
The previous example showed a grid containing elements of equal width. The following shows how to create a main column with a sidebar that progresses to even-width stacked columns on mobile view.
Size 1 & 2
Left content area takes 2/3 of the width, and right column takes 1/3 of the width.
Size 3 & 4
Left content area and right column takes full width.
HTML mark-up to generate this layout
<div class="grid">
<div class="col-xs-12 col-m-8"> Content </div>
<div class="col-xs-12 col-m-4"> Right Column </div>
</div>Create a nested grid layout (grid within a grid)
Grids can be nested to build complex layouts between each snapping point.
Size 1
Left content area takes 2/3 of the width, and right column takes 1/3 of the width. Secondary grid within the content area contains 3 DIVs in a row.
Size 2
Left content area takes full width, and right column takes full width. Secondary grid within the content area contains 3 DIVs in a row.
Size 3
Left content area takes full width, and right column takes full width. Secondary grid within the content area contains 2 DIVs in a row.
Size 4
Left content area takes full width, and right column takes full width. Secondary grid within the content area contains 1 DIV in a row.
HTML mark-up to generate this layout
<div class="grid">
<div class="col-xs-12 col-m-12 col-lg-8">
Content
<div class="grid">
<div class="col-xs-12- col-s-6 col-m-4">Col 1</div>
<div class="col-xs-12- col-s-6 col-m-4">Col 2</div>
<div class="col-xs-12- col-s-6 col-m-4">Col 3</div>
</div>
</div>
<div class="col-xs-12 col-m-12 col-lg-4"> Right Column </div>
</div>