diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index d1686ae..97ca862 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -564,3 +564,4 @@ - Basic documentation for `alert`s. - 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. diff --git a/docs/v2/card.html b/docs/v2/card.html index 504d879..f9bebfd 100644 --- a/docs/v2/card.html +++ b/docs/v2/card.html @@ -45,12 +45,12 @@ .fore-primary { color: #0d47a1; font-family: monospace, monospace; } .fore-secondary { color: #b71c1c; font-family: monospace, monospace; } .fore-tertiary { color: #1b5e20; font-family: monospace, monospace; } - .col-sm-12.col-sm-last.col-md-4.col-md-normal { + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ - .col-sm-12.col-sm-last.col-md-4.col-md-normal { + @media (max-width: 1279px){ + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { border: 0; border-top: 1px solid #bdbdbd; } @@ -105,11 +105,11 @@

Quick overview

-


+

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


Quick start

-

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


+

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


<meta name="viewport" content="width=device-width, initial-scale=1">

@@ -122,19 +122,40 @@

Basic syntax

-
- +
+
+
+
+

Card 1

This is a basic card with some sample content.

+

Card 2

This is another card with some sample content.

+

Card 3

This is one more card with some sample content.

+
+
+
-
-

+
+

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.

Sample code

- 

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

               

             

             

             
Notes

               
    
-                
  • 
+                
  • Check below for section!!!!
    • 
                 
  • 
               

               

@@ -159,10 +180,10 @@
               
Sections & media

             

             

-              

+              

               
               

-              

+              

                 

                 
Sample code

                 

@@ -196,10 +217,10 @@
               
Fluid Cards

             

             

-              

+              

               
               

-              

+              

                 

                 
Sample code

                 

diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html
index 8a74878..590a5da 100644
--- a/docs/v2/navigation.html
+++ b/docs/v2/navigation.html
@@ -49,7 +49,7 @@
         box-sizing: border-box;
         border-right: 1px solid #bdbdbd;
       }
-      @media (max-width: 767px){
+      @media (max-width: 1279px){
         .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
           border: 0;
           border-top: 1px solid #bdbdbd;
diff --git a/docs/v2/playground.html b/docs/v2/playground.html
index 17c4ad3..cab5aa5 100644
--- a/docs/v2/playground.html
+++ b/docs/v2/playground.html
@@ -76,6 +76,13 @@
     
     

     


+    
card demo

+    

+      
Card
Content of a card

+      
Card
Content of a card

+      
Card
Content of a card

+    

+    


     
Contextual tests

     
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularisedin the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 Why do we use it?