Deprecated alert component (documentation)
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
parent
7b8ba434b5
commit
2f4d9525e4
|
|
@ -75,7 +75,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>
|
||||
|
|
@ -84,7 +84,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><mark></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><mark></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>
|
||||
|
|
@ -153,10 +153,11 @@
|
|||
</div>
|
||||
</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 row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div>
|
||||
|
|
@ -203,42 +204,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="animated-alerts">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Animated alerts</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div>
|
||||
<div class="animated alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
|
||||
<div class="animated alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
|
||||
<div class="animated alert critical" style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p>Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the <code>.animated</code> class on an existing <code>.alert</code> and it shall periodically scale up a little bit to make users notice it.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="alert animated">
|
||||
<h3>Animated alert</h3>
|
||||
</div>
|
||||
<div class="alert urgent animated">
|
||||
<h3>Animated urgent alert</h3>
|
||||
</div>
|
||||
<div class="alert critical animated">
|
||||
<h3>Animated critical alert</h3>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Animated alerts may not display properly on older browsers, especially legacy versions of Internet Explorer.</li>
|
||||
<li>It has been reported that some Webkit-based browsers, such as Chrome, display animated alerts in a very blurry fashion. Despite our best attempts at solving these problems, they seem to be quite persistent and we do not yet know how to fix them. Thus, you might want to hold off on using animated alerts if you think this might be an issue or try to control them using Javascript code to make the animation stop after a short amount of time (i.e. removing the <code>.animated</code> class).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="tooltips">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -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><mark></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><mark></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">
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
||||
<div class="section box-left"><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. More specifically, the <strong>contextual</strong> module contains:</p><ul>
|
||||
<div class="section box-left"><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. More specifically, the <strong>contextual</strong> module contains:</p><ul>
|
||||
<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
|
||||
<li><a href="contextual.html#alerts" class="sublink-1">Classes for creating alerts</a></li>
|
||||
<li><a href="contextual.html#animated-alerts" class="sublink-1">Classes for animating alerts</a></li>
|
||||
|
|
|
|||
|
|
@ -958,9 +958,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO (Also remember to change the Codepen link)-->
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Alerts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Toasts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="alert">
|
||||
<h3>This is an alert</h3>
|
||||
<p>Make sure you read this!</p>
|
||||
|
|
@ -985,27 +986,6 @@
|
|||
<li>Use either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>"</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>"</span></code> attribute for accessible alerts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/NbowoL" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="alert animated">
|
||||
<h3>Animated alert</h3>
|
||||
</div>
|
||||
<div class="alert urgent animated">
|
||||
<h3>Animated urgent alert</h3>
|
||||
</div>
|
||||
<div class="alert critical animated">
|
||||
<h3>Animated critical alert</h3>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Animated alerts are available using the <code>.animated</code> class</li>
|
||||
<li>Compatible with modern browsers, but might cause some problems and bluriness in Webkit-based or older browsers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
|
|
|
|||
|
|
@ -1120,3 +1120,4 @@
|
|||
- Forked old codepens that used `.nano` and `.shadow-...` classes, updated links in `quick_reference` for all of them now.
|
||||
- Updated both `mini-default` and `mini-dark` to use the latest classes built in the `card` module with proper colors.
|
||||
- Deprecated `.alert` and all that comes with it, updated flavors to reflect this. I will update all docs after commiting, just to be on the safe side. By the way, `mini-default` is now `6.12KB` without the deprecated components and with a few of the additions already built-in. Pretty happy with how it's coming along right now!
|
||||
- Updated docs just barely to make sure that the new `.toast` component will easily find a suitable home in them.
|
||||
|
|
|
|||
Loading…
Reference in a new issue