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

Breadcrumbs, utilities and button groups updates

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-11 11:44:03 +02:00
parent eb671c361f
commit 692f3c00ff
7 changed files with 208 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/v2/DEVLOG.md
View File

@@ -407,4 +407,10 @@
- Added modular `box-shadow` for `table` element. Tweaked to be responsive on smaller screens.
- Added modular `box-shadow` for `tabs` container. This might have some minor problems with `border-radius`es.
- Added flexbox-based `button-group` system. Added responsiveness to it and optimized accordingly.
- Deployed live demo with new features.
- Deployed live demo with new features.
## 20161111
- Rebuilt `breadcrumbs` from scratch. Uses flexbox.
- Changed `clearfix`, `center-block`, `hidden` and `visually-hidden` from mixins to normal components.
- Changed the appearance of `button-group`, it will now use `border` and `border-radius` more creatively to get rid of unnecessary and excessive styling.

4
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161109 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/4c473fa3216f1da2d0c140c9274a506de6e2ecd5/dist/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/4c473fa3216f1da2d0c140c9274a506de6e2ecd5/dist/mini-default.min.css"> -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@@ -402,7 +402,7 @@
<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. 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="#">is</a></li><li><a href="#">what</a></li><li><a href="#">breadcrumbs</a></li><li><a href="#">look</a></li><li><span>like</span></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><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. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the <code>.row</code> which acts as the contaienr for the cards has the <code>.cards</code> class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.</p>