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 fec8946928d0755d2e024dd5b8eeacd9d981bbe8 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Sat, 9 Jan 2016 18:36:53 -0800 Subject: [PATCH 10/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 11/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)', From ed89f3da4505e4be32bb06c0c942d48e9280632c Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Thu, 21 Jan 2016 18:32:53 -0800 Subject: [PATCH 12/13] bumps version number to 6.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7f3981fa..cde78c8d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lost", - "version": "6.6.3", + "version": "6.7.0", "description": "PostCSS fractional grid system built with calc() by the guy who built Jeet. Supports masonry, vertical, and waffle grids.", "main": "lost.js", "repository": { From f17f5a8e32413ae7f8e3cf7de21f8b0d84200e48 Mon Sep 17 00:00:00 2001 From: Peter Ramsing Date: Thu, 21 Jan 2016 18:42:45 -0800 Subject: [PATCH 13/13] add additional documentation for the lost-column: none; rule. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b16c2049..bdf5311b 100644 --- a/README.md +++ b/README.md @@ -597,6 +597,7 @@ certain elements to have a particularly large or small gutter (pass 0 for no gut - 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. +- `none` - Resets the column (back to browser defaults) ```css div {