sui-framework
Version:
Open source Frontend Framework
323 lines (259 loc) • 13.7 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.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.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.html#sui-Button-1.3" class="js-itemMenu " data-link="true">Button Medium</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Button-1.html#sui-Button-1.4" class="js-itemMenu " data-link="true">Button Large</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.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.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.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.html#sui-Forms-1.2" class="js-itemMenu " data-link="true">Basic Pulldown</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.3" class="js-itemMenu " data-link="true">Textarea</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.4" class="js-itemMenu " data-link="true">Basic group of fields</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.5" class="js-itemMenu " data-link="true">Input group date</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.6" class="js-itemMenu " data-link="true">Checkboxes and radiobuttons</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.7" class="js-itemMenu " data-link="true">Checkboxes and radiobuttons inline</a>
<ul class="sg-second-submenu">
</ul>
</li>
<li>
<a href="section-Forms-1.html#sui-Forms-1.8" 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.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.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.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.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-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-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="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="home-intro">
<div class="intro-content">
<p class="inner">SUI Framework Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat alias optio nulla, ipsa maxime aut doloremque repudiandae reprehenderit commodi sed libero necessitatibus tempora cupiditate veritatis rerum vitae esse perferendis saepe.</p>
</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>