Card module update

Chalarangelo · Nov 4, 2016 · 93ba0c2 · 93ba0c2
1 parent 9f40778
commit 93ba0c2
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 27 deletions.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
@@ -300,3 +300,15 @@
 - Created mixin `make-card-section-alt-color` for alternate background `card` `section`s. Added a couple of variants just for fluff.
 - Opened issue for more mixins to be added to `card` module later.
 - Deployed live page.
+
+
+## 20161104
+
+- Added mixin `make-card-alt-color` to `card` module. Supplied an example of a different card (`primary`).
+- Added mixin `make-card-alt-size` for `card` sizes.
+- Changed `card`'s `small` and `large` to use above mixin.
+- Added `fluid` for `card`s.
+- Fixed a bug with `fluid` `card`s, the new optimization and checking routine should work for all percentage-based values.
+- Updated demo a little bit to showcase all of the new features of `card`s.
+- For consistency reasons (inconsistent `margin`s might cause problems with `card`s of different types), there is no choice to change the `margin` of customized `card`s through via mixin.
+- Created mixin `make-card-section-alt-style`, added `double-padded` style to add twice the `padding` to sections.
diff --git a/docs/v2/index.html b/docs/v2/index.html
@@ -418,14 +418,18 @@ <h2 class="section">Chubby cat<small>Uploaded Nov, 3rd, 2016</small></h2>
                   <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 class="card primary">
+                  <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! By the way, this is a <code>.primary</code> card.</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 fluid">
+                  <h1 class="section">Fluid</h1>
+                  <p class="section">Yes, <code>.fluid</code> cards are also available! You might want to use these in combination with the grid system's columns to achieve a better effect. There's an example below, after the other size variants for the cards. Have a look.</p>
+                </div>
                 <div class="card small">
                   <h2>&nbsp;Small</h2>
                   <p>There are also <code>.small</code> cards. Tiny, cute, small cards.</p>
@@ -439,6 +443,31 @@ <h2>&nbsp;Large</h2>
                     </div>
                   <input class="section" placeholder="Enter some text here...">
                 </div>
+                <div class="card">
+                  <p class="section double-padded">
+                    These cards work quite well together, no matter the size. Well, except the <code>.fluid</code> ones which should be used together, without the other cards. Unless you want a fluid card to act as a separator of sorts, which might be desirable. Just use them in columns, like we show you below, it's the best way. By the way, this was a <code>.double-padded</code> section.
+                  </p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12 col-md-3">
+                  <div class="card fluid">
+                    <h1 class="section double-padded">Card 1</h1>
+                    <p>This is the first card. It is placed inside a column.</p>
+                  </div>
+                </div>
+                <div class="col-sm-12 col-md">
+                  <div class="card fluid">
+                    <h1 class="section double-padded">Card 2</h1>
+                    <p>This is the second card. It is placed inside a larger column. On smaller displays these will display like a list of cards.</p>
+                  </div>
+                </div>
+                <div class="col-sm-12 col-md-3">
+                  <div class="card fluid">
+                    <h1 class="section double-padded">Card 3</h1>
+                    <p>This is the third card. It is placed inside a column.</p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>

diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css
@@ -824,12 +824,6 @@ progress {
 @media only screen and (min-width: 320px) {
   .card {
     max-width: 320px; } }
-@media only screen and (min-width: 480px) {
-  .card.large {
-    max-width: 480px; } }
-@media only screen and (min-width: 240px) {
-  .card.small {
-    max-width: 240px; } }
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary {
   background: #1565c0;
@@ -969,8 +963,25 @@ ul.breadcrumbs {
       content: '\27e9';
       padding: 0.125em; }
 
+.card.large {
+  max-width: 480px; }
+
+.card.small {
+  max-width: 160px; }
+
+.card.fluid {
+  max-width: 100%; }
+
+.card.primary {
+  background: #e1f5fe;
+  color: #263238;
+  border: 1px solid #01579b; }
+
 .card > .section.dark {
   background: #bdbdbd; }
 
 .card > .section.primary {
   background: #0277bd; }
+
+.card > .section.double-padded {
+  padding: 12px 16px 12px; }