Card module complete, fully responsive

docs/v2/DEVLOG.md

@@ -286,4 +286,15 @@
 - Started developing `shell`. Added `shell` file and `mini-shell/card` file for the `card` module.
 - Actually deleted `shell` file, moved everything to `core` file, renamed to `_mini.scss`.
 - Played around with `card`s a little bit, got a few basic ideas down, tested centering in `row`, not worthwhile.
-- Some minor styling for cards has been done, lots of work needed still.
+- Some minor styling for cards has been done, lots of work needed still.
+
+## 20161103
+
+- Added some more info in issue #16 about breaking changes and cards etc.
+- Added the proper features needed for media inside `card`s, images and other parts named as media will respond as required and images will resize and center properly. This, in turn broke support for certain browsers.
+- Added flexbox properties to cards to `align-self` and `justify-content` so that contents and containers will display properly.
+- Created `large` and `small` variants for `card`s.
+- Optimized `card`s and added variables etc.
+- Tested cards, seem to work properly.
+- Minor restructure of `utility` for consistency and such.
+- Created mixin `make-card-section-alt-color` for alternate background `card` `section`s. Added a couple of variants just for fluff.

docs/v2/index.html

@@ -395,27 +395,49 @@
             <h2>Cards <small>Modern content containers</small></h2>
             <p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Below are some examples:</p>
             <div class="container">
-              <div class="row cards">
-                <div class="card">
-                  card 1
-                </div>
+              <div class="row">
                 <div class="card">
+                  <img src="catdemo.jpg" class="section media">
                   <div class="section">
-                  card 2
+                  <h2>Chubby cat</h2>
+                  <span>This is a lovely cat!</span>
                   </div>
-                  <img src="favicon.png" style="height:64px; width: 100%; margin: auto;" class="section media">
+                  <small class="section">03-11-2016, 09:44 PM</small>
+                </div>
+                <div class="card">
+                  <h2 class="section">Chubby cat<small>Uploaded Nov, 3rd, 2016</small></h2>
+                  <img src="catdemo.jpg" class="section media">
+                  <p class="section">This cat is pretty amazing, right? Just look at it!</p>
+                </div>
+                <div class="card">
+                  <p class="section">Cards are pretty awesome, as you can see.</p>
+                  <p class="section">This is a card with three text sections.</p>
+                  <p class="section">By the way, here's a link to the <strong>mini.css</strong> <a href="https://github.com/Chalarangelo/mini.css">project repository on Github</a>, just in case.</p>
+                </div>
+                <div class="card">
+                  <div class="section">You can use <code>&lt;button&gt;</code>s and other similar elements as card sections. Like the button below.</div>
+                  <button class="section">Button section</button>
+                </div>
+                <div class="card">
+                  <p>Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore!</p>
+                </div>
+                <div class="card">
+                  <h2 class="section dark"><code>.dark</code> heading</h2>
+                  <p class="section">Totally normal text.</p>
+                  <p class="section primary"><code>.primary</code> section text.</p>
+                </div>
+                <div class="card small">
+                  <h2>&nbsp;Small</h2>
+                  <p>There are also <code>.small</code> cards. Tiny, cute, small cards.</p>
+                </div>
+                <div class="card large">
                   <div class="section">
-                  test
-                  </div>
-                </div>
-                <div class="card">
-                  card 3
-                </div>
-                <div class="card">
-                  card 4
-                </div>
-                <div class="card">
-                  card 5
+                    <h2>&nbsp;Large</h2>
+                    <hr>
+                    <p>And, of course, there are <code>.large</code> cards.</p>
+                    <p>Because you'll need them.</p><br>
+                    </div>
+                  <input class="section" placeholder="Enter some text here...">
                 </div>
               </div>
             </div>