From a649cf0927b7bc1c22cf6d11ca8724eb27e6f5eb Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 26 Nov 2016 19:25:50 +0200 Subject: [PATCH] Finished first section of card module docs --- docs/v2/DEVLOG.md | 1 + docs/v2/card.html | 77 ++++++++++++++++++++++++++++++++++++----- docs/v2/grid.html | 4 +-- docs/v2/playground.html | 3 ++ 4 files changed, 75 insertions(+), 10 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 97ca862..7324772 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -565,3 +565,4 @@ - Documented `animated` `alert`s. Documentation of `contextual` seems to be complete. - Added `card` doc page. - Added some basic info on `card`s in doc page. +- Updated basic documentation for `card` module in doc page. diff --git a/docs/v2/card.html b/docs/v2/card.html index f9bebfd..2dbca44 100644 --- a/docs/v2/card.html +++ b/docs/v2/card.html @@ -134,7 +134,13 @@
-

To start using cards in your layout, you need to first create a <div class="row"> element (you can learn more about that in the grid module's page). After doing that, you can easily add cards inside the element using <div> elements with the .card class. Add your content inside the cards, splitting it in .sections using <div> elements. Cards will respond to screen changes, realigning themselves as necessary to fit on the page. Due to this property, the example showcased here might not make it immediately apparent that cards normally display side by side in order to fill their parent container.

+

To start using cards in your layout, you need to be somewhat familiar with the grid module, so if you aren't take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:

+
    +
  1. At the outermost level of the card layout syntax is a .row, which serves as a wrapper for all the cards inside it.
    2. +
  2. Inside the .row, cards are defined as <div> elements of the .card class.
    3. +
  3. Finally, inside the .cards, you can define sections using the .section class to wrap your content.
    4. +
+

Cards will respond to screen changes, realigning themselves as necessary to fit on the page. Due to this property, the example showcased here might not make it immediately apparent that cards normally display side by side in order to fill their parent container.

Sample code

<div class="row">
     <div class="card">
@@ -155,18 +161,73 @@
             

             
Notes

               
    
-                
  • Check below for section!!!!
    • 
-                
  • 
+                
  • The card module is compatible with modern browsers, but might not display properly on older browsers.
    • 
+                
  • If you want to further customize your .sections, check the section below.
    • 
               

               

               

                 

-                  

-                  
Do: 

+                  
<div class="card">
+    <div class="section">
+        <h3>Card Title</h3>
+    </div>
+    <div class="section">
+        <p>Card content...</p>
+        <p>More card content...</p>
+    </div>
+</div>

+                  
Do: You can add as many .sections as you like to a card.

                 

                 

-                  

-                  
Don't: 

+                  
<div class="card">
+    <div class="section">
+        <h3>Card Title</h3>
+    </div>
+    <p>Content not in a section!</p>
+</div>

+                  
Don't: Avoid using cards with content inside them that is not wrapped in sections. Try to use a single .section to wrap the content inside these to avoid unexpected behavior.

+                

+                

+                  
<div class="card">
+    <h3 class="section">Card Title</h3>
+    <p class="section">Card content...</p>
+</div>

+                  
Do: You can use the .section class for things other than <div> elements (e.g. <h1>-<h6>, <p>, <button>).

+                

+                

+                  
<div class="row">
+  <div class="card">
+  </div>
+</div>
+<div class="row">
+  <div class="card">
+  </div>
+</div>

+                  
Don't: If you want to place multiple cards side by side, add them all inside the same .row. Placing cards inside different rows or not inside rows at all can result in unexpected behavior. 

+                

+                

+                  
<div class="card">
+    <div class="section row">
+        <div class="card">
+        </div>
+    </div>
+</div>
+<!-- or -->
+<div class="card">
+    <div class="row">
+        <div class="card">
+        </div>
+    </div>
+</div>

+                  
Do: You can place .row elements inside .card elements, if you want. you should normally also make those rows into card .sections, but for this specific case you might want to make an exception sometimes.

+                

+                

+                  
<div class="card row">
+</div>
+<!-- or -->
+<div class="card col-sm">
+</div>

+                  
Don't: You should not have elements that are cards and rows or columns at the same time.

                 

               

             

@@ -214,7 +275,7 @@
         

           

             

-              
Fluid Cards

+              
Card sizing and fluidity

             

             

               

diff --git a/docs/v2/grid.html b/docs/v2/grid.html
index 3c7cc77..b5a16a1 100644
--- a/docs/v2/grid.html
+++ b/docs/v2/grid.html
@@ -207,7 +207,7 @@
             
Notes

               
    
                 
  • mini.css uses a mobile-first approach in its grid system. This means that specifying a layout for smaller device sizes will apply the same layout on medium-sized and larger screens, so you do not have to rewrite the same layout for all three screen sizes. However, if you want to change the layout on different screen sizes, check the section below.
    • 
-                
  • The grid module is compatible with modern browsers, but does not display properly on older browsers.
    • 
+                
  • The grid module is compatible with modern browsers, but might not display properly on older browsers.
    • 
                 
  • The specific breakpoints for small, medium and large screen sizes are as follows:
                   
      
                     
    • small: less than 768px wide
      • 
@@ -250,7 +250,7 @@
                 

                 

                   
<div class="row">
-    <!-- content without columns -->
+    <p>Content without columns...</p>
 </div>

                   
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.

                 

diff --git a/docs/v2/playground.html b/docs/v2/playground.html
index cab5aa5..56bf739 100644
--- a/docs/v2/playground.html
+++ b/docs/v2/playground.html
@@ -81,6 +81,9 @@
       
Card
Content of a card

       
Card
Content of a card

       
Card
Content of a card

+
+      
aa

+      
Text
Content of a card

     

     


     
Contextual tests