agtlucas / lost Goto Github PK

Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.

It is built upon years of studying and building grid systems with tons of community feedback.

It makes use of calc() to create stunning grids based on fractions you define without having to pass a ton of options.

I can tell you with no ego, this is my finest grid.

• Installation
• Comparison Table
• Getting Started
  • Basic Columns
  • Centering Elements
  • Controlling Cycle
  • Nesting
  • Offseting Elements
  • Alignment
  • Edit Mode
  • Vertical Grids
  • Waffle Grids
  • Flexbox Grids
  • Masonry Support
• Global Grid Settings
• Property Options
  • lost-utility
  • lost-flex-container
  • lost-center
  • lost-align
  • lost-column
  • lost-row
  • lost-waffle
  • lost-offset
  • lost-move
  • lost-masonry-wrap
  • lost-masonry-column
• Example Code
• Browser Support
• Other Projects
• Thanks

Lost is better than any grid system out there and can prove it.

Feature	Lost	Bootstrap	Foundation	Jeet	Neat	Susy
Responsive
Small learning curve
Easy-to-implement
Works with Masonry
Terse markup
On-the-fly grids
Clean markup
Real gutters
Sass support
Stylus support
LESS support
CSS support
No Additional Ratio Context
Consistent Gutters on All Sides
Lightweight
Vertical Grids
Waffle Grids
Fixed Gutters
Flexbox Grids

^{If you notice anything in this table is incorrect or unfair, please don't hesitate to open an issue.}

⬆ back to top

Lost Grid rules look like this:

div {
  lost-column: 1/3;
}

And the processed CSS looks like this:

div {
  width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
}
div:nth-child(n) {
  float: left;
  margin-right: 30px;
  clear: none;
}
div:last-child {
  margin-right: 0;
}
div:nth-child(3n) {
  float: right;
  margin-right: 0;
}
div:nth-child(3n + 1) {
  clear: left;
}

/*# sourceMappingURL=style.css.map */

⬆ back to top

To create a basic horizontal grid, just insert some elements into any containing element like so and pass a fraction to the lost-column property.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

section {
  lost-utility: clearfix;
}

div {
  lost-column: 1/2;
}

lost-utility: clearfix; is just a clearfix function since Lost Grid elements are floated. It's a good idea to give this to the element wrapping your grid elements every time you have nested floated elements.

⬆ back to top

You can also make use of the lost-center property to assign a max-width and margin: auto to an element and center it on the page. clearfix will automatically be applied in this case.

section {
  lost-center: 980px;
}

div {
  lost-column: 1/2;
}

⬆ back to top

Every element gets a float: left and margin-right: gutter applied to it except the last element in the row and the last item in a container. Lost will automatically detect the last item in a row (based on the denominator you passed) and apply a margin-right: 0 to it by default.

To override this behavior and tell Lost to apply margin-right: 0 to a specific iteration, simply pass a cycle param to your lost-column property. It's the second argument.

div {
  lost-column: 2/4 2;
}

This will tell Lost to create div:nth-child(2n) { margin-right: 0; } instead of div:nth-child(4n) { margin-right: 0; } (like it would by default and break).

Using this knowledge we can create really flexible layouts with varying widths like so (this will work for a single row nicely).

<section class="row">
  <div class="quarter">1</div>
  <div class="half">2</div>
  <div class="quarter">3</div>
</section>

.row {
  lost-utility: clearfix;
}

.quarter {
  lost-column: 1/4 0;
}

.half {
  lost-column: 1/2 0;
}

There is a global setting to disable/enable cycle by default. Just put @lost cycle auto; or @lost cycle none; at the top of your stylesheet.

It's suggested that you learn the Lost shorthand syntax, but you can specify cycle (and other params) the verbose way with lost-column-cycle.

div {
  lost-column: 2/6;
  lost-column-cycle: 3;
}

The concept of cycle is extremely important to Lost and what sets good Lost developers apart from great Lost developers. Really try to grok this!

⬆ back to top

Nesting is simple and requires no extra context unlike other preprocessor grid systems.

<section>
  <div>a</div>
  <div>
    <div>b</div>
    <div>
      <div>c</div>
      <div>c</div>
    </div>
  </div>
</section>

div {
  lost-column: 1/2;
}

⬆ back to top

You can offset columns easily. To offset in the other direction, pass a negative fraction.

<section>
  <div>1</div>
  <div>2</div>
</section>

div {
  lost-column: 1/3;
}

div:first-child {
  lost-offset: 1/3;
}

⬆ back to top

Easily align children elements with the lost-align property. It accepts options like top-left, right, center, etc..

<section>
  <div>Aligned</div>
</section>

section {
  lost-align: center;
  width: 600px;
  height: 400px;
}

div {
  width: 100px;
  height: 100px;
}

⬆ back to top

Use lost-utility: edit; on body to visualize the entire structure of your site, or just specify the areas you're working on.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

<section>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

section:nth-of-type(1) {
  lost-utility: edit;
}

section:nth-of-type(2) {
  lost-utility: edit;
}

⬆ back to top

Once you've mastered the basic horizontal grid system (it shouldn't take long), you can start to make vertical grids that have the same vertical gutters as your horizontal grids. Just use the lost-row property in place of lost-column. These rows will stretch to fill their container's height, so if you'd like to see them take up the full height of the page, set height: 100% on your container.

