Based.css

Grid

Based comes with an extensive flexbox-based grid system. There are 8 columns by default, but if you prefer 12, 16 or whatever, you can change the $grid-columns variable in Based’s config file.

Wrapper

.wrap The wrap class wraps all elements at a maximum width, determined by you. It is horizontally centered. It’s not required, but it does keep your grid nice and tidy looking on larger screens. The maximum width of the wrapper out of the box is 64rem (or 1024px).

Rows

.row or .flex The row class is required. The row class wraps all of you columns. It has a few properties that enable the flexbox features, and has a few extensions that allow you to change the behavior of you columns. It has a negative margin to make sure that column padding is retained. Sometimes, however, this negative margin is not desirable. That’s why there’s a secret flex class that enables all the flexbox stuff. Use it wisely.

Columns

.col + .span-[n]@[bp] The col class defines a block element as a column. Columns are the meat of the grid. There’s no restriction on the type of content you can put inside a column. They behave how you expect them to, and there’s a grid for each breakpoint. Simply specify the breakpoint and the number of columns you want to span. For example span-6@lg will span across six columns at the large breakpoint.

Responsive

Column widths start at mobile and scale to desktop. For example, a div with the classes span-8 span-6@md the span-6@md breakpoint will override the span-8 breakpoint on medium-sized screens. Each tier of classes scales up from mobile tiers, meaning if you plan on setting the same widths for lg and sm, you only need to specify sm. When in doubt, mobile-first.

Basic Examples

Naked

Two column

Half and half

Three equal columns

Three unequal columns

Nesting

Nesting is easy—just put a row of columns within an existing column. On mobile these columns and their nested columns will stack (layout is exagerated in these examples, it won’t stack so tall).

Mixing breakpoints

The Based grid system has four tiers of classes: default (phones), @sm (tablets), @md (small desktop), and @lg (full-width). You can combine these classes to create more flexible layouts.

Offset

Offset n columns left. This also offsets from any preceding siblings, adjacent siblings will retain their flow.

Push / Pull

By default, all coulmns read left to right in the order they appear in the DOM. However, on some breakpoints you may want an element on the the right and others on the left. There are ways for flexbox to handle this (see Order), but push and pull can achieve the same result. These work a bit like Offset, but don’t apply margins so you can overlap colums.

Be advised, using these class can have adverse effects on layout, and weird stuff can happen if you’re not careful.

Aligning Columns

Adding these classes to the row allows flexbox to work its magic. align-[whatever] refers to the vertical alignment inside the container. justify-[whatever] controls the horizontal alignment.

They can be mixed and matched in lieu of the push/pull classes to align columns.

align-end justify-start

align-start justify-center

align-center justify-end

Adding align-start, align-center, and align-end to a col element applies the alignment individually for more advanced layouts. Columns appear in the same order as the DOM. These override the alignment class on the parent, so be careful.

Aligning Rows

You can align everything using the content-[whatever] classes.

content-start

content-center

content-end

Space

justify-space-between, justify-space-around, and justify-space-evenly help space out elements by filling the space around or between elements. You must apply this class to the row.

justify space-between

justify-space-around

justify-space-evenly

You can also apply this to columns that wrap into multiple rows using the content-space-between and content-space-around classes.

content-space-between

content-space-around

Order

By default the order property is 0, so elements stack as as expected. The order-0 through order-12 change the order to 0 through 12, respectively.

Reverse Columns

Reverse the order of the columns by adding row--reverse to the row.

Stack Columns

You can stack columns using the row--stack class to the row.

Tricks

Based’s grid has a few neat tricks thanks to Flexbox. You can achieve dynamic layouts without the need for some of the more advanced column alignment classes detailed above.

Auto X-Margins

The mx-auto class horizontally centers whatever column you have in there.

Very useful, and adding more columns will automatically calculate offsets between columns. This can have unintended consequences, so use it wisely.

Another neat trick is to use the ml-auto and mr-auto class to simulate floats.

Auto-Y Margins

By giving the row container some form of height, you can use the my-auto classes to vertically center.

You can create some very flexible layouts by combining this with the x-margin classes.

The Holy Grail

The m-auto class applies an auto margin around the entire column. On a row with a height applied to it, you can achieve the holy grail of CSS layouts, without and absolute positioning or transform tricks.