Utility module documentation complete
This commit is contained in:
Angelos Chalaris
parent
a0bc3e810c
commit
62c8893e1a
6 changed files with 106 additions and 135 deletions
18
dist/mini-default.css
vendored
18
dist/mini-default.css
vendored
|
|
@ -1479,6 +1479,24 @@ progress.nano {
|
|||
.circular {
|
||||
border-radius: 50% !important; }
|
||||
|
||||
.responsive-margin {
|
||||
margin: 4px !important; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.responsive-margin {
|
||||
margin: 6px !important; } }
|
||||
@media (min-width: 1280px) {
|
||||
.responsive-margin {
|
||||
margin: 8px !important; } }
|
||||
.responsive-padding {
|
||||
padding: 2px 4px !important; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.responsive-padding {
|
||||
padding: 4px 6px !important; } }
|
||||
@media (min-width: 1280px) {
|
||||
.responsive-padding {
|
||||
padding: 6px 8px !important; } }
|
||||
.shadow-none {
|
||||
box-shadow: none !important; }
|
||||
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -493,6 +493,23 @@ $box-shadow-style3-value: // Box shadow value for generic box-shado
|
|||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
|
||||
$grid-large-breakpoint;
|
||||
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding
|
||||
$grid-medium-breakpoint;
|
||||
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding
|
||||
$grid-large-breakpoint;
|
||||
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
||||
4px 6px;
|
||||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||
$float-prefix: 'float'; // Prefix for float classes
|
||||
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
|
|
@ -552,6 +569,12 @@ $center-block-name: 'center-block'; // Class name for center block
|
|||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
|
||||
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
|
||||
$responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
|
||||
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
|
||||
$responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
|
|
|
|||
Loading…
Reference in a new issue