diff --git a/.gitignore b/.gitignore index efc27d53..c81267a9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ -node_modules/ +node_modules .DS_Store yarn.lock -dist \ No newline at end of file +dist +flexboxgrid2.css +flexboxgrid2.min.css +!src/flexboxgrid2.css \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index ad38836d..61c9e9df 100644 --- a/Gruntfile.js +++ b/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" } }, diff --git a/README.md b/README.md index 1316f1da..87b9f048 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # 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, @@ -9,10 +9,10 @@ Grid based on the `flex` display property and rem. - `.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 ``` # 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 diff --git a/docs/index.html b/docs/index.html index f0c08abb..5408fa8f 100644 --- a/docs/index.html +++ b/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"> - <div class="box">Responsive</div> + <div>Responsive</div> </div> </div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
   flex-basis: 50%;
 }

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
     <div class="col-xs-12">
-        <div class="box">12</div>
+        <div>12</div>
     </div>
 </div>

Offsets

Offset a column

<div class="row">
     <div class="col-xs-offset-3 col-xs-9">
-        <div class="box">offset</div>
+        <div>offset</div>
     </div>
 </div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
     <div class="col-xs">
-        <div class="box">auto</div>
+        <div>auto</div>
     </div>
 </div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
     <div class="col-xs">
-        <div class="box">
+        <div>
             <div class="row">
                 <div class="col-xs">
-                    <div class="box">auto</div>
+                    <div>auto</div>
                 </div>
             </div>
         </div>
     </div>
 </div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             start
         </div>
     </div>
 </div>

.center-

<div class="row center-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             start
         </div>
     </div>
 </div>

.end-

<div class="row end-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             end
         </div>
     </div>
 </div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

<div class="row center-xs end-sm start-lg">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             All together now
         </div>
     </div>
 </div>

.top-

<div class="row top-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             top
         </div>
     </div>
 </div>

.middle-

<div class="row middle-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             center
         </div>
     </div>
 </div>

.bottom-

<div class="row bottom-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             bottom
         </div>
     </div>
 </div>

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="row around-xs">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
 </div>

.between-

<div class="row between-xs">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
 </div>

Reordering

Add classes to reorder columns.

.first-

Forces a column to appear first.

1
2
3
4
5
6
<div class="row">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2 first-xs">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
 </div>

.last-

Forces a column to appear last.

1
2
3
4
5
6
<div class="row">
     <div class="col-xs-2 last-xs">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
 </div>
-

.initial-order-

Resets a column to its initial order.

1
2
3
4
5
6
<div class="row">
-    <div class="col-xs-2">
-        <div class="box">
+

.initial-order-

Resets a column to its initial order.

1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2">
+        <div>
             1
         </div>
     </div>
-    <div class="col-xs-2">
-        <div class="box">
+    <div class="col-xs-2">
+        <div>
             2
         </div>
     </div>
-    <div class="col-xs-2 first-xs initial-order-sm">
-        <div class="box">
+    <div class="col-xs-2 first-xs initial-order-sm">
+        <div>
             3
         </div>
     </div>
 </div>

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
 </div>
-

Hiding

Add one or more breakpoint modifiers to hide columns based on the viewport.

.hidden-

md
<div class="row">
-    <div class="col-xs">
-        <div class="box hidden-xs">
+

Hiding

Add one or more breakpoint modifiers to hide columns based on the viewport.

.hidden-

md
<div class="row">
+    <div class="col-xs">
+        <div class="hidden-xs">
             xs
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-sm">
+    <div class="col-xs">
+        <div class="hidden-sm">
             sm
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-md">
+    <div class="col-xs">
+        <div class="hidden-md">
             md
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-lg">
+    <div class="col-xs">
+        <div class="hidden-lg">
             lg
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-xl">
+    <div class="col-xs">
+        <div class="hidden-xl">
             xl
         </div>
     </div>
