Introduction

Mobile-first. Code for small screens first and larger devices will inherit those styles. Customize for larger screens as necessary. Work in progress.


 

Columns

grid-menu

The columns shortcode is the cornerstone for all layouts. It allows for precise control of how the content will layout on the page. It consists of up to 4 column layouts which can be configured on a 12-column grid at each screen size. This means you can create a flexible layout that spans multiple columns to a single column all depending on what size device it’s viewed on. Continue reading for a further explanation of how to master the columns shortcode.

 

2-Column Layout

grid-config-sm4-md4-lg4

Here is the configuration for a basic 2-column layout with equal column widths. Notice the column value is set to 6 at each screen size. This will result in an equal two column layout across all devices. Look at the results below. Perfect right? Not so fast. Try resizing your browser to the small screen size. See how narrow and long the content becomes on small screen devices? Not such a great reading experience when you have to scroll down and then back up to read all of the content on the page. The problem is we didn’t design for mobile first. Lets fix this in the next section.

SM 6 – MD 6 – LG 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

SM 6 – MD 6 – LG 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

 

Mobile First 2-Column Layout

Given the amount of text we have to layout we need to determine how best to present it on small screen devices. Generally that would be in a single column. To achieve this we will need to change the small screen column values. Previously we had the small screen column value set to 6 for both columns. Since we are working with a 12 column grid and 6+6=12 the columns split equally across a single row. To force a column to span across the full 12 column grid we need the column value to equal 12. Try the results below at the small screen width. Much easier to read, right? Now lets add two more columns.

SM 12 – MD 6 – LG 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

SM 12 – MD 6 – LG 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

 

4-Column Layout

Now we are up to 4-columns.

SM 12 – MD 3 – LG 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

SM 12 – MD 3 – LG 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

SM 12 – MD 3 – LG 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.

SM 12 – MD 3 – LG 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec risus sed sapien aliquet semper sed ac ante. Ut condimentum ornare leo, non molestie metus dapibus vitae. Etiam ut felis mi. Vivamus eget risus sapien. Pellentesque ut interdum velit. Morbi convallis tortor nec erat gravida rhoncus. Donec bibendum libero nibh, sed tristique felis finibus quis. Nullam pretium vestibulum imperdiet.