chore: clean up

.gitignore

@@ -1,4 +1,7 @@
-node_modules/
+node_modules
 .DS_Store
 yarn.lock
-dist
+dist
+flexboxgrid2.css
+flexboxgrid2.min.css
+!src/flexboxgrid2.css

Gruntfile.js

@@ -12,7 +12,8 @@ module.exports = function(grunt) {
       },
       release: {
         files: {
-          "dist/flexboxgrid.css": "src/flexboxgrid.css"
+          "flexboxgrid2.css": "src/flexboxgrid2.css",
+          "dist/flexboxgrid2.css": "src/flexboxgrid2.css"
         }
       }
     },
@@ -22,7 +23,7 @@ module.exports = function(grunt) {
           "docs/style.css": [
             "node_modules/normalize.css/normalize.css",
             "docs/src/style.css",
-            "dist/flexboxgrid.css"
+            "flexboxgrid2.css"
           ]
         }
       },
@@ -35,9 +36,7 @@ module.exports = function(grunt) {
       },
       release: {
         expand: true,
-        cwd: "dist",
-        src: ["*.css", "!*.min.css"],
-        dest: "dist",
+        src: ["flexboxgrid2.css", "dist/flexboxgrid2.css"],
         ext: ".min.css"
       }
     },

README.md

