Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge 6.6.4 into 6.7.0 as it ended up being only docs changes #223

Merged
merged 3 commits into from
Jan 4, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,8 @@ Lost Grid is a powerful grid system built in [PostCSS](https://github.com/postcs

*********

It is built upon years of studying and [building](http://jeet.gs) grid systems with **tons** of community feedback.

It makes use of [`calc()`](https://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902) 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](https://www.youtube.com/watch?v=EnjtQQQaDKo).


## Table of Contents
Expand Down Expand Up @@ -232,7 +229,7 @@ The concept of `cycle` is **extremely important** to Lost and what sets good Los

##### Nesting

Nesting is simple and **requires [no extra context](https://github.com/peterramsing/lost/wiki/Comparison-Explanation#no-additional-ratio-context)** unlike other preprocessor grid systems.
Nesting is simple. There is no context required.

```html
<section>
Expand Down Expand Up @@ -427,7 +424,7 @@ div {

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](https://github.com/philipwalton/flexbugs/issues/32#issuecomment-90789645). 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:
Also note that waffle grids work well for the most part, but are somewhat finicky in fringe situations. 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:

```html
<section>
Expand Down Expand Up @@ -587,9 +584,10 @@ Align nested elements. Apply this to a parent container.
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).
- When specifying the gutter, you need to also specify the cycle. [see issue 181](https://github.com/peterramsing/lost/issues/181)
- `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; }
- `flex|no-flex` - Determines whether this element should use Flexbox or not.

```css
Expand Down Expand Up @@ -691,6 +689,24 @@ div:last-child {
}
```

_note: If a gutter is set, lost-move will not retain it and will need to be set manually_

See [#195](https://github.com/peterramsing/lost/issues/195) for more details. This is projected to be fixed in 7.0.0.

```css
div {
lost-column: 1/2 0 0;
}

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

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

**[⬆ back to top](#table-of-contents)**

&nbsp;
Expand Down