CSS Components and Styleguide

Easy Columns

Don't wana do fractions everytime you need some columns? Easy column classes only have screen sizes; grid__col--$screenSize.

Throw in up to 12 and the grid will do the work for you.

Example

grid__col--xs

Markup: grid/easy-columns.html

                    <div class="grid">
    <div class="grid__row">
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 33