diff --git a/docs/src/index.html b/docs/src/index.html
index 2b6f3611..1dadcad1 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -19,7 +19,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) {
@@ -29,12 +29,12 @@
         if (defined) {
           cb();
         } else {
-          setTimeout(function() {
+          setTimeout(function () {
             ss.onloadcssdefined(cb);
           });
         }
       };
-      ss.onloadcssdefined(function() {
+      ss.onloadcssdefined(function () {
         ss.media = media || "all";
       });
       return ss;
@@ -54,7 +54,7 @@
         
flexboxgrid2

       
       

-        
A grid system based on the flex display property.
+        
A grid system based on the flex          display property.
         

       

       

@@ -67,7 +67,8 @@ 
flexboxgrid2

       

 
         
Responsive

-        
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.

+        
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md,
+          lg & xl viewport widths.

 
         

           

@@ -102,7 +103,7 @@ 
Responsive

                 col-md-6
                 col-lg-4
                 col-xl-2">
-        <div class="box">Responsive</div>
+        <div>Responsive</div>
     </div>
 </div>
@@ -179,7 +180,7 @@

Simple Syntax

<div class="row">
     <div class="col-xs-12">
-        <div class="box">12</div>
+        <div>12</div>
     </div>
 </div>
@@ -210,7 +211,7 @@

Offsets

<div class="row">
     <div class="col-xs-offset-3 col-xs-9">
-        <div class="box">offset</div>
+        <div>offset</div>
     </div>
 </div>
@@ -242,7 +243,7 @@

Auto Width

<div class="row">
     <div class="col-xs">
-        <div class="box">auto</div>
+        <div>auto</div>
     </div>
 </div>
@@ -302,10 +303,10 @@

Nested Grids

<div class="row">
     <div class="col-xs">
-        <div class="box">
+        <div>
             <div class="row">
                 <div class="col-xs">
-                    <div class="box">auto</div>
+                    <div>auto</div>
                 </div>
             </div>
         </div>
@@ -334,7 +335,7 @@ 
.start-

         
         
<div class="row start-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             start
         </div>
     </div>
@@ -357,7 +358,7 @@ 
.center-

         
         
<div class="row center-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             start
         </div>
     </div>
@@ -379,7 +380,7 @@ 
.end-

         
         
<div class="row end-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             end
         </div>
     </div>
@@ -402,7 +403,7 @@ 
.end-

         
         
<div class="row center-xs end-sm start-lg">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             All together now
         </div>
     </div>
@@ -421,7 +422,7 @@ 
.top-

         
         
<div class="row top-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             top
         </div>
     </div>
@@ -440,7 +441,7 @@ 
.middle-

         
         
<div class="row middle-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             center
         </div>
     </div>
@@ -459,7 +460,7 @@ 
.bottom-

         
         
<div class="row bottom-xs">
     <div class="col-xs-6">
-        <div class="box">
+        <div>
             bottom
         </div>
     </div>
@@ -494,17 +495,17 @@ 
.around-

         
         
<div class="row around-xs">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             around
         </div>
     </div>
@@ -532,17 +533,17 @@ 
.between-

         
         
<div class="row between-xs">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             between
         </div>
     </div>
@@ -587,17 +588,17 @@ 
.first-

         
         
<div class="row">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2 first-xs">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
@@ -635,17 +636,17 @@ 
.last-

         
         
<div class="row">
     <div class="col-xs-2 last-xs">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
@@ -681,19 +682,19 @@ 
.initial-order-

             
           
         
-        
<div class="row">
-    <div class="col-xs-2">
-        <div class="box">
+        
<div class="row">
+    <div class="col-xs-2">
+        <div>
             1
         </div>
     </div>
-    <div class="col-xs-2">
-        <div class="box">
+    <div class="col-xs-2">
+        <div>
             2
         </div>
     </div>
-    <div class="col-xs-2 first-xs initial-order-sm">
-        <div class="box">
+    <div class="col-xs-2 first-xs initial-order-sm">
+        <div>
             3
         </div>
     </div>
@@ -734,17 +735,17 @@ 
.reverse

         
         
<div class="row reverse">
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             1
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             2
         </div>
     </div>
     <div class="col-xs-2">
-        <div class="box">
+        <div>
             3
         </div>
     </div>
@@ -752,57 +753,67 @@ 
.reverse
- +

Hiding

Add one or more breakpoint modifiers to hide columns based on the viewport.

- +

.hidden-

- +
-
-
-
md
-
-
+
+ +
+
+ +
+
+
md
+
+
+ +
+
+ +
- 
<div class="row">
-    <div class="col-xs">
-        <div class="box hidden-xs">
+        
<div class="row">
+    <div class="col-xs">
+        <div class="hidden-xs">
             xs
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-sm">
+    <div class="col-xs">
+        <div class="hidden-sm">
             sm
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-md">
+    <div class="col-xs">
+        <div class="hidden-md">
             md
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-lg">
+    <div class="col-xs">
+        <div class="hidden-lg">
             lg
         </div>
     </div>
-    <div class="col-xs">
-        <div class="box hidden-xl">
+    <div class="col-xs">
+        <div class="hidden-xl">
             xl
         </div>
     </div>
 </div>

 
-
- + +