mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-10 16:03:59 +02:00
Code Issues Releases Wiki Activity

Cards module first test commit

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-03 00:38:08 +02:00
parent ad02c60db7
commit a6d2863683
6 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
View File

@@ -284,4 +284,6 @@
- Explained utilities in demo page.
- Deployed demo page with utilities docs.
- 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`.
- 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.

29
docs/v2/index.html
View File

@@ -391,7 +391,34 @@
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
<p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> &amp; <span class="bordered circular">&nbsp;2 </span>.</p>
<ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul>
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p>
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p><br>
<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="card">
<div class="section">
card 2
</div>
<img src="favicon.png" style="height:64px; width: 100%; margin: auto;" class="section media">
<div class="section">
test
</div>
</div>
<div class="card">
card 3
</div>
<div class="card">
card 4
</div>
<div class="card">
card 5
</div>
</div>
</div>
</div>
</div>
</div>