hut-base
Version:
Base styles for HTML UI Toolkit
198 lines (170 loc) • 7.56 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUT Base Styles</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<h1>HTML UI Toolkit</h1>
<hr>
<section id="getting-started">
<h2>Getting Started</h2>
<p>
This project contains the base styles for the HTML UI Toolkit.
It is referenced from the other HUT packages to provide a base
to build on. It provides basic styles for typography and layout
for common elements.
</p>
<p>
<a href="https://github.com/conradz/hut-base">
View the code on Github.
</a>
</p>
</section>
<section id="modifying">
<h2>Customizing</h2>
<p>
This is meant to be used as a baseline style, not as a complete
styling framework. You should create your own styling by
overriding the styles for your own use where appropriate.
</p>
</section>
<section id="paragraphs">
<h2>Paragraphs</h2>
<p>
Use paragraphs for body copy. You can change line spacing with
the <code>line-height-base</code> variable.
</p>
<div class="example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue
ligula ac quam viverra nec consectetur ante hendrerit. Donec et
mollis dolor. Praesent et diam eget libero egestas mattis sit
amet vitae augue. Nam tincidunt congue enim, ut porta lorem
lacinia consectetur. Donec ut libero sed arcu vehicula
ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor
nisi id magna consequat sagittis. Curabitur dapibus enim sit
amet elit pharetra tincidunt feugiat nisl imperdiet. Ut
convallis libero in urna ultrices accumsan. Donec sed odio
eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. In rutrum accumsan ultricies.
Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing
ut tristique vitae, sagittis vel odio. Maecenas convallis
ullamcorper ultricies. Curabitur ornare, ligula semper
consectetur sagittis, nisi diam iaculis velit, id fringilla sem
nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante
placerat erat, non tristique elit urna et turpis. Quisque mi
metus, ornare sit amet fermentum et, tincidunt et orci. Fusce
eget orci a orci congue vestibulum. Ut dolor diam, elementum et
vestibulum eu, porttitor vel elit. Curabitur venenatis
pulvinar tellus gravida ornare. Sed et erat faucibus nunc
euismod ultricies ut id justo. Nullam cursus suscipit nisi, et
ultrices justo sodales nec. Fusce venenatis facilisis lectus ac
semper. Aliquam at massa ipsum. Quisque bibendum purus
convallis nulla ultrices ultricies. Nullam aliquam, mi eu
aliquam tincidunt, purus velit laoreet tortor, viverra pretium
nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi
dui.</p>
</div>
</section>
<section id="headings">
<h2>Headings</h2>
<p>
This module provides basic styling for the
<code><h1></code> through <code><h6></code>
elements. You can change the size of the headings by setting
the <code>font-size-h*</code> variables.
</p>
<div class="example">
<h1>h1 Heading</h1>
<p>Heading 1 content</p>
<h2>h2 Heading</h2>
<p>Heading 2 content</p>
<h3>h3 Heading</h3>
<p>Heading 3 content</p>
<h4>h4 Heading</h4>
<p>Heading 4 content</p>
<h5>h5 Heading</h5>
<p>Heading 5 content</p>
<h6>h6 Heading</h6>
<p>Heading 6 content</p>
</div>
</section>
<section id="lists">
<h2>Lists</h2>
<p>Use lists for, well, lists of things.</p>
<h3>Unordered list</h3>
<div class="example">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Another item</li>
<li>Some other list
<ul>
<li>Hey look!</li>
<li>I'm a nested list</li>
</ul>
</li>
</ul>
</div>
<h3>Ordered list</h3>
<div class="example">
<ol>
<li>Test item 1</li>
<li>Second item</li>
<li>Item number 3</li>
<li>Fourth item
<ol>
<li>Lots more items</li>
<li>Even some more</li>
</ol>
</li>
</ol>
</div>
</section>
<section id="buttons">
<h2>Buttons</h2>
<p>Action buttons to do things.</p>
<div class="example">
<p>
<button>OK</button>
<button>Cancel</button>
</p>
<p>
<button>Default</button>
<button class="active">Active</button>
<button class="hover">Hover</button>
<button disabled>Disabled</button>
</p>
<p>
<button>Test</button>
<button>Some Long Text</button>
</p>
</div>
</section>
<section id="inputs">
<h2>Inputs</h2>
<p>
By default, inputs and labels are blocks with 100% width. This
creates vertical forms by default.
</p>
<div class="example">
<label for="text-input">Text Input</label>
<input id="text-input">
<label for="date-input">Date Input</label>
<input id="date-input" type="date">
<label for="email-input">Email Input</label>
<input id="email-input" type="email">
<label><input type="checkbox"> Checkbox</label>
<label><input type="radio" name="radio" checked> Radio 1</label>
<label><input type="radio" name="radio"> Radio 2</label>
</div>
</section>
</body>
</html>