Lost Grid is a grid system for SCSS or Stylus. It is built upon years of studying grid systems and building dozens of grid systems with tons of community feedback.
It makes use of calc()
to create stunning grids based on fractions you define, and falls back to a heavily modified, much cleaner version of Jeet on older browsers.
To support Isotope and similar plugins, it mimics Bootstrap's grid markup.
Lost is better than any grid system out there and it can prove it.
Feature | Lost | Bootstrap | Foundation | Jeet | Neat | Susy |
---|---|---|---|---|---|---|
Responsive | ๐ | ๐ | ๐ | ๐ | ๐ | ๐ |
Small learning curve | ๐ | ๐ | ๐ | ๐ | ๐ | |
Easy-to-implement | ๐ | ๐ | ๐ | |||
Works with Masonry | ๐ | ๐ | ๐ | |||
On-the-fly grids | ๐ | ๐ | ๐ | ๐ | ||
Clean markup | ๐ | ๐ | ๐ | ๐ | ||
Terse markup | ๐ | ๐ | ๐ | |||
Real gutters | ๐ | ๐ | ๐ | ๐ | ||
Stylus support | ๐ | ๐ | ||||
No Additional Ratio Context | ๐ | |||||
Consistent Horizontal Gutters | ๐ | |||||
Lightweight | ๐ | |||||
Old browser fallback | ๐ |
If you notice anything in this table is incorrect or unfair, please don't hesitate to open an issue.
Feel free to follow along by forking a CodePen demo in either SCSS or Stylus.
You can either use the row()
mixin or the helper class. Then just specify with a fraction how large you'd like each element to be.
<div class="row">
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
</div>
figure
column(1/3)
Want to add a ton of items to your row? Use cycle()
to make sure each group of elements is cleared (for uneven height elements).
<div class="row">
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
</div>
figure
column(1/3)
cycle(3)
To give your grid a background color simply wrap your .row
in another element.
<section>
<div class="row">
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
</div>
</section>
section
background: tomato
figure
column(1/3)
You can center that section
with a mixin or the helper class .container
.
section
container()
Nesting is simple if you are using the default calc()
version of the grid system.
<div class="row">
<figure>
<div class="row">
<figure>...</figure>
<figure>...</figure>
</div>
</figure>
<figure>...</figure>
<figure>...</figure>
</div>
figure
column(1/3)
figure
column(1/2)
If you need to support older browsers, you need to pass parent ratios.
figure
column(1/3)
figure
column(1/2 1/3)
You can offset
columns and perform source ordering with move
.
<div class="row">
<figure>...</figure>
<figure>...</figure>
</div>
figure
column(1/3)
&:first-child
offset(1/3) // or move(1/3)
Easily vertically or horizontally center children elements with the align()
mixin.
<section>
<div></div>
</section>
section
align()
width: 600px
height: 400px
div
width: 100px
height: 100px
Use the edit()
mixin at base level to visualize the entire structure of your site, or just specify the areas you're working on.
<section>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
</section>
<section>
<figure>...</figure>
<figure>...</figure>
<figure>...</figure>
</section>
section
&:first-child
edit()
&:last-child
edit(green)
Lost even lets you create your own custom CSS grids in just a few lines of code with the $output
parameter which accepts normal
(compiles all column
styles), init
(only initial styles), and bare
(just the width
).
[class*="col-"]
column($output: init)
for $i in 1..12
.col-{$i}
column($i/12, $output: bare)
[class*="col-"] {
float: left;
margin-left: 15px;
margin-right: 15px;
}
.col-1 {
width: calc(100% * 0.083333333333333 - 30px);
}
.col-2 {
width: calc(100% * 0.166666666666667 - 30px);
}
...
Just set any of these in a settings file after you @import
Lost and before you use a Lost mixin.
$gutter = 30px
$breakpoint = 1000px
$old = false
$rtl = false
Sets a translucent background color to all elements it affects. Helpful while setting up, or debugging, the structure of your site to make sure all items are cleared correctly.
$bg = blue
- A color to be lightened, so make sure you pick a darkish color.
section
edit(red)
Clearfix used to clear floated children columns. http://nicolasgallagher.com/micro-clearfix-hack
.parent
cf()
.child
column(1/2)
Vertically and/or horizontally align nested elements.
$direction = both
- Eithervertical
,v
,horizontal
, orh
. Defaults toboth
.
.parent
align(vertical)
width: 600px
height: 400px
.child
width: 300px
height: 150px
Create a container that is centered in the middle of the page with some padding on the left and right sides of it.
$pad = 0
- Padding on the left and right side of the element.0
by default, but feel free to increase it so containers don't touch the edge of the viewport.$mw = $breakpoint
- Themax-width
of the element.
section
container(45px)
Apply a negative margin on each side of the element. This is required when adding columns and such to negate their outer margins. This mixin automatically applies clearfix as it's assumed floated elements will be nested within it.
$ratios = 1
- If$old
isfalse
, a single fraction used to determine the negative left and right margins of the element. If$old
istrue
, a collection of container ratios (fractions).$gut = $gutter
- The gutter width. This is typically left alone, but if you want a specific row/column combination to have a larger or smaller gutter, you need to specify the same$gut
on both types of elements.
.parent
row()
.children
column(1/2)
Creates a column that is a fraction of the size of it's containing element with a margin on each side of the element. If $old
is set to false
, you don't need to pass any additional ratios (fractions), as the grid system will make use of calc()
. If $old
is set to true
, the grid system will support more browsers, but you will need to pass additional ratios for each nested container. It's highly recommended you use the calc()
syntax to avoid confusion.
$ratios = 1
- If$old
isfalse
, this is a simple fraction of the containing element's width. If$old
istrue
, this is a collection of fractions with the containing element's fraction passed each time it is nested.$gut = $gutter
- The margin on each side of the element used to create a gutter. Typically this is left alone, but if you need to have a specifically large or small gutter, you will need to alter this along with the containing row's gutter so they are the same.$output =normal
- Determines what type of code to output. Accepts normal (all styles for a column), init (the initial styles of any column), or bare (just the width of the column). Useful for creating CSS classes with Lost.
// Clean calc() syntax
.parent
row()
.children
column(1/4)
// Supports old browsers syntax
.parent
row()
.child
column(1/2)
.nested-parent
row(1/2)
.nested-child
column(1/4 1/2)
Margin to the left or right of an elements depending on if the fraction passed is positive or negative.
$ratios = false
- Fraction of the container to be offset.$gut = $gutter
- How large the gutter involved is, typically this won't be adjusted, but if you have set the columns for that row to have different gutters than default, you will need to match that gutter here as well.
.two-elements
column(1/3)
&:nth-child(2)
offset(1/3)
Source ordering. Useful for having an element appear above or below another element on mobile devices, and then to the opposite side on larger devices. For instance, a sidebar and article. You might want the sidebar to appear before the article on mobile, but be to the right of the article on desktop. This is how that is achieved.
$ratios = false
- Fraction of the container to be moved by it'sleft
value.$output = normal
- Determines what styles are compiled. Accepts normal (all styles), init (only initialization styles), or bare (just the left position).
.sidebar
@media (min-width: 800px)
column(1/3)
move(2/3)
.article
@media (min-width: 800px)
column(2/3)
move(-1/3)
Since columns are floated, when they are of unequal height, they will misalign easily. By setting cycle()
you can make sure elements are being cleared on appropriate rows.
$item = -1
- Thenth-child + 1
element to clear on. If you want a row to be 3 elements wide, then you'd pass 3.
.gallery
img
column(1/3)
cycle(3)
A helper class used for centering by default values.
A helper class used to create rows with default values.
var fs = require('fs'),
stylus = require('stylus'),
lost = require('lost-grid');
stylus(fs.readFileSync('./css/style.styl', 'utf8'))
.use(lost())
.render(function(err, css){
if (err) return console.error(err);
console.log(css);
});
@import 'lost'
.element
column(1/3)
calc()
grids are IE9+ with poor support on old Android browsers (calc()
browser support), however the fallback grid system based on Jeet has support all the way back to IE7 with a proper HTML boilerplate.- Flexbox is required for the
align()
mixin, although there is a fall back that is IE9+. (Flexbox browser support)
- Nesting in the fallback grid system creates gaps a few pixels wide on each side of the nested elements. This is due to a rounding issue that affects a lot of fluid grid systems.
If you like this project then I encourage you to check out a few of my other hand-selected projects.
- lost-grid.js - A purely JavaScript version of this grid system. You can create your grid system directly in your markup without ever touching a line of preprocessor code. A pretty cool concept that works great for prototypes.
- Boy - A super lightweight, old-browser-friendly, HTML5 boilerplate with tons of features that make it a great start to any project.
- Typographic - Insanely powerful yet easy-to-use responsive typography. Includes vertical rhythm, font stacks, modular scale, and more.