Grid options

Containers

.miz-container

I am the default .miz-container.
My max-width is based on the screen size and the $container-max-width values:


            $container-max-widths: (
            sm: 540px,
            md: 720px,
            lg: 960px,
            xl: 1202px
            );
            

.miz-container–wide

I am the wider variant of the .miz-container
My max-width is an arbitrary 1472px. At smaller sizes it seems like I fill the space.

.miz-container–fill

I am the “fill” variant of the .miz-container
My max-width is 100% of my containing element

Flexbox components

Wherever possible, we try to use the flexibility of CSS flexbox for layout. As many components as possible are built with flex.

If you’re unfamiliar with flexbox and how it works, this CSS Tricks flexbox guide is a great resource.

We use Bootstrap 4 as a foundation to provide a complete suite of flexbox utilities and structure.

As we build out a stronger grid, we will begin to provide more classes like the below .miz-flex-row class.

.miz-flex-row

Creates a default flex container and counteracts left and right padding inside of a .miz-container.

Use the make-row() mixin to add this to any style.