mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-12 00:43:57 +02:00
Utility module documentation complete
This commit is contained in:
Angelos Chalaris
@@ -631,3 +631,11 @@
|
||||
- Implemented mixins for responsive `padding` and `margin` in `utility`.
|
||||
- Implemented new `close` icon/button in `utility`.
|
||||
- Documented visibility helpers, floats etc., borders and shadows for `utility`.
|
||||
|
||||
|
||||
## 20161213
|
||||
|
||||
- Used `utility` mixins to create `responsive-margin` and `responsive-padding` classes.
|
||||
- Thoroughly tested `close` and `breadcrumbs`. Found dos and don'ts.
|
||||
- Completed documentation for `utility` module.
|
||||
- Removed `playground.html` page, as it was no longer needed.
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161111 -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini-default.min.css"> -->
|
||||
<!-- Local stylesheet -->
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<style>
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
||||
margin-left: -3px; padding: 2px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-header {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.card.fluid.box-centered {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.row.cards {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card.fluid.box-centered {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="#" class="button">Introduction</a>
|
||||
<a href="#" class="button">Module Overview</a>
|
||||
<a href="#" class="button">Module Demos</a>
|
||||
<a href="#" class="button">Flavors</a>
|
||||
<a href="#" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container" style="padding-top: 20px;">
|
||||
|
||||
<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> & <span class="bordered circular"> 2 </span>.</p>
|
||||
<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>
|
||||
<p>Lorem ipsum dolor sit amet ... <span class="close"></span></p>
|
||||
|
||||
|
||||
<span class="bordered rounded shadow-small">Very stylish element</span>
|
||||
|
||||
Do:
|
||||
|
||||
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -133,7 +133,6 @@
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
@@ -237,30 +236,23 @@
|
||||
<h2>Responsive sizing & spacing classes</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</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">
|
||||
<p>Helper classes for the <code>padding</code> and <code>margin</code> attributes are provided in the form of <code>.responsive-margin</code> and <code>.responsive-padding</code> classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="responsive-padding">Responsive padding</div>
|
||||
<div class="responsive-margin">Responsive margin</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12">
|
||||
<pre><div class="responsive-padding responsive-margin">Responsive padding and margin</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can use both of these classes to make certain element adapt to changes. This could be especially useful for certain grid layouts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -275,29 +267,52 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div>
|
||||
<br>
|
||||
<ul class="breadcrumbs">
|
||||
<li><a href="#">Root</a></li>
|
||||
<li><a href="#">Folder</a></li>
|
||||
<li>File</li>
|
||||
</ul>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a <code><ul></code> element that implements the <code>.breadcrumbs</code> class. Inside this unordered list, add as many <code><li></code> elements as needed to show your hierarchy. You can add links to the list elements, as necessary.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><ul class="breadcrumbs">
|
||||
<li><a href="#">Root</a></li>
|
||||
<li><a href="#">Folder</a></li>
|
||||
<li>File</li>
|
||||
</ul></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li>
|
||||
<li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code><ol></code> element, as it might conflict with some custom styles we've seen people use.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><ol class="breadcrumbs">
|
||||
<li><a href="#">Does</a></li>
|
||||
<li><a href="#">Not</a></li>
|
||||
<li>Work</li>
|
||||
</ol></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> The structure of the breadcrumb component prohibits the use of <code><ol></code> in place of the <code><ul></code> element.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><ul class="breadcrumbs">
|
||||
<li><a href="#">Root</a>
|
||||
<ul class="breadcrumbs">
|
||||
<li><a href="#">Folder</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>File</li>
|
||||
</ul></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid nesting lists, breadcrumbs or a combination of the two inside the <code>.breadcrumbs</code> list, as this might cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,29 +327,32 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div>
|
||||
<br>
|
||||
<p style="text-align:center;"> <span class="close"></span> </p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>To create a close icon, simply add an element implementing the <code>.close</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><span class="close"></span></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="close"></div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can use a handful of other HTML elements instead of the <code><span></code> element showcased in the example above, most commonly <code><div></code> elements.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><button class="close"></button></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> If you want your close icon to behave like a button (i.e. register as a button on screen readers and have the required logic attached to it), you can apply the <code>.close</code> class to a <code><button></code> element instead. You can even apply any of the button color variant classes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user