sui-components-button
Version:
460 lines (349 loc) • 22.8 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="#">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-Button-1" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button</h2>
</header>
<div class="sg-block-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.</p>
</div>
</div>
</div>
<div id="sui-Button-1.1" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button Primary</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button--primary</code> to create a button using <code><a></code> (outside forms) or <code><button></code> (only inside forms).
<br>
Also add one of the following classes to give it format:
<br>
<code>.Button--primary</code> for a primary action style<br></p>
</div>
<div class="sg-view">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary">Anchor Button primary default</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary">Button primary default</button>
<button class="Button Button--primary is-disabled" disabled>Button primary default disabled</button>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary">Anchor Button primary default</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary">Button primary default</button>
<button class="Button Button--primary is-disabled" disabled>Button primary default disabled</button>
</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-Button-1.2" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button Secondary</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button--secondary</code> to create a button using <code><a></code> (outside forms) or <code><button></code> (only inside forms).
<br></p>
</div>
<div class="sg-view">
<!-- Anchors (links) -->
<a href="#" class="Button Button--secondary">Anchor Button secondary</a>
<!-- Buttons (actions) -->
<button class="Button Button--secondary">Button secondary</button>
<button class="Button Button--secondary is-disabled" disabled>Button secondary disabled</button>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<!-- Anchors (links) -->
<a href="#" class="Button Button--secondary">Anchor Button secondary</a>
<!-- Buttons (actions) -->
<button class="Button Button--secondary">Button secondary</button>
<button class="Button Button--secondary is-disabled" disabled>Button secondary disabled</button>
</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-Button-1.3" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button Small</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button--small</code> to create a button with small size.
<br>
<code>.Button--small</code> for a primary action style<br></p>
</div>
<div class="sg-view">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--small">Anchor Button medium</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--small">Button medium</button>
<button class="Button Button--primary Button--small is-disabled" disabled>Button medium disabled</button>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--small">Anchor Button medium</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--small">Button medium</button>
<button class="Button Button--primary Button--small is-disabled" disabled>Button medium disabled</button>
</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-Button-1.4" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button Large</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button--large</code> to create a button with large size.</p>
</div>
<div class="sg-view">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--large">Anchor Button large</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--large">Button primary default</button>
<button class="Button Button--primary Button--large is-disabled" disabled>Button large disabled</button>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--large">Anchor Button large</a>
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--large">Button primary default</button>
<button class="Button Button--primary Button--large is-disabled" disabled>Button large disabled</button>
</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-Button-1.5" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button-group</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button-group</code> to create a button group structure.
Use class <code>.Button--secondary</code> (or the class for an specific button) for buttons inside buttons group.</p>
</div>
<div class="sg-view">
<div class="Button-group">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<div class="Button-group">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</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-Button-1.6" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button-group active</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.is-active</code> to highlight the selected button.</p>
</div>
<div class="sg-view">
<div class="Button-group">
<button class="Button Button--secondary is-active" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<div class="Button-group">
<button class="Button Button--secondary is-active" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</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-Button-1.7" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button-group disabled</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.is-disabled</code> to mark a button as disabled.</p>
</div>
<div class="sg-view">
<div class="Button-group">
<button class="Button Button--secondary is-disabled" type="button">year</button>
<button class="Button Button--secondary is-disabled" type="button">month</button>
<button class="Button Button--secondary is-disabled" type="button">hour</button>
</div>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<div class="Button-group">
<button class="Button Button--secondary is-disabled" type="button">year</button>
<button class="Button Button--secondary is-disabled" type="button">month</button>
<button class="Button Button--secondary is-disabled" type="button">hour</button>
</div>
</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-Button-1.8" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button group justified</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button-group-justified</code> to display <code>.Button-group</code> full width buttons.</p>
</div>
<div class="sg-view">
<div class="Button-group Button-group--justified">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<div class="Button-group Button-group--justified">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</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-Button-1.9" class="row sg-block">
<div class="col-12">
<header class="sg-block-header">
<h2 class="sg-block-title">Button group centered</h2>
</header>
<div class="sg-block-description">
<p>Use class <code>.Button-group--centered</code> to display <code>.Button-group</code> centered.</p>
</div>
<div class="sg-view">
<div class="Button-group Button-group--centered">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</div>
<pre class="prettyprint linenums lang-html"><code data-language="html">
<div class="Button-group Button-group--centered">
<button class="Button Button--secondary" type="button">year</button>
<button class="Button Button--secondary" type="button">month</button>
<button class="Button Button--secondary" type="button">hour</button>
</div>
</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>