Modern website design must be responsive. Responsive design ensures that sites can respond to the environment in which they're viewed; in other words, websites need to display correctly and accessibly across multiple devices. To achieve this, we use a responsive grid framework.
Our CMS templates use a lightweight, fluid, mobile-first grid framework to control the layout between different breakpoints and provide the best possible experience for users.
The framework:
- Is a fluid grid with gutter and margin sizes relative to the width
- Uses CSS box-sizing
- Is a mobile-first, 12-column grid
- Contains 12 columns in all sizes
- Handles four different breakpoints
- XS: Smaller than 480 px, for smaller mobiles and mobiles in portrait mode
- S: Smaller than 768 px, for larger mobiles, mobiles in landscape mode, and some tablets
- M: Smaller than 992 px, for tablets in portrait mode
- LG: Larger than 992 px, but smaller than 1140 px, for desktop, laptops, tablets in landscape mode, and high-resolution tablets
You can create three types of grid layouts for the four different device sizes:
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 be wrapped with a DIV with the "grid" class.
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
Regardless of the screen width, 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
An uneven column layout allows you to create a grid with a main content area and a sidebar when viewed on a desktop, while progressing to even-width stacked columns on a mobile device.
For sizes LG (desktops) and M (laptops and tablets), the left content area takes 2/3 of the width, while the right column takes 1/3 of the width:
For sizes S (smaller tablets and larger mobiles) and XS (smaller mobiles), both content areas are staked with an equal width:
To create this grid, use the following HTML markup:
<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)
You can use nested grids to build complex layouts for various devices. For example, you can create a grid that has a main content area and sidebar, with an additional grid dividing the main content area into columns.
For size LG (desktops), the left content area takes 2/3 of the width, while the right column takes 1/3. A secondary grid within the main content area contains three divs in a row.
For size M (laptops and tablets), the content areas are of equal width and stacked, with a secondary grid within the main content area containing three divs in a row.
For size S (smaller tablets and larger mobiles), both content areas are stacked with an equal width, and a secondary grid contains two divs in a row.
For size XS (smaller mobiles), both content areas are stacked and equal width, with a secondary grid with one div a row.
To generate this layout, use this markup:
<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>