mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00
Code Issues Releases Wiki Activity

Documentation update

Browse Source 
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
This commit is contained in:
Angelos Chalaris
2017-05-22 17:05:40 +03:00
parent a7fc3f827e
commit 0afb5277ad
29 changed files with 476 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/customization/progress.html
View File

@@ -81,8 +81,7 @@
<div class="row" style="padding-top: 40px;" id="progress-title">
<div class="col-sm-12">
<h1>Progress</h1>
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
<p style="text-align:justify">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p><br/>
</div>
</div>
<div class="row">
@@ -90,11 +89,11 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The <strong>progress</strong> module provides you with two essential tools to communicate this information: the <code>&lt;progress&gt;</code> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the <code>.spinner-donut</code> class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.</p><br>
<p style="text-align:justify">Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The <strong>progress</strong> module provides you with two essential tools to communicate this information: the <code>&lt;progress&gt;</code> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the <code>.spinner-donut</code> class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p>To customize the <strong>progress</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
<p style="text-align:justify">To customize the <strong>progress</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>
@@ -105,7 +104,7 @@
<div class="card fluid">
<div class="section"><h2>Progress bar</h2></div>
<div class="section">
<p>The <strong>progress</strong> module's styling of <code>&lt;progress&gt;</code> elements is highly customizable.</p><br/>
<p style="text-align:justify">The <strong>progress</strong> module's styling of <code>&lt;progress&gt;</code> elements is highly customizable.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -160,7 +159,7 @@
<div class="card fluid">
<div class="section"><h2>Donut spinner</h2></div>
<div class="section">
<p>The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
<p style="text-align:justify">The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -199,7 +198,7 @@
<div class="card fluid">
<div class="section"><h2>Progress bar mixins</h2></div>
<div class="section">
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code>&lt;progress&gt;</code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
<p style="text-align:justify">The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code>&lt;progress&gt;</code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -311,7 +310,7 @@
<div class="card fluid">
<div class="section"><h2>Donut spinner mixins</h2></div>
<div class="section">
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
<p style="text-align:justify">The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -381,10 +380,10 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
<footer style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>