mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 23:06:31 +02:00
Code Issues Releases Wiki Activity

Card module update

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-04 11:39:20 +02:00
parent 9f4077833f
commit 93ba0c20b7
6 changed files with 132 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/v2/DEVLOG.md
View File

@@ -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.

33
docs/v2/index.html
View File

@@ -418,14 +418,18 @@
<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 @@
</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>