6.7.0

.editorconfig

@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2

README.md

@@ -25,11 +25,11 @@ As always, if you have any questions, comments, or concerns please feel free to
 
 *********
 
-
 Lost 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 lot of options.
 
 
 
+
 ## Table of Contents
 - [Installation](https://github.com/peterramsing/lost/wiki/Installation)
 - [Comparison Table](#better-than-x)
@@ -135,7 +135,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
 <section>
@@ -237,7 +237,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>
@@ -432,7 +432,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>
@@ -592,10 +592,12 @@ 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.
+- `none` - Resets the column (back to browser defaults)
 
 ```css
 div {
@@ -696,6 +698,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;
+}
+```
+
 **[:arrow_up: back to top](#table-of-contents)**
 
 &nbsp;

lib/lost-column.js

@@ -40,132 +40,181 @@ 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)',
+          ['float'],
+          ['right']
+        );
+
+        newBlock(
+          decl,
+          ':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)',
+          ['float'],
+          ['right']
+        );
+
+        newBlock(
+          decl,
+          ':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']
       );
-    }
 
-    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 +')'
-      });
+      newBlock(
+        decl,
+        ':last-child',
+        ['float', 'clear', 'margin-right', 'width'],
+        ['none', 'none', 0, 'auto']
+      );
     }
 
     decl.remove();

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)',

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": {