The Basics

Let's Make Some Frows

In the simplest of terms, a .frow class is just converting the element it is applied on into display: flex.

Frow adds a library of pre-made classes to then style your each of your flexbox rows quickly. Making a div or other element into a Frow (flexbox row) is done by simply adding the .frow class to the element.

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 = A Flexbox 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.