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.
px
definitionsDownload coreDownload breakpoints
Estimated size kb minified and gzipped. Check out v. 1.2 changelog and GitHub.
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
.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
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
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;
}
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
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.
Psst! You can automatically use these as mixins in LESS.
.clear
.clear-after
.hidden
display: none;
).dry
.border-box
, .content-box
.block
, .inline-block
, .inline
.absolute
, .fixed
, .relative
, .static
.keep-left
, .keep-right
, .keep-center
margin: auto
to keep it centeredYou can mark elements .hidden-under-small
, .hidden-over-medium
and so on with the progressive enhancements, according to your breakpoint settings.
Use a combination of em
and %
definitions to give your elements natural breathing room.
.reset
.squeeze
.push
Directions work as modifiers:
.reset-top, .reset-bottom
.squeeze-top
.push-top
.buffer
.no-buffer
Directions work as modifiers:
.buffer-left.buffer-right
.no-buffer-top
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
Unordered list: ul
Ordered list: ol
Definition list: dl
ul
/ol.plain
dl.plain
ul
/ol
/dl.inline
keeps the inline context. Whitespace works accordingly.
ul.inline.center
dl.inline.right
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.
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 |
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 |
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.
.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.