We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.

Container

The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

Demo

Try the button below to see what the page looks like without containers.

Push and Pull

You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.

This div is 7-columns wide on pushed to the right by 5-columns.

5-columns wide pulled to the left by 7-columns.

<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>

Creating Layouts

Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.

Section

The section class is used for simple top and bottom padding. Just add the section class to your div's containing large blocks of content.

Divider

Dividers are 1 pixel lines that help break up your content. Just add the divider to a div in between your content.

Example Promotion Table

If we want 3 divs that are equal size, we define the divs with a width of 4-columns, as 4+4+4 nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.

flash_on

Speeds up development

We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.

group

User Experience Focused

By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.

settings

Easy to work with

We have provided detailed documentation as well as specific code examples to help new users get started.

Creating Responsive Layouts

Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.

Screen Sizes

Mobile Devices <= 600px

Tablet Devices > 600px

Desktop Devices > 992px

Large Desktop Devices > 1200px

Class Prefix

.s

.m

.l

.xl

Container Width

90%

85%

70%

70%

Number of Columns

12

12

12

12

Adding Responsiveness

In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.

Responsive Side Navigation Layout

In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.

Help Materialize Grow

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.