Layers CSS

Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid. Layers CSS is aimed for practical use and comes with zero bullshit.

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

Maintained on Bitbucket by @Eiskis from eiskis.net.

Download 1.0.6 layers.min.css, 15 kb

Responsive adjustments
Break all columns, adjust font size on small screens.
Extras
Default color schemes, typography etc.
Development version
Changelog
Source code

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

.column.ten.center

.column.half.center

...or .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.reset.center

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;
}

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

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.