Based is a barebones CSS framework for prototype or production.
Based is strictly barebones CSS. All of the included classes are designed to offer the least amount of assumptions about what your site looks like. Based doesn’t normalize or reset any browser styles besides setting
box-sizing: border-box on literally everything.
Based (by default) strives to compliment an 8pt grid system. This ensures some form of vertical rhythm in your designs. You’re welcome to reconfigure this.
Based is fully responsive. The base class names are for the single, naked, mobile breakpoint and scale up forever. You can override the classby appending
@xl suffix. For example,
display-none can be overridden by
display-block@sm at the small breakpoint, which can be overridden by
display-inline@lg at the large breakpoint.
You get it. This is most useful with the grid, as you’ll see.
|Breakpoints||min-width (@ base 16)||min-width (rem)|
You’ll probably notice things look different if you’ve set the font-size on your root element (
<html>) to anything other than
16px. Based is designed to scale from this unit by liberally using
% values for sizing, with pixel fallbacks. Size set on the
<body> is ignored, however.
If this isn’t your thing, you’ll need to build Based from scratch with new configuration.
Based’s defaults can be tweaked in
src/_config. Setting the variable
$based to a value other than 16 will scale everything with it, including breakpoints. You can also adjust some typography and grid settings in here. Based has pretty basic defaults, so you’ll likely want to tweak these things first based on your designs.
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.
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
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.
.col + .span-[n]@[bp]
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.
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
sm, you only need to specify
sm. When in doubt, mobile-first.
Half and half
Three equal columns
Three unequal columns
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).
The Based grid system has four tiers of classes: default (phones),
@md (small desktop), and
@lg (full-width). You can combine these classes to create more flexible layouts.
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
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.
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 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.
You can align everything using the
justify-space-evenly help space out elements by filling the space around or between elements. You must apply this class to the
You can also apply this to columns that wrap into multiple rows using the
By default the
order property is
0, so elements stack as as expected. The
order-12 change the order to
Reverse the order of the columns by adding
row--reverse to the
You can stack columns using the
row--stack class to the
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.
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
mr-auto class to simulate floats.
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
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.
Spacing with margin and padding can be achieved with the
p prefixed classes. By default, spacing is based on the font size of the root (
html) element using
Margin classes start with
.m. The class for 2rem margin on each side is
.m2. You can specify two sides with
y, so 2rem on the top and bottom only is
.my2. Margin also has the unique
-auto suffix for auto-margins. For example, horizontally centering block elements can easily be achieved with the
Padding works nearly the same, but are prefixed with
.p. for example
.pb3 adds 3rem padding to the bottom of the element. The
-auto suffix does not work here, for obvious reasons.
The spacing classes also correspond with the grid breakpoints. The base classes are mobile-first. For example, if you want to use 1rem top and bottom padding on mobile but 4rem padding at desktop breakpoints, you would apply
class="py1 py4@lg" to the element.
These are self-explanatory. Each one is responsive. For example, you can override
Positioning classes are responsive, so
float-right can be overridden by
||Absolutely positions element|
||Relatively positions element|
||Fixes element to viewport|
||Floats element left|
||Floats element right|
.bg-img helper class sets
background-repeat: no-repeat, and
background-position: center. The
contain modifiers tell it what it should do with the image while retaining its aspect ratio.
||Centers background image, does not repeat|
||Makes image cover the entire element|
||Constrains the image size to elements height or width|
Text classes are responsive, so
text-left can be overriden by
||This class will span your
||The legendary clearfix. You know what it does. I can’t believe people still use this.|
||This class hides the element completely from the naked eye, but leaves it available for screen readers and other assistive devices. Useful for labels and such.|
||If you’ve got a block with its guts spilling out, this class will apply