@@ -1,18 +1,18 @@
 # flexboxgrid2
 [![npm version](https://badge.fury.io/js/flexboxgrid2.svg)](https://badge.fury.io/js/flexboxgrid2)
 
-Grid based on the `flex` display property and rem.
+Grid based on the `flex` display property.
 
 ### Values
 - `.container` padding: .5rem,
 - `.container` width: $breakpoint - 1rem,
 - `.col-*` padding: .5rem.
 
 ### Breakpoints
-- `xs`: 0−575px
-- `sm`: 576px-767px
-- `md`: 768px−991px
-- `lg`: 992px−1199px
+- `xs`: 0..575px
+- `sm`: 576px..767px
+- `md`: 768px..991px
+- `lg`: 992px..1199px
 - `xl`: 1200px+
 
 # Install
@@ -22,10 +22,18 @@ Grid based on the `flex` display property and rem.
 ### npm
 `npm i -S flexboxgrid2`
 
+# Usage
+### webpack
+```js
+import 'flexboxgrid2'
+// or
+import 'flexboxgrid2/flexboxgrid2.css'
+```
+
 ### unpkg.com CDN
 ```html
 <link rel="stylesheet" href="//unpkg.com/flexboxgrid2" >
 ``` 
 
 # Inspiration
-- based on [flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid), but project was abandoned
+- based on [flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid), but looks like project was abandoned

docs/index.html

@@ -7,7 +7,7 @@
       ss.href = href;
       ss.media = "only x";
       ref.parentNode.insertBefore(ss, ref);
-      ss.onloadcssdefined = function(cb) {
+      ss.onloadcssdefined = function (cb) {
         var defined;
         for (var i = 0; i < sheets.length; i++) {
           if (sheets[i].href && sheets[i].href.indexOf(href) > -1) {
@@ -17,12 +17,12 @@
         if (defined) {
           cb();
         } else {
-          setTimeout(function() {
+          setTimeout(function () {
             ss.onloadcssdefined(cb);
           });
         }
       };
-      ss.onloadcssdefined(function() {
+      ss.onloadcssdefined(function () {
         ss.media = media || "all";
       });
       return ss;
@@ -33,205 +33,205 @@
                 col-md-6
                 col-lg-4
                 col-xl-2">
-        &lt;div class="box">Responsive&lt;/div>
+        &lt;div>Responsive&lt;/div>
     &lt;/div>
 &lt;/div></code></pre></section><section class="page-section"><h2>Fluid</h2><p>Percent based widths allow fluid resizing of columns and rows.</p><div class="row"><div class="col-xs-12"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-1"><div class="box-row"></div></div><div class="col-xs-11"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-2"><div class="box-row"></div></div><div class="col-xs-10"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-3"><div class="box-row"></div></div><div class="col-xs-9"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-4"><div class="box-row"></div></div><div class="col-xs-8"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-5"><div class="box-row"></div></div><div class="col-xs-7"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-6"><div class="box-row"></div></div><div class="col-xs-6"><div class="box-row"></div></div></div><pre><code>.col-xs-6 {
   flex-basis: 50%;
 }</code></pre></section><section class="page-section"><h2>Simple Syntax</h2><p>All you need to remember is row, column, content.</p><pre><code>&lt;div class="row">
     &lt;div class="col-xs-12">
-        &lt;div class="box">12&lt;/div>
+        &lt;div>12&lt;/div>
     &lt;/div>
 &lt;/div></code></pre></section><section class="page-section"><h2>Offsets</h2><p>Offset a column</p><div class="row"><div class="col-xs-3"><div class="box-row"></div></div><div class="col-xs-offset-3 col-xs-6"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-4 col-xs-6"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-2 col-xs-4"><div class="box-row"></div></div></div><pre><code>&lt;div class="row">
     &lt;div class="col-xs-offset-3 col-xs-9">
-        &lt;div class="box">offset&lt;/div>
+        &lt;div>offset&lt;/div>
     &lt;/div>
 &lt;/div></code></pre></section><section class="page-section"><h2>Auto Width</h2><p>Add any number of auto sizing columns to a row. Let the grid figure it out.</p><div class="row"><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div></div><div class="row"><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div></div><pre><code>&lt;div class="row">
     &lt;div class="col-xs">
-        &lt;div class="box">auto&lt;/div>
+        &lt;div>auto&lt;/div>
     &lt;/div>
 &lt;/div></code></pre></section><section class="page-section"><h2>Nested Grids</h2><p>Nest grids inside grids inside grids.</p><div class="row"><div class="col-xs-7"><div class="box box-container"><div class="row"><div class="col-xs-9"><div class="box-first box-container"><div class="row"><div class="col-xs-4"><div class="box-nested"></div></div><div class="col-xs-8"><div class="box-nested"></div></div></div></div></div><div class="col-xs-3"><div class="box-first box-container"><div class="row"><div class="col-xs"><div class="box-nested"></div></div></div></div></div></div></div></div><div class="col-xs-5"><div class="box box-container"><div class="row"><div class="col-xs-12"><div class="box-first box-container"><div class="row"><div class="col-xs-6"><div class="box-nested"></div></div><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div></div></div></div><pre><code>&lt;div class="row">
     &lt;div class="col-xs">
-        &lt;div class="box">
+        &lt;div>
             &lt;div class="row">
                 &lt;div class="col-xs">
-                    &lt;div class="box">auto&lt;/div>
+                    &lt;div>auto&lt;/div>
                 &lt;/div>
             &lt;/div>
         &lt;/div>
     &lt;/div>
 &lt;/div></code></pre></section><section class="page-section"><h2>Alignment</h2><p>Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column</p><h3><code>.start-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row start-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row start-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             start
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.center-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row center-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row center-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             start
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.end-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row end-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row end-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             end
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><p>Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row center-xs end-sm start-lg"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row center-xs end-sm start-lg">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             All together now
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.top-</code></h3><div class="row top-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code>&lt;div class="row top-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             top
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.middle-</code></h3><div class="row middle-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code>&lt;div class="row middle-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             center
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.bottom-</code></h3><div class="row bottom-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code>&lt;div class="row bottom-xs">
     &lt;div class="col-xs-6">
-        &lt;div class="box">
+        &lt;div>
             bottom
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre></section><section class="page-section"><h2>Distribution</h2><p>Add classes to distribute the contents of a row or column.</p><h3><code>.around-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row around-xs"><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row around-xs">
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             around
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             around
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             around
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.between-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row between-xs"><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div></div></div></div></div><pre><code>&lt;div class="row between-xs">
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             between
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             between
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             between
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre></section><section class="page-section"><h2>Reordering</h2><p>Add classes to reorder columns.</p><h3><code>.first-</code></h3><p>Forces a column to appear first.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2"><div class="box-first">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2 first-xs"><div class="box-nested">6</div></div></div></div></div></div><pre><code>&lt;div class="row">
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             1
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             2
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2 first-xs">
-        &lt;div class="box">
+        &lt;div>
             3
         &lt;/div>
     &lt;/div>
 &lt;/div>
 </code></pre><h3><code>.last-</code></h3><p>Forces a column to appear last.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2 last-xs"><div class="box-nested">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2"><div class="box-first">6</div></div></div></div></div></div><pre><code>&lt;div class="row">
     &lt;div class="col-xs-2 last-xs">
-        &lt;div class="box">
+        &lt;div>
             1
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             2
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             3
         &lt;/div>
     &lt;/div>
 &lt;/div>
-</code></pre><h3><code>.initial-order-</code></h3><p>Resets a column to its initial order.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2"><div class="box-first">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2 first-xs initial-order-sm"><div class="box-nested">6</div></div></div></div></div></div><pre><code>&lt;div class=&quot;row&quot;&gt;
-    &lt;div class=&quot;col-xs-2&quot;&gt;
-        &lt;div class=&quot;box&quot;&gt;
+</code></pre><h3><code>.initial-order-</code></h3><p>Resets a column to its initial order.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2"><div class="box-first">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2 first-xs initial-order-sm"><div class="box-nested">6</div></div></div></div></div></div><pre><code>&lt;div class="row"&gt;
+    &lt;div class="col-xs-2"&gt;
+        &lt;div&gt;
             1
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs-2&quot;&gt;
-        &lt;div class=&quot;box&quot;&gt;
+    &lt;div class="col-xs-2"&gt;
+        &lt;div&gt;
             2
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs-2 first-xs initial-order-sm&quot;&gt;
-        &lt;div class=&quot;box&quot;&gt;
+    &lt;div class="col-xs-2 first-xs initial-order-sm"&gt;
+        &lt;div&gt;
             3
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</code></pre></section><section class="page-section"><h2>Reversing</h2><h3><code>.reverse</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row reverse"><div class="col-xs-2"><div class="box-nested">1</div></div><div class="col-xs-2"><div class="box-nested">2</div></div><div class="col-xs-2"><div class="box-nested">3</div></div><div class="col-xs-2"><div class="box-nested">4</div></div><div class="col-xs-2"><div class="box-nested">5</div></div><div class="col-xs-2"><div class="box-nested">6</div></div></div></div></div></div><pre><code>&lt;div class="row reverse">
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             1
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             2
         &lt;/div>
     &lt;/div>
     &lt;div class="col-xs-2">
-        &lt;div class="box">
+        &lt;div>
             3
         &lt;/div>
     &lt;/div>
 &lt;/div>
-</code></pre></section><section class="page-section"><h2>Hiding</h2><p>Add one or more breakpoint modifiers to hide columns based on the viewport.</p><h3><code>.hidden-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs"><div class="box-nested hidden-xs">xs</div></div><div class="col-xs"><div class="box-nested hidden-sm">sm</div></div><div class="col-xs"><div class="box-nested hidden-md">md</div></div><div class="col-xs"><div class="box-nested hidden-lg">lg</div></div><div class="col-xs"><div class="box-nested hidden-xl">xl</div></div></div></div></div></div><pre><code>&lt;div class=&quot;row&quot;&gt;
-    &lt;div class=&quot;col-xs&quot;&gt;
-        &lt;div class=&quot;box hidden-xs&quot;&gt;
+</code></pre></section><section class="page-section"><h2>Hiding</h2><p>Add one or more breakpoint modifiers to hide columns based on the viewport.</p><h3><code>.hidden-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs"><div class="box-nested hidden-xs">xs</div></div><div class="col-xs"><div class="box-nested hidden-sm">sm</div></div><div class="col-xs"><div class="box-nested hidden-md">md</div></div><div class="col-xs"><div class="box-nested hidden-lg">lg</div></div><div class="col-xs"><div class="box-nested hidden-xl">xl</div></div></div></div></div></div><pre><code>&lt;div class="row"&gt;
+    &lt;div class="col-xs"&gt;
+        &lt;div class="hidden-xs"&gt;
             xs
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs&quot;&gt;
-        &lt;div class=&quot;box hidden-sm&quot;&gt;
+    &lt;div class="col-xs"&gt;
+        &lt;div class="hidden-sm"&gt;
             sm
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs&quot;&gt;
-        &lt;div class=&quot;box hidden-md&quot;&gt;
+    &lt;div class="col-xs"&gt;
+        &lt;div class="hidden-md"&gt;
             md
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs&quot;&gt;
-        &lt;div class=&quot;box hidden-lg&quot;&gt;
+    &lt;div class="col-xs"&gt;
+        &lt;div class="hidden-lg"&gt;
             lg
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;col-xs&quot;&gt;
-        &lt;div class=&quot;box hidden-xl&quot;&gt;
+    &lt;div class="col-xs"&gt;
+        &lt;div class="hidden-xl"&gt;
             xl
         &lt;/div&gt;
     &lt;/div&gt;