657db332a9
Completed component, added mixins, used mixins, updated documentation, updated customization documentation, made sure everything works neatly.
231 lines
21 KiB
HTML
231 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Contextual</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, contextual ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
|
|
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
|
.col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; }
|
|
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
.toast.demo { position: relative; top: 2rem; left: calc(50% - 6rem); z-index: 1;} .toast.demo.small { top: 4.5rem; left: calc(50% - 6.75rem);} .toast.demo.large { top: 7.5rem; left: calc(50% - 8rem);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
|
|
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
|
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
|
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
|
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
|
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
|
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
|
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
|
|
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
|
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
|
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
|
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
|
|
</nav> </div>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<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/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<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><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>
|
|
<p>To use the <strong>contextual</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="text-highlighting">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Text highlighting</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<div>
|
|
<p>This is some text with a <mark>highlight</mark>.</p>
|
|
<p>Apart from the primary highlight style, there are also <mark class="secondary">secondary</mark> and <mark class="tertiary">tertiary</mark> styles for highlighting.</p><br>
|
|
<p><mark class="inline-block">If you want to highlight a longer piece of text, without line breaks, you can turn the highlight into an inline-block like you see this piece of text being displayed.</mark></p><br>
|
|
<p>Finally, you can create contextual tags like <mark class="tag">this</mark> or <mark class="tag">7</mark>.</p><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p>To add simple highlights in your text, you can use the <code><mark></code> HTML element. These highlights come pre-styled to use the default primary color, but if you would rather use another color for your highlight you can easily add the <code>.secondary</code> or <code>.tertiary</code> class to a <code><mark></code> element. For longer pieces of text that need highlighting, consider adding the <code>.inline-block</code> class to make them stand out even more. Finally, you can create contextual tags, using the <code>.tag</code> class.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><mark>primary</mark>
|
|
<mark class="secondary">secondary</mark>
|
|
<mark class="tertiary">tertiary</mark>
|
|
<mark class="inline-block">long highlight text...</mark>
|
|
<mark class="tag">tag</mark></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Try to use elements with the <code>.inline-block</code> class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.</li>
|
|
<li><code><mark></code> elements, along with their supporting classes (except for <code>.inline-block</code>) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><mark class="tag tertiary">green tag</mark>
|
|
<span class="fore-tertiary"><!-- or --></span>
|
|
<mark class="inline-block secondary">red chunk</mark></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> You can combine any of the contextual color classes (<code>.secondary</code> or <code>.tertiary</code>) with the <code>.tag</code> or <code>.inline-block</code> class.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><mark class="secondary tertiary">no, no</mark>
|
|
<span class="fore-secondary"><!-- or --></span>
|
|
<mark class="inline-block tag">oh, no</mark></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining two contextual color classes or a <code>.tag</code> and an <code>.inline-block</code>, as these combinations might result in unexpected behavior.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><mark class="inline-block">some
|
|
<mark class="secondary">text</mark>
|
|
</mark></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> You can only nest a <code><mark></code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code><mark></code> using any of the contextual color classes or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code><mark></code> an <code>.inline-block</code> as well.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><mark>some
|
|
<mark class="secondary">text</mark>
|
|
</mark></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using nested <code><mark></code> elements, unless the outer <code><mark></code> element is an <code>.inline-block</code>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="toasts">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<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 style="height: 15rem;">
|
|
<span class="toast demo">I'm a toast message!</span><br/>
|
|
<span class="toast small demo">I'm a small toast message!</span><br/>
|
|
<span class="toast large demo">I'm a large toast message!</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p>Toasts aim to help bridge the gap between web and native applications on mobile devices, by displaying native-looking toast messages. To create a toast, wrap some text inside a <code><span></code> element with the <code>.toast</code> class. Toasts appear at the bottom of the screen on top of everything else. If you want to create smaller or larger toast messasges, you can add the <code>.small</code> or <code>.large</code> classes respectively.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="toast">This is a normal toast message!</span>
|
|
<span class="toast small">This is a large toast message!</span>
|
|
<span class="toast large">This is a small toast message!</span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Toast elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
|
|
<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization.html">customization</a> page.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<pre><span class="toast small large">Not a good toast</span></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining two toast size variants, as this might cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="tooltips">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Tooltips</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<div>
|
|
<br /><p class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</p><br />
|
|
<p class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</p><br />
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p>Tooltips can be used to convey context-sensitive information when the user hovers over some text. To create a tooltip, simply wrap the text you want users to hover over in an element with the <code>.tooltip</code> class (our choice is usually a <code><span></code> element, but your needs may differ) and add an <code><span class="fore-secondary">aria-label</span></code> in that element, setting its value to the content of your tooltip. Tooltips display at the top of the hovered text by default, so if you want to show them below the text, add the <code>.bottom</code> class to them.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</span>
|
|
<span class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Tooltips are built to be accessible and should display properly on screenreaders.</li>
|
|
<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization.html">customization page</a> for instuctions on how to create your own tooltip variants.</li>
|
|
<li>Rembmer to always add the <code><span class="fore-secondary">aria-label</span></code> attribute, otherwise your tooltip will not have any text to show.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module 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>
|
|
</body>
|
|
</html>
|