An Introduction to Frow CSS

Frow is an HTML and CSS framework for creating quick, responsive, mobile-first projects on the web.

What Makes Frow Special?

Frow (flex row) utilizes and builds upon the power of CSS's display:flex. While Frow does provide a responsive 'grid system' that is built upon display:flex similar to other grid systems, the philosophy of Frow is that you can use it on anything and everything outside of the standard grid as well. A .frow class should be used on every group of elements on a page, as it allows for quick display:flex manipulations without having to create custom classes for each container. Using Frow minimizes the custom CSS needed while giving infinite ways to layout items.

Frow is open source and available on GitHub!

48
Posts
151
Followers
623
Likes

Centered Title

Vertical and horizonal centering

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Frow can do anything!

By providing every display:flex option available via classes and pre-made popular combinations, you can quickly build elements of various shapes and designs, with little to no writing of CSS.

Examples:

The Grid System

Frow's grid system brings the standard features you expect, but built with display:flex. This means no floats, and no messing with clearfix hacks!

Because the grid is built with Frow, the grid is extremely powerful! Use Frow's Shortcuts to do things such as make overflows centered or left-aligned, or aligning column's vertically.

.col-md-1-1

.col-md-1-2

.col-md-1-2

.col-md-1-3

.col-md-1-3

.col-md-1-3

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-5

.col-md-1-5

.col-md-1-5

.col-md-1-5

.col-md-1-5

Getting Started

Frow is from Cody Sherman via Beg.in