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 uncompressed, kb gzipped. Check out v. 1.1 changelog and source code.

Share on Twitter

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 responsive adjustments to break all columns on small screens, or use your own media queries.

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.

We can make more complicated arrangements without nested columns:

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

.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

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.