Exo Layouts

<div class="exo-row">
    <div class="exo-1-cell exo-dark-red-bg exo-white-fg exo-padding exo-border exo-white-border">
        (1-cell-wide) Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.
    </div>
    <div class="exo-2-cell exo-dark-purple-bg exo-white-fg exo-padding exo-border exo-white-border">
        (2-cell-wide) Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
    <div class="exo-5-cell exo-dark-green-bg exo-white-fg exo-padding exo-border exo-white-border">
        (5-cell-wide) Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
</div>
<div class="exo-row">
    <div class="exo-8-cell exo-dark-orange-bg exo-white-fg exo-padding exo-border exo-white-border">
        (8-cell-wide) Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
</div>
        

<div class="exo-row">
    <div class="exo-cell exo-4-cell exo-light-blue-bg exo-padding">
        <div class="exo-row">
            <div class="exo-cell exo-1-cell">
                <label for="cb1">
                    Checkbox 1
                </label>
                <input id="cb1" type="checkbox"
                     class="exo-dark-green-bg">
            </div>
            <div class="exo-cell exo-1-cell">
                <label for="cb3">
                    Checkbox 3
                </label>
                <input id="cb3" type="checkbox"
                     class="exo-dark-green-bg">
            </div>
        </div>
        <div class="exo-row">
            <div class="exo-cell exo-1-cell">
                <label for="cb2">
                    Checkbox 2
                </label>
                <input id="cb2" type="checkbox"
                     class="exo-dark-red-bg">
            </div>
            <div class="exo-cell exo-1-cell">
                <label for="cb4">
                    Checkbox 4
                </label>
                <input id="cb4" type="checkbox"
                     class="exo-dark-red-bg">
            </div>
        </div>
    </div>
    <div class="exo-cell exo-1-cell exo-light-purple-bg exo-padding">
        Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
</div>
        

<div class="exo-row exo-margin">
    <div class="exo-3-cell exo-light-gray-bg exo-rounded">
        exo-rounded
    </div>
    <div class="exo-3-cell exo-light-gray-bg exo-padding">
        exo-padding
    </div>
</div>
<div class="exo-row exo-margin">
    <div class="exo-3-cell exo-dark-gray-bg exo-white-fg exo-border exo-padding">
        exo-border + exo-padding
    </div>
    <div class="exo-3-cell exo-dark-gray-bg exo-white-fg exo-border exo-padding exo-rounded">
        exo-border + exo-padding + exo-rounded
    </div>
</div>
<div class="exo-row exo-margin">
    <div class="exo-3-cell exo-light-grey-bg exo-padding exo-rounded exo-border exo-dark-red-border">
        exo-border + exo-padding + exo-rounded + exo-dark-red-border
    </div>
    <div class="exo-3-cell exo-light-grey-bg exo-large-padding exo-large-rounded exo-large-border exo-dark-red-border">
        exo-large-border + exo-large-padding + exo-large-rounded + exo-dark-red-border
    </div>
</div>
<div class="exo-row exo-margin">
    <div class="exo-3-cell exo-dark-gray-bg exo-white-fg exo-padding exo-rounded">
        exo-rounded + exo-padding
    </div>
    <div class="exo-3-cell exo-dark-gray-bg exo-white-fg exo-small-padding exo-large-rounded">
        exo-large-rounded + exo-small-padding
    </div>
</div>