Based.css

Based is a barebones CSS framework for prototype or production.


Philosophy

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.

Mobile First

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 @sm, @md, @lg, and @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)
@sm 544px 32rem
@md 768px 48rem
@lg 1024px 64rem
@xl 1280px 80rem

Root Sizing

You’ll probably notice things look different if you’ve set the font-size on your root element (:root or <html>) to anything other than 16px. Based is designed to scale from this unit by liberally using rem and % 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.

Customization

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.

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).

(parent)
(child)
(child)
(parent, no child)

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.

(1st in DOM)
(2nd in DOM)

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.

(first in DOM)
(last in DOM)

Reverse Columns

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

[1]
[2]
[3]
[4]

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.

Spacing


Spacing with margin and padding can be achieved with the m and p prefixed classes. By default, spacing is based on the font size of the root (html) element using rem units.

Margin classes start with .m. The class for 2rem margin on each side is .m2. You can specify two sides with x or 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 mx-auto class.

Class Prop(s)
.m margin
.my margin-top, margin-bottom
.mx margin-left, margin-right
.mt margin-top
.mb margin-bottom
.ml margin-left,
.mr margin-right

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.

Class Prop(s)
.p padding
.py padding-top, padding-bottom
.px padding-left, padding-right
.pt padding-top
.pb padding-bottom
.pl padding-left,
.pr padding-right

Responsive Spacing

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.

Display


These are self-explanatory. Each one is responsive. For example, you can override display-none with display-block@lg.

Class
.display-none
.display-block
.display-inline
.display-inline-block
.display-table
.display-flex

Position


Positioning classes are responsive, so float-right can be overridden by float-left@lg.

Class Effect
.position-absolute Absolutely positions element
.position-relative Relatively positions element
.position-fixed Fixes element to viewport
.position-cover Applies 0 to top, left, bottom, and right properties
.float-left Floats element left
.float-right Floats element right

Lists


Class Effect
.list-reset Normalizes ul and ol element styles
.list-inline Makes child li elements inline-block

Background Images


The .bg-img helper class sets background-size: 100%, background-repeat: no-repeat, and background-position: center. The cover and contain modifiers tell it what it should do with the image while retaining its aspect ratio.

Class Effect
.bg-img Centers background image, does not repeat
.bg-img--cover Makes image cover the entire element
.bg-img--contain Constrains the image size to elements height or width

Text


Text classes are responsive, so text-left can be overriden by text-right@lg.

Class Prop
.text-left text-align: left
.text-right text-align: right
.text-center text-align: center
.text-nowrap white-space: nowrap
.text-bold font-weight: bold
.text-normal font-weight: normal
.text-italic font-style: italic
.text-caps text-transform: capitalize
.text-upper text-transform: uppercase
.text-lower text-transform: lowercase

Helpers


Class Effect
.media This class will span your img, video, etc. to 100% of the container.
.clearfix The legendary clearfix. You know what it does. I can’t believe people still use this.
.hide-visually 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.
.hide-overflow If you’ve got a block with its guts spilling out, this class will apply overflow: hidden and start a new block formatting context.