From a078b3b9e4389399a21180d2dd7306924378012d Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Tue, 29 Dec 2015 22:51:24 -0800 Subject: [PATCH 01/13] adds tests for the lost-column: none rule --- test/lost-column.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/test/lost-column.js b/test/lost-column.js index 00479faf..1895da11 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -57,4 +57,14 @@ describe('lost-column', function() { 'a:nth-child(3n) { margin-right: 0; }' ); }); + it('provides none rule', function() { + check( + 'a { lost-column: none; }', + 'a { width: auto; }\n' + + 'a:last-child { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(n) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n + 1) { float: none; clear: none; margin-right: 0; width: auto; }\n' + + 'a:nth-child(1n) { float: none; clear: none; margin-right: 0; width: auto; }' + ); + }); }); From 706f37a13b436d5d973adb035b5888cfc34b067d Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Tue, 29 Dec 2015 22:51:35 -0800 Subject: [PATCH 02/13] adds implementation for the lost-column: none rule --- lib/lost-column.js | 205 ++++++++++++++++++++++++++------------------- 1 file changed, 119 insertions(+), 86 deletions(-) diff --git a/lib/lost-column.js b/lib/lost-column.js index 1d3c91ec..a6490141 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -40,132 +40,165 @@ module.exports = function lostColumnDecl(css, settings) { lostColumnGutter = settings.gutter, lostColumnFlexbox = settings.flexbox; - if (settings.cycle === 'auto') { - lostColumnCycle = decl.value.split('/')[1]; - } else { - lostColumnCycle = settings.cycle; - } - - declArr = decl.value.split(' '); - lostColumn = declArr[0]; - - if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { - lostColumnCycle = declArr[1]; - } + if (decl.value !== 'none') { + if (settings.cycle === 'auto') { + lostColumnCycle = decl.value.split('/')[1]; + } else { + lostColumnCycle = settings.cycle; + } - if (declArr[1] == 'flex' || declArr[1] == 'no-flex' || declArr[1] == 'auto') { - lostColumnCycle = declArr[0].split('/')[1]; - } + declArr = decl.value.split(' '); + lostColumn = declArr[0]; - if (declArr[2] !== undefined && declArr[2].search(/^\d/) !== -1) { - lostColumnGutter = declArr[2]; - } + if (declArr[1] !== undefined && declArr[1].search(/^\d/) !== -1) { + lostColumnCycle = declArr[1]; + } - if (declArr.indexOf('flex') !== -1) { - lostColumnFlexbox = 'flex'; - } + if (declArr[1] == 'flex' || declArr[1] == 'no-flex' || declArr[1] == 'auto') { + lostColumnCycle = declArr[0].split('/')[1]; + } - if (declArr.indexOf('no-flex') !== -1) { - lostColumnFlexbox = 'no-flex'; - } + if (declArr[2] !== undefined && declArr[2].search(/^\d/) !== -1) { + lostColumnGutter = declArr[2]; + } - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-cycle') { - lostColumnCycle = decl.value; + if (declArr.indexOf('flex') !== -1) { + lostColumnFlexbox = 'flex'; + } - decl.remove(); + if (declArr.indexOf('no-flex') !== -1) { + lostColumnFlexbox = 'no-flex'; } - }); - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-gutter') { - lostColumnGutter = decl.value; + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-cycle') { + lostColumnCycle = decl.value; - decl.remove(); - } - }); + decl.remove(); + } + }); - decl.parent.nodes.forEach(function (decl) { - if (decl.prop == 'lost-column-flexbox') { - if (decl.prop == 'flex') { - lostColumnFlexbox = 'flex'; + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-gutter') { + lostColumnGutter = decl.value; + + decl.remove(); } + }); - decl.remove(); - } - }); + decl.parent.nodes.forEach(function (decl) { + if (decl.prop == 'lost-column-flexbox') { + if (decl.prop == 'flex') { + lostColumnFlexbox = 'flex'; + } - if (lostColumnFlexbox === 'flex') { - decl.cloneBefore({ - prop: 'flex', - value: '0 0 auto' + decl.remove(); + } }); - if (lostColumnCycle !== 0) { + if (lostColumnFlexbox === 'flex') { + decl.cloneBefore({ + prop: 'flex', + value: '0 0 auto' + }); + + if (lostColumnCycle !== 0) { + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['margin-right'], + [0] + ); + } + newBlock( decl, - ':nth-child('+ lostColumnCycle +'n)', + ':last-child', ['margin-right'], [0] ); - } - newBlock( - decl, - ':last-child', - ['margin-right'], - [0] - ); - - newBlock( - decl, - ':nth-child(n)', - ['margin-right'], - [lostColumnGutter] - ); - } else { - - if (lostColumnCycle !== 0) { newBlock( decl, - ':nth-child('+ lostColumnCycle +'n + 1)', - ['clear'], - ['left'] + ':nth-child(n)', + ['margin-right'], + [lostColumnGutter] ); + } else { + + if (lostColumnCycle !== 0) { + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n + 1)', + ['clear'], + ['left'] + ); + + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['margin-right'], + [0] + ); + } newBlock( decl, - ':nth-child('+ lostColumnCycle +'n)', + ':last-child', ['margin-right'], [0] ); + + newBlock( + decl, + ':nth-child(n)', + ['float', 'margin-right', 'clear'], + ['left', lostColumnGutter, 'none'] + ); + } + + if (lostColumnGutter !== '0') { + decl.cloneBefore({ + prop: 'width', + value: 'calc(99.99% * '+ lostColumn +' - ('+ lostColumnGutter +' - '+ lostColumnGutter +' * '+ lostColumn +'))' + }); + } else { + decl.cloneBefore({ + prop: 'width', + value: 'calc(99.999999% * '+ lostColumn +')' + }); } + } else { + decl.cloneBefore({ + prop: 'width', + value: 'auto' + }); newBlock( decl, - ':last-child', - ['margin-right'], - [0] + ':nth-child(1n)', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] + ); + newBlock( + decl, + ':nth-child(1n + 1)', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] ); - newBlock( decl, ':nth-child(n)', - ['float', 'margin-right', 'clear'], - ['left', lostColumnGutter, 'none'] + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] + ); + newBlock( + decl, + ':last-child', + ['float', 'clear', 'margin-right', 'width'], + ['none', 'none', 0, 'auto'] ); - } - if (lostColumnGutter !== '0') { - decl.cloneBefore({ - prop: 'width', - value: 'calc(99.99% * '+ lostColumn +' - ('+ lostColumnGutter +' - '+ lostColumnGutter +' * '+ lostColumn +'))' - }); - } else { - decl.cloneBefore({ - prop: 'width', - value: 'calc(99.999999% * '+ lostColumn +')' - }); } decl.remove(); From 7d4ef6ab56caa509b1317041b2a393c7d1b67d1d Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Tue, 29 Dec 2015 22:51:54 -0800 Subject: [PATCH 03/13] adds doc in README for the lost-column: none rule --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 67be477c..116c3300 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,7 @@ div:nth-child(3n + 1) { ##### Basic Columns -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. +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. To unset (or remove) a column rule, possibly at a larger breakpoint, use `lost-column: none;` ```html
From 4f1bc4a0f8eb43b137717214ea49115d356396a8 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Tue, 29 Dec 2015 23:14:51 -0800 Subject: [PATCH 04/13] adds editorconfig Indent style should be a space Indent size should be 2 --- .editorconfig | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..76a93c06 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,3 @@ +[*] +indent_style = space +indent_size = 2 From 7e71c6fdb031d754944e5dd7c0e79d5363705a1d Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Wed, 30 Dec 2015 19:11:08 -0800 Subject: [PATCH 05/13] Adds initial test for adding float: right to last cycle child to address #200 --- test/lost-column.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/lost-column.js b/test/lost-column.js index 00479faf..4cbd48fa 100644 --- a/test/lost-column.js +++ b/test/lost-column.js @@ -9,6 +9,7 @@ describe('lost-column', function() { 'a { width: calc(99.99% * 1/3 - (30px - 30px * 1/3)); }\n' + 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + 'a:nth-child(3n + 1) { clear: left; }' ); @@ -20,6 +21,7 @@ describe('lost-column', function() { 'a { width: calc(99.99% * 2/5 - (30px - 30px * 2/5)); }\n' + 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(5n) { float: right; }\n' + 'a:nth-child(5n) { margin-right: 0; }\n' + 'a:nth-child(5n + 1) { clear: left; }' ); @@ -31,6 +33,7 @@ describe('lost-column', function() { 'a { width: calc(99.99% * 2/4 - (30px - 30px * 2/4)); }\n' + 'a:nth-child(n) { float: left; margin-right: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(2n) { float: right; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + 'a:nth-child(2n + 1) { clear: left; }' ); @@ -42,6 +45,7 @@ describe('lost-column', function() { 'a { width: calc(99.999999% * 2/5); }\n' + 'a:nth-child(n) { float: left; margin-right: 0; clear: none; }\n' + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + 'a:nth-child(3n + 1) { clear: left; }' ); @@ -54,6 +58,7 @@ describe('lost-column', function() { ' }\n' + 'a:nth-child(n) { margin-right: 60px; }\n' + 'a:last-child { margin-right: 0; }\n' + + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n) { margin-right: 0; }' ); }); From ee383b9af6c5ac8aac9352c95c22b8c495d0b6ba Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Wed, 30 Dec 2015 19:11:20 -0800 Subject: [PATCH 06/13] Adds initial code for adding float: right to last cycle child to address #200 --- lib/lost-column.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/lib/lost-column.js b/lib/lost-column.js index 1d3c91ec..937777ba 100644 --- a/lib/lost-column.js +++ b/lib/lost-column.js @@ -108,6 +108,13 @@ module.exports = function lostColumnDecl(css, settings) { ['margin-right'], [0] ); + + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['float'], + ['right'] + ); } newBlock( @@ -139,6 +146,13 @@ module.exports = function lostColumnDecl(css, settings) { ['margin-right'], [0] ); + + newBlock( + decl, + ':nth-child('+ lostColumnCycle +'n)', + ['float'], + ['right'] + ); } newBlock( From 81043f9647603144ae02f36a67e5a25d7a3b3b4a Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Fri, 1 Jan 2016 18:34:16 -0800 Subject: [PATCH 07/13] 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 08/13] 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 09/13] 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)**   From 51a3e9e832ceb64768ea846c58e42b91f9960373 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Fri, 8 Jan 2016 17:29:25 -0800 Subject: [PATCH 10/13] Adds gotcha note for Less and fractions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As noted in issue #229 there can be an issue where Less does the division of lost-column: 1/2 into lost-column: 0.5 which causes problems especially with cycle. This adds a note to escape the division with a ~”1/2”. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index d304f89e..314b0775 100644 --- a/README.md +++ b/README.md @@ -752,6 +752,10 @@ div { - If you're experiencing issues when adding padding to an element with `lost-column`, look into adding `box-sizing: border-box` [See Issue 118](https://github.com/peterramsing/lost/issues/118#issuecomment-100752669) - Especially if you're expecting two elements to be next to each other and they end up being on top of each other. +- If you're using [Less](http://lesscss.org/) there are sometimes issues with fractions being divided before Lost can interpret them. + - To fix, escape the math like so: `lost-column: ~"1/2";`. + - See: [Lost issue 229](https://github.com/peterramsing/lost/issues/229), [Less issue 974](https://github.com/less/less.js/issues/974) + **[⬆ back to top](#table-of-contents)** From 88b22487f7e13d74eb2a122068e0b1ac05b29774 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Fri, 8 Jan 2016 19:05:30 -0800 Subject: [PATCH 11/13] Updates arrow icon to :arrow_up: Fixes issue #230 --- README.md | 58 +++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 314b0775..1f557a5a 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ Feature | Lost | [Bootstrap](http://getbootstrap.com/css/#grid) | [Foundation](h If you notice anything in this table is incorrect, please don't hesitate to [open an issue](https://github.com/peterramsing/lost/issues/new) or [tweet](https://twitter.com/lostgrid) -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -129,7 +129,7 @@ div:nth-child(3n + 1) { /*# sourceMappingURL=style.css.map */ ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -158,7 +158,7 @@ div { `lost-utility: clearfix;` is just a [clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) 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](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -176,7 +176,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -231,7 +231,7 @@ div { 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](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -258,7 +258,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -283,7 +283,7 @@ div:first-child { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -310,7 +310,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -342,7 +342,7 @@ section:nth-of-type(2) { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -370,7 +370,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -402,7 +402,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -456,7 +456,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -482,7 +482,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -504,7 +504,7 @@ Lost uses PostCSS which means to override global variables we need to use someth - `flexbox` accepts `flex` or `no-flex` (default). - `cycle` accepts `none` or any digit (although this is really weird). `auto` by default. -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -521,7 +521,7 @@ section { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -540,7 +540,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -561,7 +561,7 @@ section { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -584,7 +584,7 @@ Align nested elements. Apply this to a parent container. } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -607,7 +607,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -628,7 +628,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -650,7 +650,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -671,7 +671,7 @@ Margin to the left, right, bottom, or top, of an element depending on if the fra } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -696,7 +696,7 @@ div:last-child { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -716,7 +716,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -736,7 +736,7 @@ div { } ``` -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -744,7 +744,7 @@ div { - https://github.com/peterramsing/lost/tree/gh-pages -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -757,7 +757,7 @@ div { - See: [Lost issue 229](https://github.com/peterramsing/lost/issues/229), [Less issue 974](https://github.com/less/less.js/issues/974) -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -767,7 +767,7 @@ div { - With some polyfills (like the ones included in [Boy](https://github.com/corysimmons/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](http://caniuse.com/#feat=flexbox) -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   @@ -778,6 +778,6 @@ div { - Everyone who files an [Issue](https://github.com/peterramsing/lost/issues) when something isn't working as expected. - Everyone who is *actually* interested in my work on grids. -**[⬆ back to top](#table-of-contents)** +**[:arrow_up: back to top](#table-of-contents)**   From fec8946928d0755d2e024dd5b8eeacd9d981bbe8 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Sat, 9 Jan 2016 18:36:53 -0800 Subject: [PATCH 12/13] Adds tests for adding a float: right to the lost-waffle feature --- test/lost-waffle.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/lost-waffle.js b/test/lost-waffle.js index b701433a..769dbea4 100644 --- a/test/lost-waffle.js +++ b/test/lost-waffle.js @@ -12,6 +12,7 @@ describe('lost-waffle', function() { ' margin-bottom: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-child(3n + 1) { clear: left; }\n' + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); @@ -26,6 +27,7 @@ describe('lost-waffle', function() { ' margin-bottom: 30px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n) { float: right; }\n' + 'a:nth-child(2n + 1) { clear: left; }\n' + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); @@ -40,6 +42,7 @@ describe('lost-waffle', function() { ' margin-bottom: 60px; clear: none; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(2n) { margin-right: 0; }\n' + + 'a:nth-child(2n) { float: right; }\n' + 'a:nth-child(2n + 1) { clear: left; }\n' + 'a:nth-last-child(-n + 2) { margin-bottom: 0; }' ); @@ -53,6 +56,7 @@ describe('lost-waffle', function() { 'a:nth-child(n) { margin-right: 0; margin-bottom: 0; }\n' + 'a:last-child { margin-right: 0; margin-bottom: 0; }\n' + 'a:nth-child(3n) { margin-right: 0; }\n' + + 'a:nth-child(3n) { float: right; }\n' + 'a:nth-last-child(-n + 3) { margin-bottom: 0; }' ); }); From 58ed33dc46f80eed174055c7d7bdc1c05125cd44 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Sat, 9 Jan 2016 18:38:48 -0800 Subject: [PATCH 13/13] Adds a float: right to the lost-waffle feature Due to sub-pixel rounding there has been some issues where the last element in a cycle (or row) would have a small bit of space visible to the right of it inside the container that surrounded it. Most notably, this issue occurred in Safari 9 for iOS and Desktop. --- lib/lost-waffle.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/lib/lost-waffle.js b/lib/lost-waffle.js index f495876e..cc5faec9 100644 --- a/lib/lost-waffle.js +++ b/lib/lost-waffle.js @@ -108,6 +108,13 @@ module.exports = function lostWaffleDecl(css, settings) { [0] ); + newBlock( + decl, + ':nth-child('+ lostWaffleCycle + 'n)', + ['float'], + ['right'] + ); + newBlock( decl, ':nth-child('+ lostWaffleCycle +'n)', @@ -145,6 +152,13 @@ module.exports = function lostWaffleDecl(css, settings) { ['left'] ); + newBlock( + decl, + ':nth-child('+ lostWaffleCycle + 'n)', + ['float'], + ['right'] + ); + newBlock( decl, ':nth-child('+ lostWaffleCycle +'n)',