Containers

Containers offer a way for you to pull content in from the edges of the browser window. There are 3 variations offered in different sizes. Our home page, for example, uses the .container-small class to keep content small and centered.

Classes available:

    
        $container-sizes: (
            'small'    : 768px,
            'large'    : 1440px,
        );

        .container {
            max-width: 1200px; // default size
            margin-left: auto;
            margin-right: auto;
            padding: 30px 0;

            @each $name, $size in $container-sizes {
                &.container-#{$name} {
                    max-width: $size;
                }
            }

        }
    
Up Next: »