A spread is basically a container that utilizes flexbox to flow horizontally. It can be used to quickly create everything from baseline layout structures to top-level components.

Generic Spreads #

A generic spread fills its container’s width; if child elements are present, they will auto-size to fill the spread.

Basic Example # 

    <section class="spread purple"> 
        <div class="blue"> one </div>
        <div class="red"> two </div>
        <div class="green"> three </div>
    </section>
one
two
three

With Inner Spacing #

Spreads utilize cascades to push standardized styles to child elements. This makes it quick and easy to whip up a series of buttons or cards.

    <section class="spread purple c-sp-1"> 
        <div class="white"> one </div>
        <div class="white"> two </div>
        <div class="white"> three </div>
    </section>
one
two
three

Directional Spreads #

Directional spreads have child elements with defined sizes that do not equal the full size of the parent spread.

Spread-Left # 

<section class="spread-left purple"> 
    <section class="is-one-third">
            <div class="white m-1 p-1"> one </div>
    </section>
    <section class="is-one-third">
            <div class="white m-1 p-1"> two </div>
    </section>
</section>
one
two

Spread-Right # 

<section class="spread-right purple"> 
    <section class="is-one-third">
            <div class="white m-1 p-1"> one </div>
    </section>
    <section class="is-one-third">
            <div class="white m-1 p-1"> two </div>
    </section>
</section>
one
two

Spread-Center # 

<section class="spread-center purple"> 
    <section class="is-one-third">
            <div class="white m-1 p-1"> one </div>
    </section>
    <section class="is-one-third">
            <div class="white m-1 p-1"> two </div>
    </section>
</section>
one
two

Spread-Around # 

<section class="spread-around purple"> 
    <section class="is-one-third">
            <div class="white m-1 p-1"> one </div>
    </section>
    <section class="is-one-third">
            <div class="white m-1 p-1"> two </div>
    </section>
</section>
one
two

Spread-Between # 

<div class="spread-between purple c-fit c-sp-1 c-white c-rounded-1 uppercase extra-bold">
    <a href=""> 👈  </a>
    <a href=""> 👉 </a>
</div>
👈 👉

Sizes #

Sizes are only used for top-level child elements in a directional spread.

item is-full
item is-four-fifths
auto
item is-three-fourths
auto
item is-two-thirds
auto
item is-three-fifths
auto
item is-half
auto
item is-two-fifths
auto
item is-one-third
auto
item is-one-fourth
auto
item is-one-fifth
auto

Nested Spreads #

Notice in each example that you control set the mobile size via is-fullfsize-mobile.

CTA Example # 

<section class="spread purple ">
    <div class="is-fullsize-mobile"> 
        <div class="brighten-1 c-p-2">
            <h1> petals on a wet,<br> black bough.</h1>
            <h2 class="subtitle-2"> -Ezra Pound</h2>
            <section class="spread-left c-fit c-m-1 c-p-2 c-rounded-1">
                    <button class="button text-s outlined "> Get Started </button>
                    <button class="button text-s darken-2"> Live Demo</button>
            </section>
        </div>
    </div>
    <div class="is-fullsize-mobile darken-2"></div>
</section>

petals on a wet,
black bough.

-Ezra Pound

Blade Example # 

<section class="spread c-pinned-center purple p-4">
    <div class="text-center is-fullsize-mobile">
        <h1 > Mr. Meowgi</h1>
        <h2 class="subtitle-2 text-m"> is a russian blue cat.</h2>
    </div>
    <div class="spread rounded-2 display-pattern py-2 c-m-3 c-p-2 c-fullsize-mobile">
        <div class="text-center white"> 
            <p>Meow.</p>
        </div> 
        <div class="text-right white"> 
            <p> Wow.</p>
        </div> 
        <div class=" text-left white"> 
            <p> Wow.</p>
        </div> 
    </div>
</section>

Mr. Meowgi

is a russian blue cat.

Meow.

Wow.

Wow.

Stacks 👉