No other grid system supports vertical grids.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

section {
  height: 100%;
}

div {
  lost-row: 1/3;
}

⬆ back to top

You can even make a horizontal/vertical grid (a waffle grid) which resembles a tic-tac-toe board.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</section>

section {
  height: 100%;
}

div {
  lost-waffle: 1/3;
}

⬆ back to top

You can easily change your grids to support Flexbox by altering the global at-rule variable @lost flexbox to flex. Once you do this, all grids throughout your site will use flexed elements. To make sure they are displayed as flexed elements, you need to wrap them in lost-flex-container or lost-center (which includes lost-flex-container by default).

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

@lost flexbox flex;

section {
  lost-center: 980px;
}

div {
  lost-column: 1/3;
}

Flexbox offers slightly cleaner output and avoids the use of clearfix and other issues with float-based layouts. It also allows you to have elements of even height rather easily, and much more. The downside is, Flexbox doesn't work in IE9 or below, so keep that in mind if you have a client that needs that kind of support.

Also note that waffle grids work well for the most part, but are somewhat finicky in fringe situations where Flexbox tries to act smarter than it is. All properties provide a way to disable or enable Flexbox per element with the flex parameter so if you'd like to disable it for a specific case you could do this:

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

@lost flexbox flex;

section {
  lost-center: 980px no-flex;
}

div {
  lost-waffle: 1/3 no-flex;
}

⬆ back to top

Lost supports masonry plugins like Isotope. To accomplish this we need to change how the margins work. Instead of applying a margin-right to everything, we need to apply it to both sides. We've made a couple special properties to help with this: lost-masonry-column which creates a margin on the left and right of each element it's applied to, and lost-masonry-wrap which wraps your columns and applies a negative margin to the left and right to them to help line them up with containing elements.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

section {
  lost-masonry-wrap: no-flex;
}

div {
  lost-masonry-column: 1/3;
}

⬆ back to top

Lost uses PostCSS which means to override global variables we need to use something called "at-rules". They're easy enough. Just define them at the top of your stylesheet and you're good to go.

@lost gutter 60px;
@lost flexbox flex;
@lost cycle none;

.foo {
  ...
}

• gutter accepts any unit value. 30px by default.
• flexbox accepts flex or no-flex (default).
• cycle accepts none or any digit (although this is really weird). auto by default.

⬆ back to top

A general utility toolbelt for Lost. Included are mixins that require no additional input other than being called.

• edit|clearfix - The mixin to create.

section {
  lost-utility: edit;
}

⬆ back to top

Creates a Flexbox container.

• row|column - The flex-direction the container should create. This is typically opposite to the element you're creating so a row would need lost-flex-container: column;.

section {
  lost-flex-container: row;
}

div {
  lost-column: 1/2 flex;
}

⬆ back to top

Horizontally center a container element and apply padding to it.

• max-width - A max-width to assign. Can be any unit.
• padding - Padding on the left and right of the element. Can be any unit.
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  lost-center: 980px;
}

section {
  lost-center: 1140px 30px flex;
}

⬆ back to top

Align nested elements. Apply this to a parent container.

