From 81043f9647603144ae02f36a67e5a25d7a3b3b4a Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Fri, 1 Jan 2016 18:34:16 -0800 Subject: [PATCH 1/3] Addresses issue #181 to clarify some documentation regarding the lost-column --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 67be477c..df510944 100644 --- a/README.md +++ b/README.md @@ -587,9 +587,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 From 34407789dc1bf48a37213817dee69c54577dac10 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Fri, 1 Jan 2016 20:51:08 -0800 Subject: [PATCH 2/3] Addresses minor copy updates to the README.md #205 --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index df510944..64e6d3dc 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
From ba41457577cbbcaf4289066b3dd8116828e9b08d Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Sun, 3 Jan 2016 21:45:33 -0800 Subject: [PATCH 3/3] Updates README to reflect lost-move not retaining custom gutters Fixes #221 --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 64e6d3dc..287be6e6 100644 --- a/README.md +++ b/README.md @@ -689,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)**