Layers CSS

Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid.

Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit.

  • Normalizations & sensible defaults
  • Fluid grid + progressively enhanced columns
  • Preserves native form styles by default
  • No px definitions
  • No colors, no borders, no rounded corners
  • No dependencies

Download & customize

Download coreDownload breakpoints

Estimated size kb minified and gzipped. Check out v. 1.2 changelog and GitHub.

Reference

Colors and visuals below are created by custom styles, not Layers CSS.

Fluid grid

Columns are stacked from left to right, no wrappers are required. Mark the .last column of the row, and use .clear after rows (or .clear-after the parent) if needed. Columns within columns work just fine. Include your customized breakpoints to progressively enhance the column layouts to fit each screen size.

Note! Browsers have to do rounding with fractional column/gutter widths, so you can't always control fluid grid per pixel.

Use fractional keywords as class names to control the width of each column, like this:

.column.half

.column.half.last

.column.third

.column.third

.column.third.last

.column.fourth

.column.fourth

.column.fourth

.column.fourth.last

You can also use traditional n/12 keywords to control widths:

.column.twelve

.column.six

.column.three

.column.three

.one

.column.two

.column.four

.column.five.last

You can .push- columns to shift them further from their default position:

.column.three.push-one

.column.three.push-two.last

You can also start stacking from the .right:

.column.right.five

.column.right.three.push-one

No gutters

.reset columns to remove gutter space:

.column.half.reset

.column.three.reset

.column.three.reset

.column.three.reset.push-one

.column.four.reset

.column.three.reset

column.half.push-fourth.reset

Fixed + fluid columns

One part gets a fixed width, the other side fills the rest. Very handy for combining images with a fluid grid. Multiple combinations can be nested. The fluid column always comes first in markup.

You can adjust the size of the fixed-width in steps with media queries, or break the combination completely.

.column.fluid > .column-content

.column.fixed

You can start stacking this from the .right as well:

.column.fluid.right > .column-content

.column.fixed.right

Customize

Use this CSS to adjust the width of the fixed column (default is 10em):

/*Fixed column width*/
.column.fixed {
	width: 10em;
}
.column.fluid > .column-content {
	margin-right: 10em;
}
.column.fluid.right > .column-content {
	margin-left: 10em;
}

Progressive enhancement

The columns we used in the previous samples never break. We can extend them to present different layouts in viewports larger than specific breakpoints (which you can customize in the download section).

Here, users see 2 columns by default, 3 + 1 on .small- screens and 4 on .large- screens:

.column.half.small-third.medium-fourth

.column.half.last.small-third.medium-fourth

.column.half.small-third.small-last.medium-fourth

.column.half.last.small-full.medium-fourth.medium-last

Remember to mark the .last- column for each screen size when you're not .resetting gutters. You can also mark the .first- column of each row if it changes between screen sizes.

Note! Don't skip levels: if you use .small- and .large-, also include .medium- so the columns work as expected.

We can make quite complicated arrangements without nested columns or parents:

.column.small-third.medium-full.large-half

.column.small-twothirds.small-last.medium-half.large-fourth

.column.medium-half.medium-last.large-fourth.large-last

You can also .-break columns (but this can't be undone on further levels):

.column.reset.fourth.medium-third.large-break

.column.reset.fourth.medium-twothirds.medium-last.large-break

.column.reset.half.last.medium-break

Rows

.rows are also available. .row-content is aligned to the center of its parent, and controlling its max-width results in a layout that scales down automatically but doesn't get too wide on large screens.

The default max-width of .row-content is 70em, but here it's set to 40em for clarity:

.row-content > .column.half

.row-content > .column.half.last

.buffer gives the content some breathing room:

.row-content.buffer > .column.half

.row-content.buffer > .column.half.last

By default, .buffer has less padding on the top (as seen above). This works well for natural article content, but you can use .even buffers, too:

How

is it

going?

You can naturally use any element (like section for example) for the rows. Use rows to build both the overall frame of your site and smaller pieces of page content.

Everyday tools

Psst! You can automatically use these as mixins in LESS.

.clear
Clear floating elements from above
.clear-after
Clear floating child elements after closing parent
.hidden
Hide stuff (display: none;)
.dry
Move inline content away from view
.border-box, .content-box
Switch box-sizing mode in all browsers
.block, .inline-block, .inline
Change display property
.absolute, .fixed, .relative, .static
Change positioning
.keep-left, .keep-right, .keep-center
Float an element to left or right (removing clearing) or use margin: auto to keep it centered

You can mark elements .hidden-under-small , .hidden-over-medium and so on with the progressive enhancements, according to your breakpoint settings.

Margins & spacing

Use a combination of em and % definitions to give your elements natural breathing room.

.reset
Reset margins to 0
.squeeze
Use smaller margins (half of the default)
.push
Add default margins

Directions work as modifiers:

  • .reset-top, .reset-bottom
  • .squeeze-top
  • .push-top
.buffer
Add comfortable paddings (like in this box)
.no-buffer
Remove any paddings

Directions work as modifiers:

  • .buffer-left.buffer-right
  • .no-buffer-top

Limited column widths

Sometimes you need containers that are not too wide even when there's screen space. limit- classes come with your custom-set breakpoints and do just this. Multiple limit classes can be used, and they will work progressively.

They can be applied to .row-content elements or used together with .keep-center to keep the container centered on the screen.

.limit-small.keep-center

.limit-small.limit-medium.limit-large.keep-center

Lists

Unordered list: ul

  • One
  • Two
  • Three
    • A
    • B
    • C
  • Four

Ordered list: ol

  1. One
  2. Two
  3. Three
    1. A
    2. B
    3. C
  4. Four

Definition list: dl

Definiendum
Definiens
Definiens
Definiens
Definiendum
Definiendum
Definiens

ul/ol.plain

  • One
  • Two
  • Three
    • A
    • B
    • C
  • Four

dl.plain

Definiendum
Definiens
Definiens
Definiens
Definiendum
Definiendum
Definiens

ul/ol/dl.inline keeps the inline context. Whitespace works accordingly.

  • One
  • Two
  • Three
  • Four

ul.inline.center

  1. One
  2. Two
  3. Three
  4. Four

dl.inline.right

One
Two
Three
Four

You can .collapse lists to make them stack horizontally with block list items. .right works, too. Very handy for menus:

Grey backgrounds added for clarity.

Tables

Default table has collapsed borders, 100 % width and common-sense paddings for cells.

Grey backgrounds and borders added for clarity.

Title Title Title Title
Cell Cell Cell Cell
Cell Cell Cell Cell

table.squeeze has smaller cell paddings.

Title Title Title Title
Cell Cell Cell Cell

table.plain collapses everything.

Title Title Title Title
Cell Cell Cell Cell

Cell alignments

Use direction modifiers for th and td to change cell alignments. Text alignment defaults to left, vertical aligmnent to top.

default .center .right
.middle (or .vertical-center) .middle.center .middle.right
.bottom .bottom.center .bottom.right

Forms

Native input element styles are left alone. Input fields use the same, default box-sizing model as all other elements in all browsers so they're easy to customize.

Customize

.plain elements are robbed of their OS-specific default styles, so they're a good jumping-off point to your own visuals.

Remember, .buffer gives elements breathing room.

iframes have 100 % width and lack borders by default, by the way.