The Basics

Let's Make Some Frows

Frow adds a library of pre-made classes to style a page quickly. Making a div or other element into a Frow is done by simply adding the .frow class to the element.

Every element with a .frow class is given the CSS property display:flex and becomes a horizontal row. Here is a basic .frow containing some squares:

<div class="frow"> // This div is a Frow row, containing three divs
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
</div>

Frow's library includes a lot of other classes to make it easy and quick to modify the elements within the .frow element.

<div class="frow justify-start"> // A single new class changes the behavior
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
</div>

You'll learn more about all of the available options later on, from the Frow Shortcuts page. They are all based on the various display:flex rules you can apply to elements. If you would like to learn more about the display:flex property for a better under-the-hood understanding, CSS-Tricks has a great resource.

A Frow = Flex Row. Rooooow. Row. ⬅ It's a Row.

Notice that each .frow takes up the whole horizontal row, so the next one will be underneath the last.

<div class="frow"> // The first Frow
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
</div>
<div class="frow justify-start"> // The second Frow
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
</div>

You can of course also use a Frow inside of another Frow.

<div class="frow">
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square">
        <div class="frow">
            <div class="smaller-grid-example-square"></div>
            <div class="smaller-grid-example-square"></div>
            <div class="smaller-grid-example-square"></div>
        </div>
    </div>
</div>

A Recommended Best Practice

Just to get this quick tip out of the way now, let's say you wanted to change what one of your Frows looks like. You want it to have a red background color, so you create a .red-background class in your CSS.

The obvious thing to do would be to add your class to the .frow div:

// DON'T DO THIS
<div class="frow red-background">
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
    <div class="grid-example-square"></div>
</div>

While seemingly fine, don't do that.

Frow divs should ONLY get classes made for Frow added to them. Changing the background color might not break anything, but in the future other classes you add could conflict with Frow. To add your own classes and rules, just wrap the .frow within a new div.

// CORRECT
<div class="red-background">
    <div class="frow">
        <div class="grid-example-square"></div>
        <div class="grid-example-square"></div>
        <div class="grid-example-square"></div>
    </div>
</div>

It can seem redundant, but it's worth getting into the habit to avoid the headache of accidentally adding a conflicting class.

Grid System

Frow is from Cody Sherman via Beg.in