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 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
As the name's suggest the
.container class is for smaller containers with a fixed maximum width of 1280px.
.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 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.
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.
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.
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