roolith css framework

Grid layout

Grid

It's 12 column fluid grid fits into any container. Default grid is float version, but you can use css grid version. See sass reference for more details. Default gutter width is 20px for all breakpoint.

.small-2 .large-4

.small-4 .large-4

.small-6 .large-4

.medium-4 .large-3

.medium-4 .large-6

.medium-4 .large-3

.large-6

<div class="row">
    <div class="small-2 large-4 columns"></div>
    <div class="small-4 large-4 columns"></div>
    <div class="small-6 large-4 columns"></div>
</div>
<div class="row">
    <div class="medium-4 large-3 columns"></div>
    <div class="medium-4 large-6 columns"></div>
    <div class="medium-4 large-3 columns"></div>
</div>
<div class="row">
    <div class="large-6 columns"></div>
    <div class="large-6 columns"></div>
</div>

For fixed layout use .container class as wrapper

<div class="container">
    <div class="row">
        <div class="columns large-6"></div>
        <div class="columns large-6"></div>
    </div>
</div>

Single column

.column

.large-12

<div class="column">Your content here</div>

<div class="row">
    <div class="columns large-12">Your HTML here</div>
</div>

Nested grid

.large-4

.large-8

.large-6

<div class="row">
    <div class="columns large-4"></div>
    <div class="columns large-8">
        <div class="row">
            <div class="columns large-6"></div>
            <div class="columns large-6"></div>
        </div>
    </div>
</div>

Incomplete grid layout

.large-8

.large-6

<div class="row">
    <div class="columns large-5"></div>
    <div class="columns large-6 newrow"></div>
    <div class="columns large-6"></div>
</div>

Offset

.large-offset-2 .large-4

.large-6

SASS

Reference from _grid.scss

$global-width: rem(1200);
$grid-gutter: (
    small: rem(20),
    medium: rem(20),
    large: rem(20)
);
$grid-column-count: 12;

If you want to use CSS grid -

$grid-layout: css-grid; // Call this before import roolith css

 // Full width
<div class="grid-column">
full width
</div>

// Grid example with nested
<div class="grid">
    <div class="cell sm-4 md-6 lg-3"></div>
    <div class="cell sm-4 md-6 lg-3"></div>
    <div class="cell sm-4 md-6 lg-3"></div>
    <div class="cell sm-12 md-6 lg-3">
        <div class="grid">
            <div class="cell lg-6"></div>
            <div class="cell lg-6"></div>
        </div>
    </div>
</div>