mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-19 12:11:21 +02:00
Code Issues Releases Wiki Activity

Added new card styles

Browse Source 
Updated cards to include the two new styles that will replace alerts, updated card documentation (for the most part).
This commit is contained in:
Angelos Chalaris
2017-05-10 23:42:54 +03:00
parent 393172e16f
commit bbe375ef3d
7 changed files with 114 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/card.html
View File

@@ -220,22 +220,17 @@
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
</div><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code>&lt;img&gt;</code> element or a video element of your choice (e.g. using a <code>&lt;iframe&gt;</code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>. Finally, you can turn a whole <code>.card</code> black, by applying the <code>.inverse</code> class to it. This is not really a section trick, but we thought we should include it here anyway.</p>
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code>&lt;img&gt;</code> element or a video element of your choice (e.g. using a <code>&lt;iframe&gt;</code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>.</p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
&lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section dark&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section darker&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card inverse&quot;&gt;
&lt;div class=&quot;section&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
@@ -326,6 +321,54 @@
</div>
</div>
</div>
</div>
<div class="row" id="color-variants">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Card color variants</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"><br>
<div class="row">
<div class="card warning"><div class="section"><h3>Warning Card</h3><p>Warning cards are used to display important information to users.</p></div></div>
<div class="card error"><div class="section"><h3>Error Card</h3><p>Error cards are used to display error messages to users.</p></div></div>
</div>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>Cards can also be used to display important information or error messages to users. You can use the <code>.warning</code> class to display a yellow warning card or, if you need to display an error message to your users, you can use the <code>.error</code> class to display a red error card. </p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;card warning&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Warning&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card error&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Error&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>If you want more color variants for your cards, check out the <a href="customization.html">customization</a> page.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12"><pre>&lt;div class=&quot;card warning errors&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Bad card&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two card color variants, as this might cause some unexpected behavior.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">