• reset|horizontal|vertical|top-left|top-center|top|top-right|middle-left|left|middle-center|center|middle-right|right|bottom-left|bottom-center|bottom|bottom-right - The position the nested element takes relative to the containing element.
• flex|no-flex - Determines whether this element should use Flexbox or not.

.parent {
  lost-align: right;
  width: 600px;
  height: 400px;
}

.child {
  width: 300px;
  height: 150px;
}

⬆ back to top

Creates a column that is a fraction of the size of its containing element's width with a gutter.

• fraction - This is a simple fraction of the containing element's width.
• cycle - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override the default use this param., e.g.: .foo { lost-column: 2/4 2; }
• gutter - The margin on the right side of the element used to create a gutter. Typically this is left alone and settings.gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
• flex|no-flex - Determines whether this element should use Flexbox or not.

div {
  lost-column: 1/3;
}

div {
  lost-column: 2/6 3 60px flex;
}

⬆ back to top

Creates a row that is a fraction of the size of its containing element's height with a gutter.

• fraction - This is a simple fraction of the containing element's height.
• gutter - The margin on the bottom of the element used to create a gutter. Typically this is left alone and settings.gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  height: 100%;
}

div {
  lost-row: 1/3;
}

⬆ back to top

Creates a block that is a fraction of the size of its containing element's width AND height with a gutter on the right and bottom.

• fraction - This is a simple fraction of the containing element's width and height.
• cycle - Lost works by assigning a margin-right/bottom to all elements except the last row (no margin-bottom) and the last column (no margin-right). It does this by default by using the denominator of the fraction you pick. To override this default use this param., e.g.: .foo { lost-waffle: 2/4 2; }
• gutter - The margin on the right and bottom side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  height: 100%;
}

div {
  lost-waffle: 1/3;
}

⬆ back to top

Margin to the left, right, bottom, or top, of an element depending on if the fraction passed is positive or negative. It works for both horizontal and vertical grids but not both.

• fraction - Fraction of the container to be offset.
• row|column - Direction the grid is going. Should be the opposite of the column or row it's being used on. Defaults to row.
• gutter - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well.

.two-elements {
  lost-column: 1/3;
}

.two-elements:first-child {
  lost-offset: 1/3;
}

⬆ back to top

Source ordering. Shift elements left, right, up, or down, by their left or top position by passing a positive or negative fraction.

• fraction - Fraction of the container to be shifted.
• row|column - Direction the grid is going. Should be the opposite of the column or row it's being used on.
• gutter - Adjust the size of the gutter for this movement. Should match the element's gutter.

div {
  lost-column: 1/2;
}

div:first-child {
  lost-move: 1/2;
}

div:last-child {
  lost-move: -1/2;
}

⬆ back to top

Creates a wrapping element for working with JS Masonry libraries like Isotope. Assigns a negative margin on each side of this wrapping element.

• flex|no-flex - Determines whether this element should use Flexbox or not.
• gutter - How large the gutter involved is, typically this won't be adjusted and will inherit settings.gutter, but it's made available if you want your masonry grid to have a special gutter, it should match your masonry-column's gutter.

section {
  lost-masonry-wrap: no-flex;
}

div {
  lost-masonry-column: 1/3;
}

⬆ back to top

Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the element.

• gutter - How large the gutter involved is, typically this won't be adjusted and will inherit settings.gutter, but it's made available if you want your masonry grid to have a special gutter, it should match your masonry-row's gutter.
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  lost-masonry-wrap: flex 60px;
}

div {
  lost-masonry-column: 1/3 60px flex;
}

⬆ back to top

• https://github.com/corysimmons/lost/tree/gh-pages

⬆ back to top

• calc() grids work perfect on IE9+ with poor support on old Android browsers (calc() browser support).
• With some polyfills (like the ones included in Boy) Lost works perfect in IE8 as well.
• The Flexbox version of Lost only works with browsers that support Flexbox (IE10+). Unfortunately, there isn't currently a good Flexbox polyfill. Flexbox browser support

⬆ back to top

If you like this project then I encourage you to check out a few of my other projects.

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

⬆ back to top

• Alex Bass for letting me bounce ideas off of him.
• Maria Keller for the amazing logo. Be sure to hire her for all your design and motion graphic needs.
• Everyone who files an Issue when something isn't working as expected.
• Everyone who is actually interested in my work on grids.

⬆ back to top