mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-26 07:14:24 +02:00
Code Issues Releases Wiki Activity

Card basic syntax partial documentation

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-26 18:15:46 +02:00
parent fd3697a7b6
commit 616bd77ccd
4 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/v2/card.html
View File

@@ -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 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p><!-- Card description --></p><br>
<p>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 <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> 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 <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>card</strong> 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 <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> 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 <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -122,19 +122,40 @@
<h2>Basic syntax</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div class="container">
<br>
<div class="row">
<div class="card"><div class="section"><h3>Card 1</h3><p>This is a basic card with some sample content.</p></div></div>
<div class="card"><div class="section"><h3>Card 2</h3><p>This is another card with some sample content.</p></div></div>
<div class="card"><div class="section"><h3>Card 3</h3><p>This is one more card with some sample content.</p></div></div>
</div>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p>To start using cards in your layout, you need to first create a <code>&lt;div class=&quot;row&quot;&gt;</code> element (you can learn more about that in the <a href="grid.html"><strong>grid</strong></a> module's page). After doing that, you can easily add cards inside the element using <code>&lt;div&gt;</code> elements with the <code>.card</code> class. Add your content inside the cards, splitting it in <code>.section</code>s using <code>&lt;div&gt;</code> 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.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h3&gt;Card Title&lt;/h3&gt;
&lt;p&gt;Card content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h3&gt;Card Title&lt;/h3&gt;
&lt;p&gt;Card content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li>Check below for section!!!!</li>
<li></li>
</ul>
<hr>
@@ -159,10 +180,10 @@
<h2>Sections &amp; media</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<!-- sample -->
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p></p>
<h3>Sample code</h3>
<pre></pre>
@@ -196,10 +217,10 @@
<h2>Fluid Cards</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<!-- sample -->
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p></p>
<h3>Sample code</h3>
<pre></pre>