sui-framework
Version:
Open source Frontend Framework
898 lines (776 loc) • 40 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>SUI Framework Styleguides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/styleguide.css">
<link rel="stylesheet" href="public/styles.css">
</head>
<body id="kss-node">
<nav class="sg-menu">
<div class="sg-logo">
<a href="./index.html" id="logo">
<img src="public/media/sui-framework.jpg" alt="SUI Framework">
</a>
</div>
<ul>
<li>
<ul>
<li><a href="./index.html" id="home">Introduction</a></li>
</ul>
</li>
<li>
<ul id="sg-menu">
<li>
<a href="section-button-1.html#sui-Button-1.1" class="js-itemMenu">
Button
</a>
<ul class="sg-submenu">
<li>
<a href="section-button-1-1.html#sui-Button-1.1" class="js-itemMenu " data-link="true">Button Primary</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-2.html#sui-Button-1.2" class="js-itemMenu " data-link="true">Button Secondary</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-3.html#sui-Button-1.3" class="js-itemMenu " data-link="true">Button Small</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-4.html#sui-Button-1.4" class="js-itemMenu " data-link="true">Button Large</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-5.html#sui-Button-1.5" class="js-itemMenu " data-link="true">Button-group</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-6.html#sui-Button-1.6" class="js-itemMenu " data-link="true">Button-group active</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-7.html#sui-Button-1.7" class="js-itemMenu " data-link="true">Button-group disabled</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-8.html#sui-Button-1.8" class="js-itemMenu " data-link="true">Button group justified</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-button-1-9.html#sui-Button-1.9" class="js-itemMenu " data-link="true">Button group centered</a>
<ul class="sg-second-submenu">
</ul>
</li>
</ul>
</li>
<li>
<a href="section-fonts-1.html#sui-Fonts-1.1" class="js-itemMenu">
Fonts
</a>
<ul class="sg-submenu">
<li>
<a href="section-fonts-1-1.html#sui-Fonts-1.1" class="js-itemMenu " data-link="true">Text size</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-fonts-1-2.html#sui-Fonts-1.2" class="js-itemMenu " data-link="true">Text variants</a>
<ul class="sg-second-submenu">
</ul>
</li>
</ul>
</li>
<li>
<a href="section-forms-1.html#sui-Forms-1.1" class="js-itemMenu">
Form
</a>
<ul class="sg-submenu">
<li>
<a href="section-forms-1-1.html#sui-Forms-1.1" class="js-itemMenu " data-link="true">Basic field</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-2.html#sui-Forms-1.2" class="js-itemMenu " data-link="true">Textarea</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-3.html#sui-Forms-1.3" class="js-itemMenu " data-link="true">Basic Pulldown</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-4.html#sui-Forms-1.4" class="js-itemMenu " data-link="true">Input group date</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-5.html#sui-Forms-1.5" class="js-itemMenu " data-link="true">Checkboxes and radiobuttons</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-6.html#sui-Forms-1.6" class="js-itemMenu " data-link="true">Checkboxes and radiobuttons inline</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-forms-1-7.html#sui-Forms-1.7" class="js-itemMenu " data-link="true">StrengthBar</a>
<ul class="sg-second-submenu">
</ul>
</li>
</ul>
</li>
<li>
<a href="section-grid-1.html#sui-Grid-1.1" class="js-itemMenu">
Grid
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-headings-1.html#sui-Headings-1.1" class="js-itemMenu">
Headings
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-lists-1.html#sui-Lists-1.1" class="js-itemMenu">
Lists
</a>
<ul class="sg-submenu">
<li>
<a href="section-lists-1-1.html#sui-Lists-1.1" class="js-itemMenu " data-link="true">List</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-lists-1-2.html#sui-Lists-1.2" class="js-itemMenu " data-link="true">List inline</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-lists-1-3.html#sui-Lists-1.3" class="js-itemMenu " data-link="true">Numbered list</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-lists-1-4.html#sui-Lists-1.4" class="js-itemMenu " data-link="true">Lists with bullets</a>
<ul class="sg-second-submenu">
</ul>
</li>
</ul>
</li>
<li>
<a href="section-notifications-1.html#sui-Notifications-1.1" class="js-itemMenu">
Notifications
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-paragraphs-1.html#sui-Paragraphs-1.1" class="js-itemMenu">
Paragraphs
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-stickers-1.html#sui-Stickers-1.1" class="js-itemMenu">
Stickers
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-tabs.html#sui-Tabs.1" class="js-itemMenu">
Tabs
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-tags-1.html#sui-Tags-1.1" class="js-itemMenu">
Tags
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-tooltip-1.html#sui-Tooltip-1.1" class="js-itemMenu">
Tooltip
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-typography-1.html#sui-Typography-1.1" class="js-itemMenu">
Typography
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-utils-size-1.html#sui-Utils Size-1.1" class="js-itemMenu">
Utils size
</a>
<ul class="sg-submenu">
</ul>
</li>
<li>
<a href="section-utils-spacing-1.html#sui-Utils Spacing-1.1" class="js-itemMenu">
Utils Spacing
</a>
<ul class="sg-submenu">
</ul>
</li>
<!-- <li><a href="#">Pages</a></li>
<li><a href="#">Templates</a></li> -->
</ul>
</li>
</ul>
</nav>
<div class="sg-overlay"></div>
<header class="sg-header">
<a id="burgerMenu" class="sg-icon-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="#f5f5f5"><path d="M0 17v-3.2s0-.1.1-.1h63.8s.1 0 .1.1V17s0 .1-.1.1L0 17zM0 33.5v-3.2s0-.1.1-.1h63.8s.1 0 .1.1v3.2s0 .1-.1.1L0 33.5c0 .1 0 .1 0 0zM0 50.2V47s0-.1.1-.1h63.8s.1 0 .1.1v3.2s0 .1-.1.1L0 50.2c0 .1 0 .1 0 0z"/></g></svg>
</a>
<h1>Components</h1>
</header>
<section class="sg-content">
<div class="sg-wrapper">
<div id="sui-Forms-1" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Form</h2>
</header>
<div class="sg-block-description">
<p>This section contains all the elements that we can use to build a form.</p>
</div>
</div>
</div>
<div id="sui-Forms-1.1" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Basic field</h2>
</header>
<div class="sg-block-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic field <span>(opcional)</span></label>
<input type="text" id="name" placeholder="placeholder...">
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-success">
<label for="name">Basic field with success</label>
<input type="text" id="name">
</li>
<li class="FormGroup is-error">
<label for="name">Basic field with error</label>
<input type="text" id="name">
<p class="FormGroup-info is-error">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic field disabled</label>
<input type="text" id="name" disabled>
</li>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic field <span>(opcional)</span></label>
<input type="text" id="name" placeholder="placeholder...">
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-success">
<label for="name">Basic field with success</label>
<input type="text" id="name">
</li>
<li class="FormGroup is-error">
<label for="name">Basic field with error</label>
<input type="text" id="name">
<p class="FormGroup-info is-error">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic field disabled</label>
<input type="text" id="name" disabled>
</li>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.2" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Textarea</h2>
</header>
<div class="sg-block-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic textarea <span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-error">
<label for="name">Basic textarea<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic textarea disabled<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="" disabled>Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic textarea <span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-error">
<label for="name">Basic textarea<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic textarea disabled<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="" disabled>Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.3" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Basic Pulldown</h2>
</header>
<div class="sg-block-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-error">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic Pulldown disabled</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-error">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic Pulldown disabled</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.4" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Input group date</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.InputGroup--date</code></p>
</div>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-error">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="day">Input group date disabled</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD" disabled>
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM" disabled>
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA" disabled>
</div>
</div>
</li>
</ul>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-error">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="day">Input group date disabled</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD" disabled>
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM" disabled>
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA" disabled>
</div>
</div>
</li>
</ul>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.5" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Checkboxes and radiobuttons</h2>
</header>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<legend>Legend</legend>
<ul>
<li class="FormGroup">
<p class="FormGroup-label">Checkbox List</p>
<ul>
<li class="FormGroup-check">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>
</li>
<li class="FormGroup-check is-error">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>
</li>
<li class="FormGroup-check is-disabled">
<input type="checkbox" id="checkbox3" disabled>
<label for="checkbox3">Checkbox 2</label>
</li>
</ul>
</li>
<li class="FormGroup">
<p class="FormGroup-label">Radio button List</p>
<ul>
<li class="FormGroup-radio">
<input type="radio" id="radio1" name="radio">
<label for="radio1">Radio button field 1</label>
</li>
<li class="FormGroup-radio is-error">
<input type="radio" id="radio2" name="radio">
<label for="radio2">Radio button field 2</label>
</li>
<li class="FormGroup-radio is-disabled">
<input type="radio" id="radio3" name="radio" disabled>
<label for="radio3">Radio button field 2</label>
</li>
</ul>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</ul>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<legend>Legend</legend>
<ul>
<li class="FormGroup">
<p class="FormGroup-label">Checkbox List</p>
<ul>
<li class="FormGroup-check">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>
</li>
<li class="FormGroup-check is-error">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>
</li>
<li class="FormGroup-check is-disabled">
<input type="checkbox" id="checkbox3" disabled>
<label for="checkbox3">Checkbox 2</label>
</li>
</ul>
</li>
<li class="FormGroup">
<p class="FormGroup-label">Radio button List</p>
<ul>
<li class="FormGroup-radio">
<input type="radio" id="radio1" name="radio">
<label for="radio1">Radio button field 1</label>
</li>
<li class="FormGroup-radio is-error">
<input type="radio" id="radio2" name="radio">
<label for="radio2">Radio button field 2</label>
</li>
<li class="FormGroup-radio is-disabled">
<input type="radio" id="radio3" name="radio" disabled>
<label for="radio3">Radio button field 2</label>
</li>
</ul>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</ul>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.6" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Checkboxes and radiobuttons inline</h2>
</header>
<div class="sg-view">
<form action="#" method="post">
<fieldset>
<ul>
<li class="FormGroup-radio--inline">
<input type="radio" checked="checked" id="option1" name="options"><label for="option1">Option 1</label>
</li>
<li class="FormGroup-radio--inline">
<input type="radio" id="option2" name="options"><label for="option2">Option 2</label>
</li>
</ul>
</fieldset>
</form>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<form action="#" method="post">
<fieldset>
<ul>
<li class="FormGroup-radio--inline">
<input type="radio" checked="checked" id="option1" name="options"><label for="option1">Option 1</label>
</li>
<li class="FormGroup-radio--inline">
<input type="radio" id="option2" name="options"><label for="option2">Option 2</label>
</li>
</ul>
</fieldset>
</form>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
<div id="sui-Forms-1.7" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">StrengthBar</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.StrengthBar</code> to create a strength bar.</p>
</div>
<div class="sg-view">
<dl class="StrengthBar">
<dt>Lorem ipsum</dt>
<dd>
<meter max="3" min="0" value="2" high="2" low="2" optimum="3"></meter>
</dd>
</dl>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<dl class="StrengthBar">
<dt>Lorem ipsum</dt>
<dd>
<meter max="3" min="0" value="2" high="2" low="2" optimum="3"></meter>
</dd>
</dl>
</code></pre>
<!-- <p class="small alternative">* {modifier_class} refers to classes are available to use to stylize an element or component </p> -->
</div>
</div>
</div>
</section>
<section class="sg-content sg-footer">
©SUI Framework
</section>
<script src="public/jquery-2.1.0.min.js"></script>
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script src="public/plugins.js"></script>
<script src="public/main.js"></script>
</body>
</html>