Mastering Materialize’s grid system

Rylan Francis
Aug 23, 2017 · 6 min read

It seems like everyday there is a new framework popping up promising to change the way we build websites. Bootstrap, Skeleton, Materialize, 960, etc. They all have their advantages and disadvantages. Choosing a framework that would work for Protect America meant looking at not only the features we wanted, but the grid system itself. And it is because of the grid system that we ultimately chose Materialize as the site’s CSS framework. In this article, I wanted to go into the power of the Materialize grid to help build websites faster and better.

A Responsive Web

Designing for the web means that your layout is ever changing. From the content on the page to the size of the screen to the environment its viewed in, almost no two experiences are the same. Designing for this is known as responsive design. And the ability to control those variables makes our lives and designs better. Thats where a grid system comes in. It allows us to put structure on the page quickly — unity and logic to content’s chaos. Materialize’s grid is unique to most systems in the fact that you can customize it to the screen width. This means your mobile grid can be completely different from your tablet or desktop grid — and its completely up to you.

That may seem like a small thing, but you have to realize that most other frameworks sort of do the grid change for you. Skeleton (a 12 column grid system) for example, will automatically make columns full width when you break it down to mobile mode. But what if you want a 50 / 50 split? This would take extra custom css to achieve these results. In some ways you end up fighting the framework rather than using it. Using Materialize for Protect America, we found more control was given to the designer in our layouts as you move from screen size to screen size. Content can be completely rearranged, hidden, or appear.

A Cascading Grid System

The power in Materialize comes in its cascading grid system. Built from a mobile-first design, the grid classes will overwrite as the screen size increases. They achieve this through a prefix on each class. an “s” signifies that column width will affect “small” screen sizes, while an “l” signifies a large screen size. If the screen size is large, the cascading styles will find the lowest set column width. So if you want your column to stay full width throughout the design, an “s12” will work on all screen sizes. However, if you want it to be full width on mobile and half width on desktop you might as the classes, “s12 l6”.

<div class="row">
<div class="col s10 m8 l10 xl8 offset-s1 offset-m2 offset-l1 offset-xl2 center">
<h2 class="h1-heading">Custom built by you and shipped straight to the customer's door - means no carrying costs.</h2>
</div>
</div>

Looking at the above example shows the power of the cascading grid system. Let’s break it down:

<div class="row">

Every section of the grid system starts with a “row” class. This class not only activates the grid columns but can function as a clear for any floating divs. The full width of a row is broken up to 12 columns. If your columns are greater than 12, that div will move to the next line behaving like any float: left object. So if you have a group of columns and you want them to behave independently, you can break them up using the “row” class.

<div class="col">

Using the “col” class designates that you will be using the object as a column. A column must be inside a row to work, however, it does not need to be inside a “container” — I will discuss containers later.

<div class="col s10 m8 l10 xl8 offset-s1 offset-m2 offset-l1 offset-xl2 center">

So we have the “col” designated, now we will use the cascading grid system. For Protect America, we use offsets to add white space to the left and right. By adding the “offset-s1” means we want this content to move over one column width. Then, by adding “s10” means we want this div to be a width of 10 columns. We don’t have to specify the last column because its ust blank space and will be equal to the “offset-s1". So we now have a div that is 10 column widths and has white space of one column width on the left and right.

As we move to tablet, we change the offset to “offset-m2” overwriting the mobile offset and making it two column widths. We also change the cdiv to have a column width of 8 using “m8”. We move back to a ten column width and offset of one for large screens. Finally, we have an eight column width with offset of two for extra large screens (>1200 px).

In this example, this allows the designer to control the ultimate look of how the content is presented. Since this example only has a headline in it, the columns are most likely controlling where the text breaks to have the headline be aesthetically pleasing and avoid widows.

An Offset Hack

Specifically for Protect America, we used offsets extensively throughout the site. There was a bit of a limitation when it comes to offsets that doesn’t allow you to reset offsets when cascading up. An example of this might be on mobile you want an offset of one, but on desktop its not needed — there is no way to remove that offset. So for our build, we added an offset-s0 (zero), offset-m0, offset-l0, and offset-xl0. These classes essentially reset the offset for greater control. These have to be added to their respective media queries but the code is simple:

.row .col.offset-l0 {
margin-left: auto;
}

Lastly, Containers

Naturally, the Materialize grid system can work in a full width website. They do have the option to contain your content into a smaller width using the “container” class. We use this on Protect America to contain all the content in a white container surrounded by a light grey background.

This is mainly an aesthetic choice, but again gives you greater control over the content on your site. Here is an example of how we might build a basic section of our site:

<div class="container white">
<div class="row">
<div class="col s10 offset-s1">
</div>
</div>
</div>

This code would create a container (with a white background) that contains a row with one div that is ten columns widths and offset by one column width. Make sense? Great!

Final Thoughts

In the end, choosing Materialize helped us build grids that worked with us, not against. Besides a couple of adjusting classes like the offset zero classes we never really had to fight it to get what we wanted. This provided quick and easy creation of pages. You HTML pages will have more classes assigned to each element, but this is a trade-off for pages and pages of CSS.

The important thing when choosing a framework is to make sure it works for you. Like anything in at a designer’s disposal, its a tool to create the final product. If the tool is not useful, perhaps you should find a better tool.

Protect America Design

The Ones Doing the Things

)

Rylan Francis

Written by

Senior Creative Director at Protect America: a home security company based in Austin, Texas. I believe that one’s favorite movie says everything about them.

Protect America Design

The Ones Doing the Things

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade