mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +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

26
docs/customization/contextual.html
View File

@@ -79,8 +79,7 @@
<div class="row" style="padding-top: 40px;" id="contextual-title">
<div class="col-sm-12">
<h1>Contextual</h1>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</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>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p><br/>
</div>
</div>
<div class="row">
@@ -88,11 +87,11 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
<p style="text-align:justify">Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p>To customize the <strong>contextual</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>contextual</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>
@@ -103,7 +102,7 @@
<div class="card fluid">
<div class="section"><h2>Text highlighting</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's styling of <code>&lt;mark&gt;</code> elements is highly customizable.</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module's styling of <code>&lt;mark&gt;</code> elements is highly customizable.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -162,7 +161,7 @@
<div class="card fluid">
<div class="section"><h2>Toasts</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining toast messages.</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module's contains custom classes and styles for defining toast messages.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -213,7 +212,7 @@
<div class="card fluid">
<div class="section"><h2>Tooltips</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -261,7 +260,7 @@
</div>
<div class="section">
<h3>Notes:</h3>
<ol>
<ol style="text-align:justify">
<li id="tooltip-note-one">The values used in the tooltip components will only be used if <code>$include-tooltip</code> is set to <code class="fore-tertiary">true</code>.</li>
</ol>
</div>
@@ -274,7 +273,7 @@
<div class="card fluid">
<div class="section"><h2>Text highlighting mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code>&lt;mark&gt;</code> elements (color and style variants).</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code>&lt;mark&gt;</code> elements (color and style variants).</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -358,13 +357,12 @@
</div>
</div>
<!-- TODO -->
<div class="row" id="toast-mixins">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Toast mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (color and style variants).</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (color and style variants).</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -445,7 +443,7 @@
<div class="card fluid">
<div class="section"><h2>Tooltip mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (color and style variants).</p><br/>
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (color and style variants).</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -523,10 +521,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>