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

Utilities and helper classes complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-02 23:04:56 +02:00
parent ad73495347
commit bd3b5cbc4e
6 changed files with 109 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/v2/DEVLOG.md
View File

@@ -276,4 +276,9 @@
- Created `mini-core/utility` for utilities and helper classes.
- Copied almost verbatim the mixins from *v1* for `make-border-generic` and `make-border-radial-style`. Added variables and calls for mixins in flavor.
- Copied and tweaked `make-breadcrumbs` mixin from *v1*'s extras.
- Changed the way `breacrumbs` are built (use some `em`-based `padding` now instead of some whitespaces).
- Dropped mixin for `make-btn-group`, opened issue (#23) to later build it.
- Added utility mixin `make-hidden` from *v1*, exactly the same.
- Added new utility mixin `make-visually-hidden` for accessible elements that are visually hidden.
- Added `make-floats` and `make-center-block` mixins along with `make-clearfix` mixin from *v1*.
- Explained utilities in demo page.

5
docs/v2/index.html
View File

@@ -388,9 +388,10 @@
<progress class="nano" value="35" max="100"></progress>
<hr>
<h2>Utilities and Helpers <small>Useful classes for common problems</small></h2>
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Most of them are showcased below:</p>
<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>
<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>
</div>
</div>
</div>