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:
Frow's library includes a lot of other classes to make it easy and quick to modify the elements within the .frow element.
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.
Notice that each .frow takes up the whole horizontal row, so the next one will be underneath the last.
You can of course also use a Frow inside of another Frow.
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:
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.
It can seem redundant, but it's worth getting into the habit to avoid the headache of accidentally adding a conflicting class.