From cfc5907522908f973c9f41c88e062ce997a20217 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 7 Feb 2017 14:30:11 +0200 Subject: [PATCH] Media object basic documentation --- docs/grid.html | 95 +++++++++++++++++++++++++++++++++++------------ docs/v2/DEVLOG.md | 1 + 2 files changed, 73 insertions(+), 23 deletions(-) diff --git a/docs/grid.html b/docs/grid.html index 5c136dc..4557c77 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -70,9 +70,7 @@
-
-

Basic layout

-
+

Basic layout


@@ -168,8 +166,7 @@
  • Fluid columns can be used for sizes that are not of the form 100%/12×X where X an integer value between 1 and 12. For example, if you have 7 .col-sm elements in one row, each of the elements will have a width of 1/7th the width of the row.
    • - -
    + 
    <div class="col-sm">
@@ -247,13 +244,10 @@
       
    
         
    
           
    
-            
    
-              
    Screen-specific layouts
    
-            
    
+            
    Screen-specific layouts
    
             
    
               
    
                 
    
-
 				
    
 					
    
 						
    Small screen layout
    
@@ -298,8 +292,7 @@
               
      
                 
    • Leaving a column's size unspecified for a resolution will use the style applied for the previous largest resolution recursively.
      • 
                 
    • Changing the layout for different screen sizes can sometimes require complex content realignment, offsetting and reordering. For these features, check the sections below.
      • 
-              
    
-              
    
+              
    
               
    
                 
    
                   
    <div class="row">
@@ -347,9 +340,7 @@
       
    
         
    
           
    
-            
    
-              
    Column offsets
    
-            
    
+            
    Column offsets
    
             
    
               
    
                 

    
@@ -396,8 +387,7 @@
               
      
                 
    • Columns with offsets and columns without offsets can be mixed for better results. In fact, we strongly suggest you try that.
      • 
                 
    • Remember to specify a basic layout and/or screen specific layouts in addition to the offset classes.
      • 
-              
    
-              
    
+              
    
               
    
                 
    
                   
    <div class="row">
@@ -423,9 +413,7 @@
       
    
         
    
           
    
-            
    
-              
    Column reordering
    
-            
    
+            
    Column reordering
    
             
    
               
    
                 
    
@@ -440,7 +428,7 @@
                     
    normal
    
                     
     
    
                   
    
-                  


                 
+                  


    
                   
    
                     
     
    
                     
     
    
@@ -449,7 +437,7 @@
                 
    
               
    
               
    
-                
    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).
    
+                
    Additionally, 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">
@@ -469,8 +457,7 @@
                 
  • 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">
@@ -497,6 +484,68 @@
           
    
         
    
       
    
+
+	  
    
+		
    
+		  
    
+			
    Media object pattern
    
+			
    
+			  
    
+				
    
+				

    
+			  
    
+				
    
+				
    
+					
    
+						
    Media object heading
    
+						
    This is an example implementation of the popular media object pattern, using simple grid rules.
    
+					
    
+				
    
+			  
    
+			  
    
+		    
    
+			  
    
+				
    Last, but not least, you can use the grid system's classes to create a media object in one of many ways, based on your needs. The simplest way to implement a media object is using two columns, one for the media (i.e. <img>) and one for the textual content next to the media.
    
+				
    Sample code
    
+				
    <div class="row">
+  <div class="col-sm-1">
+    <img src="...">
+  </div>
+  <div class="col-sm">
+    <h2>Media object heading</h2>
+    <p>Media object content...</p>
+  </div>
+</div>

    
+			  
    
+			
    
+			
    
+			  
    Notes
    
+			  
      
+				
    • 
+			  
    
+			  
    
+				
    
+				  
    ...
    
+				  
    Do: Responsive - screen-specific...
    
+				
    
+				
    
+				  
    ...
    
+				  
    Do: Nesting and the use of rows...
    
+				
    
+				
    
+				  
    ...
    
+				  
    Do: Align right using last...
    
+				
    
+				
    
+				  
    ...
    
+				  
    Don't: Use of image or content as its own column...
    
+				
    
+			  
    
+			
    
+		  
    
+		
    
+	  
    
+
       
    
         
    
           
    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.
    
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index b02da64..5c24000 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -833,3 +833,4 @@
 - Shrinked page sizes a little bit across all pages, except `quick_reference.html`.
 - Minor updates to `quick_reference.html` to get size a bit lower.
 - Updated existing documentation for `grid` module.
+- Setup the `media object` section of `grid.html`, just the basic demo for now.