@squirrel-forge/sass-util
Version:
sass abstracts, mixins, globals and utilities
653 lines • 65.4 kB
HTML
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<title>sass-util examples</title>
<link rel="stylesheet" href="util.min.css">
</head>
<body class="ui-page">
<header class="ui-header">
<div class="ui-wrap ui-wrap--header">
<div class="ui-text">
<h1>
<span class="ui-icon ui-icon--inline" data-icon="acorn"><span></span></span>
<span>squirrel-forge/sass-util</span>
</h1>
</div>
<nav class="ui-text-nav">
<a class="ui-button ui-button--icon ui-button--label-hidden-mc" href="#table-of-contents">
<span class="ui-button__icon ui-icon" data-icon="menu"><span></span></span>
<span class="ui-button__label">Table of Contents</span>
</a>
</nav>
</div>
</header>
<main class="ui-main">
<div class="ui-wrap ui-wrap--main ui-wrap--no-flex">
<section class="ui-section">
<div id="introduction" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text ui-space--mb-m">
<h1>
<span class="ui-icon ui-icon--inline" data-icon="important"><span></span></span>
<span>Introduction</span>
</h1>
</div>
<div class="ui-text ui-space--ml-xl">
<p>The utilities deliver a collection of sass abstracts, mixins, globals and utilities.</p>
<p>Built for the dart-sass <em>@use module syntax</em>, allowing for full and individual feature usage.</p>
<p>The library can be used as a framework, effectively defining most core functionality required for layouts and components.</p>
</div>
</div>
</section>
<section class="ui-section">
<div id="table-of-contents" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text ui-text">
<h2>
<span class="ui-icon ui-icon--inline" data-icon="menu"><span></span></span>
<span>Table of contents</span>
</h2>
<ul class="ui-list ui-list--spaced">
<li>
<a class="ui-button" href="#introduction">
<span class="ui-button__label">Introduction</span>
</a>
</li>
<li>
<a class="ui-button" href="#table-of-contents">
<span class="ui-button__label">Table of Contents</span>
</a>
</li>
<li>
<a class="ui-button" href="#installation">
<span class="ui-button__label">Installation</span>
</a>
</li>
<li>
<a class="ui-button" href="#usage">
<span class="ui-button__label">How to use</span>
</a>
<ul class="ui-list ui-list--spaced">
<li>
<a class="ui-button" href="#library-import">
<span class="ui-button__label">Full library</span>
</a>
</li>
<li>
<a class="ui-button" href="#module-import">
<span class="ui-button__label">Individual modules</span>
</a>
</li>
</ul>
</li>
<li>
<a class="ui-button" href="#examples">
<span class="ui-button__label">Examples</span>
</a>
<ul class="ui-list ui-list--spaced">
<li>
<a class="ui-button" href="#examples-icons">
<span class="ui-button__label">Icons</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-buttons-and-tokens">
<span class="ui-button__label">Buttons and tokens</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-nav-containers">
<span class="ui-button__label">Basic navigation containers</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-columns">
<span class="ui-button__label">Simple columns</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-tooltips">
<span class="ui-button__label">Tooltips</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-fluid-pictures">
<span class="ui-button__label">Fluid pictures and images</span>
</a>
</li>
<li>
<a class="ui-button" href="#examples-normalization">
<span class="ui-button__label">Normalizing</span>
</a>
</li>
</ul>
</li>
<li>
<a class="ui-button" href="#notes">
<span class="ui-button__label">Notes</span>
</a>
<ul class="ui-list ui-list--spaced">
<li>
<a class="ui-button" href="#use-syntax">
<span class="ui-button__label">@use syntax</span>
</a>
</li>
<li>
<a class="ui-button" href="#reset-configs">
<span class="ui-button__label">Resetting configs</span>
</a>
</li>
<li>
<a class="ui-button" href="#change-config">
<span class="ui-button__label">Changing configs</span>
</a>
</li>
<li>
<a class="ui-button" href="#sass-maps">
<span class="ui-button__label">SASS maps</span>
</a>
</li>
</ul>
</li>
<li>
<a class="ui-button" href="#comments">
<span class="ui-button__label">Comments</span>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="ui-section">
<div id="installation" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h3>Installation</h3>
<p>Run to install:</p>
<pre><code data-code="terminal">npm i @squirrel-forge/sass-util</code></pre>
</div>
</div>
</section>
<section class="ui-section">
<div id="usage" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h3>How to use</h3>
<p>Make use of your IDE's autocompletion and checkout the <a href="../example/util.scss">example implementation</a> and the <a href="util.css">generated output</a>.</p>
<p>Note that the <em>@use</em> syntax works differently than the classic <em>@import</em>, check the <a href="#use-syntax">use syntax notes</a> for relevant details and or refer to the <a href="https://sass-lang.com/documentation/at-rules/use" target="_blank">official sass docs</a>.</p>
</div>
</div>
</section>
<section class="ui-section">
<div id="library-import" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h3>Full library import</h3>
<p>Import the library with custom namespace:</p>
<pre><code data-code="scss">@use '~@squirrel-forge/sass-util' as util;</code></pre>
<p>Import the library with custom variable settings:</p>
<pre><code data-code="scss">@use '~@squirrel-forge/sass-util' as util with (
$config-value: 'string',
);</code></pre>
<p>When using the full package, make use of the namespacing to select from the individual submodules.</p>
<pre><code data-code="scss">@include util.media-config((
custom-breakpoint: 'screen and (max-width: 10rem)',
));
@include util.media-query('custom-breakpoint') {
// @content
}</code></pre>
<p>Not recommended, but possible: If you wish to use modules more than once and require configuration changes, then you need to modify the namespaces variables directly, but keep in mind that the values change permanently even for other contexts and need to be reset manually, since modules are only loaded once.</p>
</div>
</div>
</section>
<section class="ui-section">
<div id="module-import" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h3>Loading individual modules</h3>
<p>Import a module directly:</p>
<pre><code data-code="scss">@use '~@squirrel-forge/sass-util/media';</code></pre>
<p>When using submodules directly, namespacing is shorter, without the parent prefixes, this way you have granular control over which modules to use.</p>
<pre><code data-code="scss">@include media.config((
custom-breakpoint: 'screen and (max-width: 10rem)',
));
@include media.query('custom-breakpoint') {
// @content
}</code></pre>
</div>
</div>
</section>
<section class="ui-section">
<div id="examples" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h3>Examples</h3>
<p>Following, some examples, none of these claim to be complete in the display of their abilities and shortcomings.</p>
</div>
</div>
</section>
<section class="ui-section">
<div id="examples-icons" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h4>Icons</h4>
<p>Following all available CSS styled icons.</p>
<p><strong>Actions and status:</strong></p>
<div class="ui-wrap">
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Action: create</span>
<span class="ui-button__icon ui-icon" data-icon="action-create"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Action: delete</span>
<span class="ui-button__icon ui-icon" data-icon="action-delete"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Action: edit</span>
<span class="ui-button__icon ui-icon" data-icon="action-edit"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Action: export</span>
<span class="ui-button__icon ui-icon" data-icon="action-export"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Action: import</span>
<span class="ui-button__icon ui-icon" data-icon="action-import"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Close</span>
<span class="ui-button__icon ui-icon" data-icon="close"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Close small</span>
<span class="ui-button__icon ui-icon" data-icon="close-small"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Add</span>
<span class="ui-button__icon ui-icon" data-icon="add"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Remove</span>
<span class="ui-button__icon ui-icon" data-icon="remove"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Download</span>
<span class="ui-button__icon ui-icon" data-icon="download"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Upload</span>
<span class="ui-button__icon ui-icon" data-icon="upload"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Check</span>
<span class="ui-button__icon ui-icon" data-icon="check"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Important</span>
<span class="ui-button__icon ui-icon" data-icon="important"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Unknown</span>
<span class="ui-button__icon ui-icon" data-icon="unknown"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Info</span>
<span class="ui-button__icon ui-icon" data-icon="info"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Menu</span>
<span class="ui-button__icon ui-icon" data-icon="menu"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Undo</span>
<span class="ui-button__icon ui-icon" data-icon="undo"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Redo</span>
<span class="ui-button__icon ui-icon" data-icon="redo"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Save</span>
<span class="ui-button__icon ui-icon" data-icon="save"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Update</span>
<span class="ui-button__icon ui-icon" data-icon="update"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Trash</span>
<span class="ui-button__icon ui-icon" data-icon="trash"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Trash: full</span>
<span class="ui-button__icon ui-icon" data-icon="trash-full"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Settings</span>
<span class="ui-button__icon ui-icon" data-icon="settings"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Stats</span>
<span class="ui-button__icon ui-icon" data-icon="stats"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">User</span>
<span class="ui-button__icon ui-icon" data-icon="user"><span></span></span>
</span>
</div>
<p><strong>Arrows and rotation:</strong></p>
<div class="ui-wrap">
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow</span>
<span class="ui-button__icon ui-icon" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 45</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-45" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 90</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-90" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 135</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-135" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 180</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-180" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 225</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-225" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 270</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-270" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow: rotate 315</span>
<span class="ui-button__icon ui-icon ui-icon--rotate-315" data-icon="arrow"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow capped</span>
<span class="ui-button__icon ui-icon" data-icon="arrow-capped"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow double</span>
<span class="ui-button__icon ui-icon" data-icon="arrow-double"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow simple</span>
<span class="ui-button__icon ui-icon" data-icon="arrow-simple"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Arrow small</span>
<span class="ui-button__icon ui-icon" data-icon="arrow-small"><span></span></span>
</span>
</div>
<p><strong>Player controls and flip axis:</strong></p>
<div class="ui-wrap">
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Fullscreen</span>
<span class="ui-button__icon ui-icon" data-icon="fullscreen"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Minimize</span>
<span class="ui-button__icon ui-icon" data-icon="minimize"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Fastforward: flipped x</span>
<span class="ui-button__icon ui-icon ui-icon--flip-x" data-icon="fastforward"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Stop</span>
<span class="ui-button__icon ui-icon" data-icon="stop"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Pause</span>
<span class="ui-button__icon ui-icon" data-icon="pause"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Play</span>
<span class="ui-button__icon ui-icon" data-icon="play"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Fastforward</span>
<span class="ui-button__icon ui-icon" data-icon="fastforward"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Replay</span>
<span class="ui-button__icon ui-icon" data-icon="replay"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Replay: flipped y</span>
<span class="ui-button__icon ui-icon ui-icon--flip-y" data-icon="replay"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Replay: flipped x + y</span>
<span class="ui-button__icon ui-icon ui-icon--flip-x ui-icon--flip-y" data-icon="replay"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Sound</span>
<span class="ui-button__icon ui-icon" data-icon="sound"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Sound: muted</span>
<span class="ui-button__icon ui-icon" data-icon="sound-muted"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Sound: none</span>
<span class="ui-button__icon ui-icon" data-icon="sound-none"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Sound: on</span>
<span class="ui-button__icon ui-icon" data-icon="sound-on"><span></span></span>
</span>
</div>
<p><strong>Special, custom image and font icons:</strong></p>
<div class="ui-wrap">
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">siux</span>
<span class="ui-button__icon ui-icon" data-icon="siux"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Acorn</span>
<span class="ui-button__icon ui-icon" data-icon="acorn"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">github</span>
<span class="ui-button__icon ui-icon" data-icon="github"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">npm</span>
<span class="ui-button__icon ui-icon" data-icon="npm"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">Font</span>
<span class="ui-button__icon ui-icon" data-icon="font"><span>☰</span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">sqf</span>
<span class="ui-button__icon ui-icon ui-icon--img" data-icon="sqf"><span></span></span>
</span>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__label">sqf inverted</span>
<span class="ui-button__icon ui-icon ui-icon--img ui-icon--invert" data-icon="sqf"><span></span></span>
</span>
</div>
</div>
</div>
</section>
<section class="ui-section">
<div id="examples-buttons-and-tokens" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h4>Button and token variants</h4>
</div>
<nav class="ui-text-nav ui-text-nav--vertical">
<ul>
<li>
<span class="ui-button ui-button--icon ui-button--text ui-button--max-width ui-button--static">
<span class="ui-button__icon ui-icon" data-icon="stats" data-align="top"><span></span></span>
<span class="ui-button__label">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</span>
</li>
<li>
<a class="ui-button ui-button--icon ui-button--text" href="#">
<span class="ui-button__icon ui-icon" data-icon="stats"><span></span></span>
<span class="ui-button__label">Text/Borderless</span>
</a>
<button class="ui-button ui-button--icon ui-button--text" disabled type="button">
<span class="ui-button__icon ui-icon" data-icon="stats"><span></span></span>
<span class="ui-button__label">Disabled</span>
</button>
<span class="ui-button ui-button--text ui-button--static">
<span class="ui-button__label">Static/token</span>
</span>
</li>
<li>
<span class="ui-button ui-button--icon ui-button--primary ui-button--max-width ui-button--static">
<span class="ui-button__icon ui-icon" data-icon="info" data-align="top"><span></span></span>
<span class="ui-button__label">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</span>
</li>
<li>
<a class="ui-button ui-button--icon ui-button--primary" href="#">
<span class="ui-button__icon ui-icon" data-icon="info"><span></span></span>
<span class="ui-button__label">Default/primary</span>
</a>
<button class="ui-button ui-button--icon ui-button--primary" disabled type="button">
<span class="ui-button__icon ui-icon" data-icon="info"><span></span></span>
<span class="ui-button__label">Disabled</span>
</button>
<span class="ui-button ui-button--primary ui-button--static">
<span class="ui-button__label">Static/token</span>
</span>
</li>
<li>
<span class="ui-button ui-button--icon ui-button--success ui-button--max-width ui-button--static">
<span class="ui-button__icon ui-icon" data-icon="check" data-align="top"><span></span></span>
<span class="ui-button__label">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</span>
</li>
<li>
<a class="ui-button ui-button--icon ui-button--success" href="#">
<span class="ui-button__icon ui-icon" data-icon="check"><span></span></span>
<span class="ui-button__label">Success</span>
</a>
<button class="ui-button ui-button--icon ui-button--success" disabled type="button">
<span class="ui-button__icon ui-icon" data-icon="check"><span></span></span>
<span class="ui-button__label">Disabled</span>
</button>
<span class="ui-button ui-button--success ui-button--static">
<span class="ui-button__label">Static/token</span>
</span>
</li>
<li>
<span class="ui-button ui-button--icon ui-button--notice ui-button--max-width ui-button--static">
<span class="ui-button__icon ui-icon" data-icon="unknown" data-align="top"><span></span></span>
<span class="ui-button__label">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</span>
</li>
<li>
<a class="ui-button ui-button--icon ui-button--notice" href="#">
<span class="ui-button__icon ui-icon" data-icon="unknown"><span></span></span>
<span class="ui-button__label">Warning</span>
</a>
<button class="ui-button ui-button--icon ui-button--notice" disabled type="button">
<span class="ui-button__icon ui-icon" data-icon="unknown"><span></span></span>
<span class="ui-button__label">Disabled</span>
</button>
<span class="ui-button ui-button--notice ui-button--static">
<span class="ui-button__label">Static/token</span>
</span>
</li>
<li>
<span class="ui-button ui-button--icon ui-button--error ui-button--max-width ui-button--static">
<span class="ui-button__icon ui-icon" data-icon="important" data-align="top"><span></span></span>
<span class="ui-button__label">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</span>
</li>
<li>
<a class="ui-button ui-button--icon ui-button--error" href="#">
<span class="ui-button__icon ui-icon" data-icon="important"><span></span></span>
<span class="ui-button__label">Error</span>
</a>
<button class="ui-button ui-button--icon ui-button--error" disabled type="button">
<span class="ui-button__icon ui-icon" data-icon="important"><span></span></span>
<span class="ui-button__label">Disabled</span>
</button>
<span class="ui-button ui-button--error ui-button--static">
<span class="ui-button__label">Static/token</span>
</span>
</li>
</ul>
</nav>
</div>
</section>
<section class="ui-section">
<div id="examples-nav-containers" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h4>Basic navigation containers</h4>
</div>
<nav class="ui-text-nav ui-text-nav--block ui-text-nav--center-m ui-text-nav--horizontal ui-text-nav--vertical-m">
<ul>
<li>
<button class="ui-button" type="button">
<span class="ui-button__label">Item 1</span>
</button>
</li>
<li>
<button class="ui-button" type="button">
<span class="ui-button__label">Item 2</span>
</button>
</li>
<li>
<button class="ui-button" type="button">
<span class="ui-button__label">Item 3</span>
</button>
</li>
<li>
<button class="ui-button" type="button">
<span class="ui-button__label">Item 4</span>
</button>
</li>
</ul>
</nav>
</div>
</section>
<section class="ui-section">
<div id="examples-columns" class="ui-section__anchor"></div>
<div class="ui-wrap ui-wrap--section ui-wrap--vertical">
<div class="ui-text">
<h4>Columns</h4>
<p>Columns can be used with any content and simple responsive options.</p>
<div class="ui-columns ui-columns--offset ui-columns--offset-with-margin ui-columns--t-2 ui-columns--d-3">
<div class="ui-columns__column">
<h5>Column 1</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="ui-columns__column">
<h5>Column 2</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="ui-columns__column">
<h5>Column 3</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="ui-columns__column">
<h5>Column 4</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="ui-columns__column">
<h5>Column 5</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="ui-columns__column">
<h5>Column 6</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volupt