From 24a4b6703671b11400390a907fa9e8f38b7d2015 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 16 Dec 2016 16:35:59 +0200 Subject: [PATCH] Grid module quick reference --- docs/grid.html | 4 +- docs/quick_reference.html | 167 ++++++++++++++++++++++++++++++++++---- docs/v2/DEVLOG.md | 1 + 3 files changed, 155 insertions(+), 17 deletions(-) diff --git a/docs/grid.html b/docs/grid.html index d9a3c3b..47d2bba 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -254,14 +254,14 @@

Don't: Avoid using rows with content inside that is not in wrapped in columns. Try to use a single .col-sm to wrap the content inside these, otherwise there might be unexpected behavior.

- 
 <div class="row">
+                  
<div class="row">
   <div class="col-sm">
   <div>
   <div class="col-sm-4">
   </div>
  </div>
 <!-- or -->
- <div class="row">
+<div class="row">
   <div class="col-sm-12">
   <div>
   <div class="col-sm-12">
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index 6525d8a..3aae028 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -58,6 +58,9 @@
       h3 > a{
         font-size: 1rem;
       }
+      pre {
+        max-height: 400px;
+      }
     
   
     
@@ -94,7 +97,7 @@
         

           

             

-              
Setup and usage

+              
Setup & usage

             

             

               
You can import the default flavor of mini.css in your webpage by simply adding the following reference inside your HTML page's <head> tag:

@@ -148,7 +151,7 @@
             

             

               

-                
Common textual elements  View on Codepen

+                
Common textual elements  View on Codepen

                 
<p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
 <a href="#">This is a link.</a>
 <small>This is some small text.</small>
@@ -163,7 +166,7 @@
 </blockquote>

               

               

-                
Lists & images View on Codepen

+                
Lists & images View on Codepen

                 
<ul>
   <li>Apple</li>
   <li>Orange</li>
@@ -190,45 +193,179 @@
             

             

               

-                
Basic layout  View on Codepen

-                

+                
Basic layout  View on Codepen

+                
<div class="container">
+  <div class="row">
+    <div class="col-sm-1">
+    </div>
+    <div class="col-sm-11">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-2">
+    </div>
+    <div class="col-sm-10">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-3">
+    </div>
+    <div class="col-sm-9">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4">
+    </div>
+    <div class="col-sm-8">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-5">
+    </div>
+    <div class="col-sm-7">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-6">
+    </div>
+    <div class="col-sm-6">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12"> 
+    </div>
+  <div class="row">
+    <div class="col-sm">
+    </div>
+    <div class="col-sm">
+    </div>
+  </div>
+</div>

               

               

+                
Notes

                 
    
-                  
  • 
+                  
  • Based on the Flexbox Layout Module
    • 
+                  
  • Grid structured as follows:
+                    
      
+                      
    1. .container serves as the grid system's wrapper
      2. 
+                      
    2. Multiple .row elements serve as the grid system's rows
      3. 
+                      
    3. Multiple .col-SCR_SZ and/or .col-SCR_SZ-COL_WD elements specify serve as the grid system's columns (fluid and preset respectively)
      4. 
+                    
    
+                  
    • 
+                  
  • SCR_SZ values: 
+                    
      
+                      
    • sm for screens below 768px wide
      • 
+                      
    • md for screens between 768px(inclusive) and 1280px(exclusive)
      • 
+                      
    • lg for screens wider than 1280px
      • 
+                    
    
+                  
    • 
+                  
  • COL_WD can be any integer value between 1 and 12 (both inclusive)
    • 
+                  
  • Fluid columns can create irregularly-sized columns in a layout
    • 
+                  
  • You can nest rows inside columns, but not columns inside columns or rows inside rows
    • 
+                  
  • An element can be a row and column at the same time
    • 
+                  
  • You can mix preset and fluid columns
    • 
+                  
  • Always wrap content in columns, never leave content unwrapped inside a row
    • 
+                  
  • Do not mix rows or columns with unwrapped content on the same level
    • 
                 

               

             

             

               

-                
Screen-specific layouts  View on Codepen

-                

+                
Screen-specific layouts  View on Codepen

+                
<div class="container">
+  <div class="row">
+    <div class="col-sm">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-3 col-lg-2">
+    </div>
+    <div class="col-sm-12 col-md-5 col-lg-7">
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-3">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm">
+    </div>
+  </div>
+</div>

               

               

+                
Notes

                 
    
-                  
  • 
+                  
  • Apply multiple column classes to the same element, one for each screen size, to define different layouts
    • 
+                  
  • Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
    • 
+                  
  • Try to make page content vertical for smaller devices, using .col-sm-12 and transition to two or three columns on larger screen sizes
    • 
+                  
  • Combine with offsets and reordering as shown below
    • 
+                  
  • You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size
    • 
+                  
  • Always start with a .col-sm or .col-sm-COL_WD style, otherwise smaller devices will not display your content properly
    • 
                 

               

             

             

               

-                
Column offsets  View on Codepen

-                

+                
Column offsets  View on Codepen

+                
<div class="container">
+  <div class="row">
+    <div class="col-sm-10 col-sm-offset-1">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm col-sm-offset-2">
+    </div>
+  </div>
+<div class="row">
+    <div class="col-sm-6 col-sm-offset-3">
+    </div>
+</div>
+  <div class="row">
+    <div class="col-sm-8 col-sm-offset-4">
+    </div>
+  <div class="row">
+    <div class="col-sm-5 col-sm-offset-1"> 
+    </div>
+    <div class="col-sm-5 col-sm-offset-1"> 
+    </div>
+  </div> 
+</div>

               

               

+                
Notes

                 
    
-                  
  • 
+                  
  • Create offsets using the .col-SCR_SZ-offset-COL_WD classes
    • 
+                  
  • COL_WD can be any integer from 0 to 11 (both inclusive)
    • 
+                  
  • You can mix offset columns and non-offset columns
    • 
+                  
  • Specify offsets in combination with existing column styling, not instead
    • 
+                  
  • Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
    • 
+                  
  • You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using .col-SCR_SZ-offset-0
    • 
                 

               

             

             

               

-                
Column reordering  View on Codepen

-                

+                
Column reordering  View on Codepen

+                
<div class="container">
+  <div class="row">
+    <div class="col-sm col-md-last col-lg-normal">
+    </div>
+    <div class="col-sm-first col-md-normal">
+    </div>
+    <div class="col-sm col-md-first col-lg-normal">
+    </div>
+  </div>
+</div>

               

               

+                
Notes

                 
    
-                  
  • 
+                  
  • Create reorders using .col-SCR_SZ-first, .col-SCR_SZ-last and .col-SCR_SZ-normal classes for first, last and normal ordering respectively
    • 
+                  
  • Default ordering is based on order of appearance
    • 
+                  
  • Specify reorders in combination with existing column styling, not instead
    • 
+                  
  • Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
    • 
+                  
  • You can use multiple .col-SCR_SZ-first and .col-SCR_SZ-last elements to group your elements according to the desired layout
    • 
+                  
  • You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using .col-SCR_SZ-normal
    • 
                 

               

             

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index adab607..af78fa2 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -663,3 +663,4 @@
 - Created `quick_reference.html` page for quick reference.
 - Documented `core`'s quick reference with codepens etc.
 - Updated link references to `v2.0.0` instead of `v2.0`.
+- Added documentation for `grid` module in the quick reference guide.