diff --git a/README.md b/README.md index 67be477c..287be6e6 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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
@@ -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
@@ -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 @@ -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)**