From 0085ea0a3d69195333b9c1941fc4860bc77183c4 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 21 Nov 2016 13:47:54 +0200 Subject: [PATCH] Grid documentation complete --- docs/v2/DEVLOG.md | 1 + docs/v2/grid.html | 68 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 64 insertions(+), 5 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index de50d5e..33df01d 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -496,3 +496,4 @@ - Added dos and don'ts in the grid page under the first section. - Added screen-specific layouts in the `grid.html` doc page. - Added offsets to the `grid.html` doc page. +- Added reordering to the `grid.html` doc page, `grid` documentation finished - some polishing might still be required. diff --git a/docs/v2/grid.html b/docs/v2/grid.html index cd09fe9..ebfd86a 100644 --- a/docs/v2/grid.html +++ b/docs/v2/grid.html @@ -455,7 +455,7 @@ <div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0"> </div> </div> -

Do: To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the col-SCR_SZ-offset-0 class, replacing SCR_SZ with the desired screen size, effectively resetting all offsets.

+

Do: To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the .col-SCR_SZ-offset-0 class, replacing SCR_SZ with the desired screen size, effectively resetting all offsets.

@@ -466,16 +466,74 @@
-

Column ordering

+

Column reordering

- +
+

Small screen layout

+
+
 
+
normal
+
 
+
+

Medium screen layout

+
+
first
+
 
+
 
+

Large screen layout

+
+
 
+
 
+
last
+
+
-

+

Finally, if you want to reorder your columns, you can do that to some extent using the .col-SCR_SZ-first, .col-SCR_SZ-last and .col-SCR_SZ-normal classes to your columns, replacing SCR_SZ with one of the available screen size names (sm, md or lg). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).

Sample code

- 


+                
<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

+              
    
+                
  • Columns are ordered by default in order of appearance. You should only apply column reordering classes to the columns you want to reorder on the screen-specific layouts you need them.
    • 
+                
  • Remember to specify a basic layout and/or screen specific layouts in addition to the column reordering classes.
    • 
+                
  • Column reordering is applied from smaller to larger screens, similar to how column layout and offsetting work.
    • 
+              

+              

+              

+                

+                  
<div class="row">
+  <div class="col-sm col-md-last">
+  </div>
+  <div class="col-sm col-md-last">
+  </div>
+  <div class="col-sm">
+  </div>
+</div>

+                  
Do: You can use multiple .col-SCR_SZ-firsts and .col-SCR_SZ-lasts, replacing SCR_SZ with the desired screen size, in the same row for the same screen size. If you specify more than one column to be first or last, the columns with the same order will be placed at the beggining or end of the row and the order between them will be determined based on their order of appearance in the DOM tree afterwards.

+                

+                

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

+                  
Do: To remove a previously applied reorder from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no reordering is active on a column, you can use the .col-SCR_SZ-normal class, replacing SCR_SZ with the desired screen size, effectively resetting all reorders. You do not, however, need to add this class to all other columns or use it when there are no reorders applied.

+