Flexbox Grid

This page will detail out the flexbox grid that is built into Basket and some of the features it offers.

Please keep in mind, the framework is constantly changing and evolving so keep an eye on this documentation to stay up to day!

Containers

Containers increase and decrease in size as the size of the browser window changes responsively.

There are two major container's used in Basket, the restricted width .container and the full width .container-fluid. As the name's suggest the .container class is for smaller containers with a fixed maximum width of 1280px. The class .container-fluid is a fluid width and expands to 100% of the viewport's width; this was added in addition to .container to allow developers more control over the entire layout if needed.

Columns

Columns use a 12 grid system to allow a simple transition from many other frameworks. For additional flexability (no pun intended), basket can be easily converted into a 9 or even 16 grid system using the source. On the other hand, here is a little preview of the 12 grid system:

Keep in mind, by default once the mobile breakpoint is hit the column's automatically move to the next row but maintain their respective sizes. This enables a better set of controls and keeps offset's in place as well. Here is an example without a column expand and the source for it.

.col-10
.col-2
.col-9
.col-3
.col-8
.col-4
.col-7
.col-5
.col-6
.col-6
.col
.col-auto

Expanded Columns

In the event that you would like column's to expand to full width you must use the .col-expand class along with the column classes. Here is an example with column's expanded on mobile; as this is mobile only, desktop's will not see the difference unless you shrink your window.

Keep in mind, each .col-expand only applies for it's respective column allowing even more fine grained control. Here is an example with a mixture of columns, and as always, here is the source.

.col-9
.col-3
.col-8
.col-4
.col-7
.col-5

Non Padded Columns

All of the columns come with a small padding (1 em). To accomodate for those who may want even more control of their grids, the .col-no-padding class allows for a simple way to expand columns to their full width with no padding. Here is an example with the source.

This doesn't look the prettiest, unless you really know what you are doing, so unless you really need it, there is no reason for you to use this class.

.col-9
.col-3
.col-8
.col-4
.col-7
.col-5

Column Offset

As customary to most css frameworks, there are offsets as well! Offsets can be set using a .col-offset-* class. The * is any number from 1 - 12.

Please keep in mind, column offsets do NOT play well with .col-expand as it would defeat the purpose of the offset. Here is an example and of course the sample

.
.col-2
.col-4 .col-offset-4
.col-2
.col-4 .col-offset-6
.col-4 .col-offset-6
.col-2
.col-4 .col-offset-3
.col-2 .col-offset-2
.col-5 .col-offset-1
.col-2