From 8ad49fef4cb0ad7591d98ddab3c526bf0658bed8 Mon Sep 17 00:00:00 2001 From: Anton Volkov Date: Tue, 8 Aug 2017 10:57:47 +0300 Subject: [PATCH] chore: update docs (#2) - Removed index.html from repo - Changed old fonts to free ones - Added new `xl` size in docs - Changed offset section --- docs/index.html | 389 ++++++++++++++++++++++---------------------- docs/src/index.html | 124 +++++--------- docs/src/style.css | 195 ++++++---------------- docs/style.css | 2 +- index.html | 195 ---------------------- 5 files changed, 289 insertions(+), 616 deletions(-) delete mode 100644 index.html diff --git a/docs/index.html b/docs/index.html index 4bffb4d7..4be51104 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,195 +1,196 @@ -flexboxgrid2

flexboxgrid2

A grid system based on the flex display property.

Github

Responsive

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

<div class="row">
-    <div class="col-xs-12
-                col-sm-8
-                col-md-6
-                col-lg-4">
-        <div class="box">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>
-</div>

Offsets

Offset a column

<div class="row">
-    <div class="col-xs-offset-3 col-xs-9">
-        <div class="box">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>
-</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
-    <div class="col-xs">
-        <div class="box">
-            <div class="row">
-                <div class="col-xs">
-                    <div class="box">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">
-            start
-        </div>
-    </div>
-</div>
-

.center-

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

.end-

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

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

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

.top-

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

.middle-

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

.bottom-

<div class="row bottom-xs">
-    <div class="col-xs-6">
-        <div class="box">
-            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">
-            around
-        </div>
-    </div>
-    <div class="col-xs-2">
-        <div class="box">
-            around
-        </div>
-    </div>
-    <div class="col-xs-2">
-        <div class="box">
-            around
-        </div>
-    </div>
-</div>
-

.between-

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

Reordering

Add classes to reorder columns.

.first-

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

.last-

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

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
-    <div class="col-xs-2">
-        <div class="box">
-            1
-        </div>
-    </div>
-    <div class="col-xs-2">
-        <div class="box">
-            2
-        </div>
-    </div>
-    <div class="col-xs-2">
-        <div class="box">
-            3
-        </div>
-    </div>
-</div>
+flexboxgrid2
flexboxgrid2
A grid system based on the flex display property.
Github
Responsive
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.
<div class="row">
+    <div class="col-xs-12
+                col-sm-8
+                col-md-6
+                col-lg-4
+                col-xl-2">
+        <div class="box">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>
+</div>
Offsets
Offset a column
<div class="row">
+    <div class="col-xs-offset-3 col-xs-9">
+        <div class="box">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>
+</div>
Nested Grids
Nest grids inside grids inside grids.
<div class="row">
+    <div class="col-xs">
+        <div class="box">
+            <div class="row">
+                <div class="col-xs">
+                    <div class="box">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">
+            start
+        </div>
+    </div>
+</div>
+
.center-
<div class="row center-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+
.end-
<div class="row end-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            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">
+            All together now
+        </div>
+    </div>
+</div>
+
.top-
<div class="row top-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            top
+        </div>
+    </div>
+</div>
+
.middle-
<div class="row middle-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            center
+        </div>
+    </div>
+</div>
+
.bottom-
<div class="row bottom-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            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">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+</div>
+
.between-
<div class="row between-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+</div>
+
Reordering
Add classes to reorder columns.
.first-
1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2 first-xs">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
.last-
1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2 last-xs">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
Reversing
.reverse
1
2
3
4
5
6
<div class="row reverse">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
 

\ No newline at end of file
diff --git a/docs/src/index.html b/docs/src/index.html
index 8561e37e..ece50403 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,32 +29,32 @@
         if (defined) {
           cb();
         } else {
-          setTimeout(function () {
+          setTimeout(function() {
             ss.onloadcssdefined(cb);
           });
         }
       };
-      ss.onloadcssdefined(function () {
+      ss.onloadcssdefined(function() {
         ss.media = media || "all";
       });
       return ss;
     }
-    loadCSS("//kristoferjoseph.com/font/bold.css");
+    loadCSS("https://fonts.googleapis.com/css?family=Chivo:900");
   
   
 
 
 
 
-  

+  

     

       

         
flexboxgrid2

       

       

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

       

       

@@ -64,36 +64,35 @@ 
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 viewport widths.

         

-          

+          

             

           

-          

+          

             

           

-          

+          

             

           

         

         

-          

+          

             

           

-          

+          

             

           

         

         

-          

+          

             

           

-          

+          

             

           

         

@@ -101,18 +100,19 @@ 
Responsive

     <div class="col-xs-12
                 col-sm-8
                 col-md-6
-                col-lg-4">
+                col-lg-4
+                col-xl-2">
         <div class="box">Responsive</div>
     </div>
 </div>
+
-
-
-

Fluid

+

Fluid

Percent based widths allow fluid resizing of columns and rows.

+
@@ -172,11 +172,11 @@

Fluid

-
-

Simple Syntax

+

Simple Syntax

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

+ 
<div class="row">
     <div class="col-xs-12">
         <div class="box">12</div>
@@ -185,63 +185,26 @@ 
Simple Syntax
-
-

Offsets

+

Offsets

Offset a column

+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
+
-
+
-
+
@@ -253,11 +216,11 @@

Offsets

-
-

Auto Width

+

Auto Width

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

+
@@ -285,11 +248,11 @@

Auto Width

-
-

Nested Grids

+

Nested Grids

Nest grids inside grids inside grids.

+
@@ -351,11 +314,11 @@

Nested Grids

-
-

Alignment

+

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-

@@ -425,6 +388,7 @@

.end-

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

+
@@ -435,7 +399,7 @@

.end-

-
Example + 
<div class="row center-xs end-sm start-lg">
     <div class="col-xs-6">
         <div class="box">
@@ -504,11 +468,11 @@ 
.bottom-

 
       
 
-      
       

-        
Distribution

 
+        
Distribution

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

+
         
.around-

 
         

@@ -587,11 +551,11 @@ 
.between-

 
       

 
-      
       

-        
Reordering

 
+        
Reordering

         
Add classes to reorder columns.

+
         
.first-

 
         

@@ -688,10 +652,9 @@ 
.last-

 
       

 
-      
       

-        
Reversing

 
+        
Reversing

         
.reverse

 
         

@@ -740,6 +703,7 @@ 
.reverse
+