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

Deprecated alert component (documentation)

Browse Source 
Updated documentation to reflect the fact that the alert component is now deprecated. Most things will be properly updated when the toast component is ready.
This commit is contained in:
Angelos Chalaris
2017-05-11 00:47:20 +03:00
parent 7b8ba434b5
commit 2f4d9525e4
5 changed files with 17 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/customization/contextual.html
View File

@@ -72,7 +72,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. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<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/>
</div>
</div>
@@ -81,7 +81,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Almost every piece of content 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>.alert</code> container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also 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>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>
@@ -150,10 +150,11 @@
</div>
</div>
<div class="row" id="alerts">
<!-- TODO -->
<div class="row" id="toasts">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alerts</h2></div>
<div class="section"><h2>Toasts</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining alerts.</p><br/>
<table style="width: 100%" class="striped">
@@ -365,10 +366,11 @@
</div>
</div>
<div class="row" id="alert-mixins">
<!-- TODO -->
<div class="row" id="toast-mixins">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alert mixins</h2></div>
<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 alerts (color and style variants).</p><br/>
<table style="width: 100%" class="striped">