osseous
Version:
A bony CSS framework without guts.
953 lines (886 loc) • 69.8 kB
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Austin Delamar">
<meta name="keywords" content="osseous,osseous.css,framework,bones,skeleton,skull,html,css,javascript,js">
<meta name="description" content="A bony CSS framework without guts." />
<meta name="robots" content="all">
<!-- Open Graph data -->
<meta property="og:url" content="https://amdelamar.com/osseous/">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Osseous">
<meta property="og:image" content="https://amdelamar.com/osseous/assets/img/skull-200x200.png">
<meta property="og:description" content="A bony CSS framework without guts.">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="https://amdelamar.com/osseous/">
<meta name="twitter:creator" content="@amdelamar">
<meta name="twitter:title" content="Osseous">
<meta name="twitter:description" content="A bony CSS framework without guts.">
<meta name="twitter:image" content="https://amdelamar.com/osseous/assets/img/skull-200x200.png">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Osseous">
<meta itemprop="description" content="A bony CSS framework without guts.">
<meta itemprop="image" content="https://amdelamar.com/osseous/assets/img/skull-200x200.png">
<link rel="icon" type="image/x-icon" href="../assets/img/skull-32x32.png">
<link rel="stylesheet" href="../3.0.0/osseous.css">
<link rel="stylesheet" href="../assets/icomoon/icomoon.css">
<link rel="stylesheet" href="../assets/highlightjs/default.min.css">
<title>Osseous - A bony CSS framework without guts</title>
</head>
<body>
<!-- Sidebar -->
<input type="checkbox" id="toggleSidebar" style="display: none;">
<nav id="sidebar" class="border-right shadow-right">
<div class="nav-item-close">
<label class="clickable" for="toggleSidebar">
<span class="float-right" title="Close Menu" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2.757 14.657L8 9.414l5.243 5.243 1.414-1.414L9.414 8l5.243-5.243-1.414-1.414L8 6.586 2.757 1.343 1.343 2.757 6.586 8l-5.243 5.243z" fill-rule="evenodd"></path></svg>
</span>
</label>
</div>
<div class="nav-list text-center">
<a class="nav-item" href="#download">Download</a>
<details class="nav-item">
<summary>Docs</summary>
<div class="nav-list padding margin-top border-top border-bottom">
<a class="nav-item" href="#root">Root Variables</a>
<a class="nav-item" href="#typography">Typography</a>
<a class="nav-item" href="#columns">Columns</a>
<a class="nav-item" href="#tables">Tables</a>
<a class="nav-item" href="#buttons">Buttons</a>
<a class="nav-item" href="#tabs">Tabs</a>
<a class="nav-item" href="#dropdowns">Dropdowns</a>
<a class="nav-item" href="#forms">Forms</a>
<a class="nav-item" href="#nav-bar">Navbar</a>
<a class="nav-item" href="#side-bar">Sidebar</a>
<a class="nav-item" href="#utility">Utility Classes</a>
</div>
</details>
<a class="nav-item" href="#about">About</a>
</div>
<div class="padding-top-large full-width text-center">
<p class="text-small"><em>© <a href="https://amdelamar.com">AustinDelamar</a> - 2017-2018</em></p>
</div>
</nav>
<!-- Navbar -->
<nav id="navbar">
<div id="navbar-body" class="container">
<div class="nav-item-logo">
<a href="#"><span class="text-medium text-uppercase text-wide">Osseous</span></a>
</div>
<div class="nav-small-menu">
<label class="clickable" for="toggleSidebar">
<span class="nav-item" title="Open Menu">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h16v2H0V7zm0-6h16v2H0V1zm0 12h16v2H0v-2z" fill-rule="evenodd"></path></svg>
</span>
</label>
</div>
<div class="nav-group nav-large-menu text-bold">
<a class="nav-item" href="#download">Download</a>
<div class="nav-item dropdown">
<a href="#docs">Docs ▾</a>
<div class="dropdown-body border background-lightgrey text-left">
<a href="#root">Root Variables</a>
<a href="#typography">Typography</a>
<a href="#columns">Columns</a>
<a href="#tables">Tables</a>
<a href="#buttons">Buttons</a>
<a href="#tabs">Tabs</a>
<a href="#dropdowns">Dropdowns</a>
<a href="#forms">Forms</a>
<a href="#nav-bar">Navbar</a>
<a href="#side-bar">Sidebar</a>
<a href="#utility">Utility Classes</a>
</div>
</div>
<a class="nav-item" href="#about">About</a>
</div>
</div>
</nav>
<!-- Landing logo, title, and subtitle. -->
<header class="row padding-top-large margin-top-large">
<div class="container text-center">
<div class="twelve columns">
<img class="round" src="../assets/img/skull-382x382.png" width="200" height="200" alt="Banner" title="Photo Credit: Google Images of all places." />
</div>
<div class="twelve columns">
<h1 class="text-uppercase text-thinner text-wide">Osseous</h1>
<p>A bony CSS framework without guts. <sup class="text-thin">v3.0.0</sup></p>
<p>
<a class="button button-primary" href="#download"><span class="icon-embed text-medium margin-right"></span>Download</a>
<a class="button button-secondary" href="https://github.com/amdelamar/osseous/"><span class="icon-github text-medium margin-right"></span>View on GitHub</a>
<a class="button" href="https://github.com/amdelamar/osseous/issues"><span class="icon-bug text-medium margin-right"></span>Report Issue</a>
</p>
</div>
</div>
</header>
<!-- Main Content -->
<article>
<!-- Description Section -->
<div id="description" class="row section">
<div class="container">
<h2>What is it?</h2>
<p>
Osseous is a small CSS framework that only includes some (bony) elements to grow a website. Its meant to be a skeleton
that you can add additional guts (features) on top of, as you require them. Rather than importing a massive framework
and not utilizing all of the features.
</p>
<div class="row">
<div class="five columns offset-by-one">
<h4 class="text-center">What's Included?</h4>
<ul class="text-left">
<li>Typography</li>
<li>Columns, Rows</li>
<li>Tables</li>
<li>Buttons, Forms, Inputs</li>
<li>Tabs</li>
<li>Dropdowns</li>
<li>Navbar</li>
<li>Sidebar</li>
<li>and extra Utility Classes</li>
</ul>
</div>
<div class="five columns">
<h4 class="text-center">What's Missing?</h4>
<ul class="text-left">
<li>Alerts</li>
<li>Flexbox Grid --> Try <a href="https://evgenyrodionov.github.io/flexboxgrid2/" target="_blank">Flexboxgrid2</a></li>
<li>Cards</li>
<li>Carousel --> Try <a href="http://slidesjs.com/" target="_blank">Slides.js</a></li>
<li>Icons --> See <a href="https://icomoon.io" target="_blank">Icomoon.io</a> / <a href="https://feathericons.com/" target="_blank">Feathericons</a></li>
<li>Modals / Popovers --> See <a href="https://drublic.github.io/css-modal/" target="_blank">CSS-modal</a></li>
<li>Tooltips</li>
<li>Animations --> Try <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
<li>Code Colors --> Use <a href="https://highlightjs.org/" target="_blank">Highlight.js</a></li>
</ul>
</div>
</div>
<h4>Osseous is Best used for...</h4>
<p>Small projects, portfolios, blogs, wikis, and prototypes. By itself, it wouldn't be a good fit for large projects, such as
e-commerce, news, SPAs, and responsive webapps. Websites that require all the meat on the bones. However, you could easily add
on to this framework to fit your specific needs. Feel free to copy and edit it. (<a href="#license">MIT Licensed</a>).</p>
</div>
</div>
<!-- Download Section -->
<div id="download" class="row section">
<div class="container">
<h2>Download</h2>
<p>
You can add Osseous to your web project using a package manager, cdn links, or just download the files directly.
</p>
<h4>Package Managers</h4>
<div class="row margin-bottom">
<div class="six columns">
<pre><code class="bash">npm install osseous
# or
yarn add osseous
# or
bower install osseous</code></pre>
</div>
</div>
<h4>CDN</h4>
<pre><code class="html"><!-- Cloudflare: -->
<link rel="stylesheet" href="https://amdelamar.com/osseous/3.0.0/osseous.min.css">
<!-- Or unpkg: -->
<link rel="stylesheet" href="https://unpkg.com/osseous/docs/3.0.0/osseous.min.css">
<!-- Or jsDelivr: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/osseous/docs/3.0.0/osseous.min.css">
</code></pre>
<p>Optionally, use with subresource integrity checks like so:</p>
<pre><code class="html"><!-- Cloudflare with SRI check: -->
<link rel="stylesheet" href="https://amdelamar.com/osseous/3.0.0/osseous.min.css" integrity="sha384-TODO" crossorigin="anonymous">
<!-- Or unpkg: -->
<link rel="stylesheet" href="https://unpkg.com/osseous/docs/3.0.0/osseous.min.css" integrity="sha384-TODO" crossorigin="anonymous">
<!-- Or jsDelivr: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/osseous/docs/3.0.0/osseous.min.css" integrity="sha384-TODO" crossorigin="anonymous">
</code></pre>
<h4>Compiled Files</h4>
<p>Download the zipped CSS files and modify them to your liking.</p>
<p>
<a href="https://github.com/amdelamar/osseous/releases/download/3.0.0/Osseous-3.0.0.zip" class="button button-primary">
<span class="icon-embed text-medium margin-right"></span>Download ZIP</a> (
<code class="text-thin">v3.0.0</code> / 11 May 2019 / <code class="text-thin">11KB</code> )
</p>
<h4>Source Files</h4>
<p>View the source CSS files on GitHub. You can contribute or open issues. Please be sure to star it!</p>
<p>
<a class="button button-secondary" href="https://github.com/amdelamar/osseous/"><span class="icon-github text-medium margin-right"></span>View Source</a>
<br/><br/>
<span>Looking for older versions? Browse here: <a href="./1.2.0/" class="text-secondary">1.2.0</a> / <a href="./2.5.1/" class="text-secondary">2.5.1</a></span>
</p>
</div>
</div>
<!-- Docs Section -->
<div id="docs" class="row section">
<div class="container">
<h2>Documentation</h2>
<p>
Follow the examples below as a reference and documentation of this bony framework.
</p>
</div>
<div id="root" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Root Variables</h3>
<p>The default fonts and colors are in the global <b>root</b> for easy editing.
The default font is <code>-apple-system,BlinkMacSystemFont</code> but you can change this
by overriding the root variable: <code>--font-default</code>. The default font for monospace
elements is <code>SFMono-Regular</code>. And the default background color is white. but again,
you can override these easily to your own liking.
</p>
<pre><code class="css">:root {
--primary:rgb(51,195,240); /*#33c3f0*/
--danger:rgb(239,50,91); /*#ef325b*/
--success:rgb(50,239,135); /*#32ef87*/
--secondary:rgb(85,85,85); /*#555*/
--tertiary:rgb(223,223,223); /*#dfdfdf*/
--black:rgb(34,34,34); /*#222*/
--white:rgb(255,255,255); /*#fff*/
--light-grey:rgb(247,247,247); /*#f7f7f7*/
--highlight:rgb(239,239,50); /*#efef32*/
--background-color:var(--white);
--border-color:var(--tertiary);
--font-color:var(--black);
--table-highlight:var(--light-grey);
--font-default:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-monospace:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New",monospace;
}</code></pre>
<p>Override the defaults by providing new variable values.</p>
<pre><code class="html"><style>:root {
--background-color:rgb(200,50,80); /* New Background Color */
--font-default:"Comic Sans"; /* New font */
}</style></code></pre>
</div>
</div>
</div>
<div id="typography" class="row section">
<div class="container">
<div class="six columns">
<h3>Typography</h3>
<p>
<code><p></code>This is a paragraph.<br/>
<code><a></code>This is an <a href="#about">anchor</a>.<br/>
<code><b></code>This is <b>bolded</b>.<br/>
<code><i></code>This is <i>italic</i>.<br/>
<code><u></code>This is <u>underlined</u>.<br/>
<code><s></code>This is <s>striked</s>.<br/>
<code><small></code><small>This is a small.</small><br/>
<code><sup></code>This is a supersript<sup>10</sup> and <code><sub></code> subscript<sub>10</sub>.<br/>
<blockquote>This is a <code><blockquote></code></blockquote>
<code><mark></code>This is <mark>highlighted</mark>.<br/>
<code><abbr></code>This is an <abbr title="abbreviation">abbr</abbr>.<br/>
</p>
</div>
<div class="six columns">
<br/><br/>
<h1 style="display:inline">Heading 1</h1><code><h1></code><br/>
<h2 style="display:inline">Heading 2</h2><code><h2></code><br/>
<h3 style="display:inline">Heading 3</h3><code><h3></code><br/>
<h4 style="display:inline">Heading 4</h4><code><h4></code><br/>
<h5 style="display:inline">Heading 5</h5><code><h5></code><br/>
<h6 style="display:inline">Heading 6</h6><code><h6></code><br/>
</div>
<div class="twelve columns">
<p><code><code></code> This is some code. <code>System.out.println("Code!");</code>
</p>
<pre><code class="html"><pre><code>
public static void main(String args[]) {
System.out.println("This is a code block.");
System.exit(0);
}
</code></pre></code></pre>
<p>Add the third-party library, <a target="_blank" href="https://highlightjs.org/" title="Highlightjs">Highlight.js</a>, to easily colorize the code syntax.</p>
</div>
</div>
</div>
<div id="columns" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Columns</h3>
<p>Use the <code>row</code> and <code>columns</code> classes together to organize content into grids.
The values start from one and go up to twelve across. They also resize automatically for smaller screens
at the 640px mark.</p>
<div class="row text-center">
<div class="twelve columns border round">TWELVE</div>
</div>
<div class="row text-center">
<div class="one columns border round">ONE</div><div class="eleven columns border round">ELEVEN</div>
</div>
<div class="row text-center">
<div class="two columns border round">TWO</div><div class="ten columns border round">TEN</div>
</div>
<div class="row text-center">
<div class="three columns border round">THREE</div><div class="nine columns border round">NINE</div>
</div>
<div class="row text-center">
<div class="four columns border round">FOUR</div><div class="eight columns border round">EIGHT</div>
</div>
<div class="row text-center">
<div class="five columns border round">FIVE</div><div class="seven columns border round">SEVEN</div>
</div>
<div class="row text-center">
<div class="six columns border round">SIX</div><div class="six columns border round">SIX</div>
</div>
<div class="row text-center">
<div class="seven columns border round">SEVEN</div><div class="five columns border round">FIVE</div>
</div>
<div class="row text-center">
<div class="eight columns border round">EIGHT</div><div class="four columns border round">FOUR</div>
</div>
<div class="row text-center">
<div class="nine columns border round">NINE</div><div class="three columns border round">THREE</div>
</div>
<div class="row text-center">
<div class="ten columns border round">TEN</div><div class="two columns border round">TWO</div>
</div>
<div class="row text-center">
<div class="eleven columns border round">ELEVEN</div><div class="one columns border round">ONE</div>
</div>
<div class="row text-center">
<div class="twelve columns border round">TWELVE</div>
</div>
<pre><code class="html"><div class="row">
<div class="three columns">
<h2>This is a quarter-width column.</h2>
</div>
<div class="six columns">
<h2>This is column is half-width.</h2>
</div>
<div class="three columns">
<h2>This is a quarter-width column.</h2>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2>This is a full-width column.</h2>
</div>
</div></code></pre>
</div>
</div>
</div>
<div id="tables" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Tables</h3>
<p>Tables are unstyled by default. Add the <code>table</code> class to style them.
<br/><br/>
You can further style tables with
<code>row-borders</code>
<code>row-alternating</code>
<code>column-borders</code>
<code>column-alternating</code>
<code>row-first</code>
<code>row-last</code>
<code>column-first</code>
<code>column-last</code>
<code>text-center</code>
<code>margin</code>
<code>padding</code> and more!
More utility classes are available and described in the utility section below.</p>
<div class="row">
<div class="six columns">
<table class="table">
<caption>Plain Table</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
<div class="six columns">
<table class="table row-alternating text-center">
<caption>Row alternating and Centered</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="six columns">
<table class="table border row-borders row-alternating text-center">
<caption>Row borders and Row alternating</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
<div class="six columns">
<table class="table border column-borders column-alternating text-center">
<caption>Column borders and Column alternating</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="six columns">
<table class="table row-first column-first">
<caption>First row and First column</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
<div class="six columns">
<table class="table row-last column-last">
<caption>Last row and Last column</caption>
<thead><tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td>
</tbody>
</table>
</div>
</div>
<pre><code class="html"><table class="table border row-borders row-alternating text-center">
<!-- column-borders column-alternating -->
<!-- first-row last-row first-column last-column -->
<caption>Row borders and Row alternating</caption>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
</table></code></pre>
</div>
</div>
</div>
<div id="buttons" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Buttons</h3>
<p>Use the <code>button</code> class for styling anchors, inputs, tabs, or regular links to look like a button.
Osseous also provides five alternative buttons like primary, secondary, tertiary, success, and danger.</p>
<div class="row padding">
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="button" value="Input Button" />
</div>
<div class="row padding">
<button class="button button-primary">Primary</button>
<button class="button button-secondary">Secondary</button>
<button class="button button-tertiary">Tertiary</button>
<button class="button button-success">Success</button>
<button class="button button-danger">Danger</button>
</div>
<div class="row padding">
<button class="button button-primary full-width">Full Width Button</button>
</div>
<div class="row padding">
<button class="button" disabled title="Disabled Button">Disabled</button>
<button class="button button-small">Button-Small</button>
<button class="button button-large">Button-Large</button>
</div>
<pre><code class="html"><div class="row padding">
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="button" value="Input Button" />
</div>
<div class="row padding">
<button class="button button-primary">Primary</button>
<button class="button button-secondary">Secondary</button>
<button class="button button-tertiary">Tertiary</button>
<button class="button button-success">Success</button>
<button class="button button-danger">Danger</button>
</div>
<div class="row padding">
<button class="button button-primary full-width">Full Width Button</button>
</div>
<div class="row padding">
<button class="button" disabled title="Disabled Button">Disabled</button>
<button class="button button-small">Button-Small</button>
<button class="button button-large">Button-Large</button>
</div></code></pre>
</div>
</div>
</div>
<div id="tabs" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Tabs</h3>
<p>Tabs behave like buttons. Add the <code>tabs</code> parent class and <code>tab</code> class for an child item.
Add more styling with other elements like <code>button</code> or <code>padding</code> if you like.
<br/><br/>
</p>
<div class="tabs border-left border-right border-top" style="background-color:var(--light-grey)">
<a class="tab padding" href="#tabs">Tab Link</a>
<button class="tab button">Tab Button</button>
<a class="tab button button-primary" href="#tabs">Tab Primary</a>
<a class="tab button button-secondary" href="#tabs">Tab Secondary</a>
</div>
<div class="border padding">
<p>Note: Tab content like this, can be hidden/shown through JavaScript functions, hidden toggle checkbox,
or by separating content over separate pages.</code></p>
</div>
<pre><code><div class="tabs border-left border-right border-top" style="background-color:var(--light-grey)">
<a class="tab" href="#tabs">Tab</a>
<a class="tab button button-primary" href="#tabs">Tab Primary</a>
<a class="tab button button-secondary" href="#tabs">Tab Secondary</a>
</div>
<div class="border padding">
<p>Note: Tab content like this, can be hidden/shown through JavaScript functions, hidden toggle checkbox,
or by separating content over separate pages.</code></p>
</div></code></pre>
</div>
</div>
</div>
<div id="dropdowns" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Dropdowns</h3>
<p>Use the <code>dropdown</code> class for a hiding menus or additional actions that appear when hovered or clicked.
Content that should appear should be wrapped in the <code>dropdown-body</code> class.</p>
<div class="row">
<div class="six columns">
<div class="dropdown padding" onclick="">Dropdown ▾
<div class="dropdown-body border text-left">
<a href="#dropdowns" class="">Link 1</a>
<a href="#dropdowns" class="">Link 2</a>
<a href="#dropdowns" class="">Link 3</a>
</div>
</div>
<div class="dropdown padding" onclick="">Dropdown-Tooltip
<div class="dropdown-body border round">
<span class="text-small text-nowrap">This is kinda like a tooltip!</span>
</div>
</div>
<div class="dropdown padding" onclick=""><span class="text-medium">☰</span>
<div class="dropdown-body shadow round">
<span class="text-small text-nowrap">Shadow outline instead of border.</span>
</div>
</div>
<p>You can style the dropdown and the body any way you like. Add <code>&#9662;</code> for a tiny arrow, or anything else you like.</p>
</div>
<div class="six columns">
<div class="button dropdown" onclick="">Dropdown ▾
<div class="dropdown-body border">
<a href="#dropdowns" class="">Action 1</a>
<a href="#dropdowns" class="">Action 2</a>
<a href="#dropdowns" class="">Action 3</a>
</div>
</div>
<div class="button button-primary dropdown" onclick="">
<span class="padding-right border-right">Reply</span><span class="padding-left">▼</span>
<div class="dropdown-body border round">
<button class="button button-primary square full-width">Reply</button>
<button class="button square full-width">Reply All</button>
</div>
</div>
<div class="button button-danger dropdown" onclick="">⃠
<div class="dropdown-body padding-none">
<button class="button button-danger">Are you sure?</button>
</div>
</div>
<p>Add the <code>button</code> class to look like a button.</p>
</div>
</div>
<pre><code class="html"><div class="dropdown padding" onclick="">Dropdown &#9662;
<div class="dropdown-body border text-left">
<a href="#dropdowns" class="">Link 1</a>
<a href="#dropdowns" class="">Link 2</a>
<a href="#dropdowns" class="">Link 3</a>
</div>
</div>
<div class="dropdown padding" onclick="">Dropdown-Tooltip
<div class="dropdown-body border round">
<span class="text-small text-nowrap">This is kinda like a tooltip!</span>
</div>
</div>
<div class="dropdown padding text-medium" onclick="">&#9776;
<div class="dropdown-body shadow round">
<span class="text-small text-nowrap">Shadow outline.</span>
</div>
</div>
<div class="button dropdown" onclick="">Dropdown &#9662;
<div class="dropdown-body border">
<a href="#dropdowns" class="">Action 1</a>
<a href="#dropdowns" class="">Action 2</a>
<a href="#dropdowns" class="">Action 3</a>
</div>
</div>
<div class="button button-primary dropdown square" onclick="">
<span class="padding-right border-right">Reply</span><span class="padding-left">&#9660;</span>
<div class="dropdown-body border round">
<button class="button button-primary square full-width">Reply</button>
<button class="button square full-width">Reply All</button>
</div>
<div class="button button-danger dropdown" onclick="">&#8416;
<div class="dropdown-body padding-none">
<button class="button button-danger">Are you sure?</button>
</div>
</div>
</div></code></pre>
<p>Note: The dropdown does not require JavaScript to work.</p>
</div>
</div>
</div>
<div id="forms" class="row section">
<div class="container">
<div class="twelve columns">
<h3>Forms</h3>
<p>Forms are essential to any website. Osseous gives you enough styling for each input type, and using columns. Wrap your input fields with a parent <code>form</code>
or <code>div</code> with <code>class="form"</code> to stylize as Osseous form inputs.</p>
<div class="form row">
<div class="three columns">
<label for="in1" class="">Text Input</label>
<input type="text" id="in1" value="12345" />
</div>
<div class="three columns">
<label for="in2" class="">Password Input</label>
<input type="password" id="in2" value="12345" />
</div>
<div class="three columns">
<label for="in3" class="">Email Input</label>
<input type="email" id="in3" placeholder="email@example.com" />
</div>
<div class="three columns">
<label for="ind1" class="">Disabled Input</label>
<input type="text" id="ind1" value="disabled" disabled />
</div>
</div>
<div class="form row padding-top">
<div class="three columns">
<label for="in4" class="">Date Input</label>
<input type="date" id="in4" value="12/01/2017" />
</div>
<div class="three columns">
<label for="in5" class="">Time Input</label>
<input type="time" id="in5" value="12:30 AM" />
</div>
<div class="three columns">
<label for="in6" class="">Telephone Input</label>
<input type="tel" id="in6" placeholder="xxx-xxx-xxxx" />
</div>
<div class="three columns">
<label for="ind2" class="">Readonly Input</label>
<input type="text" id="ind2" value="readonly" readonly />
</div>
</div>
<div class="form row padding-top">
<label for="t1" class="">Text Input with Full Width</label>
<input type="text" id="t1" class="full-width" placeholder="Hello..." value="1234567890" />
</div>
<div class="form row padding-top">
<label for="t2" class="">Textarea with Full Width</label>
<textarea id="t2" class="full-width" placeholder="Hello..."></textarea>
</div>
<div class="form row padding-top">
<div class="four columns">
<input type="checkbox" id="c1" value="1" checked />
<label for="c1">Checkbox</label>
<input type="checkbox" id="c2" value="2" />
<label for="c2">Checkbox</label>
<input type="checkbox" id="c3" value="3" />
<label for="c3">Checkbox</label>
<input type="checkbox" id="c4" value="4" disabled />
<label for="c4">Checkbox Disabled</label>
<input type="checkbox" id="c5" value="5" checked readonly />
<label for="c5">Checkbox Readonly<br/><small>(This is still interactable. <a href="https://stackoverflow.com/a/155301/7065245" target="_blank">See here</a>).</small></label>
</div>
<div class="four columns">
<input type="radio" id="r1" name="radiogroup" value="1" checked />
<label for="r1">Radio</label>
<input type="radio" id="r2" name="radiogroup" value="2" />
<label for="r2">Radio</label>
<input type="radio" id="r3" name="radiogroup" value="3" />
<label for="r3">Radio</label>
<input type="radio" id="r4" name="radiogroup" value="4" disabled />
<label for="r4">Radio Disabled</label>
<input type="radio" id="r5" name="radiogroup2" value="5" checked readonly />
<label for="r5">Radio Readonly</label>
</div>
<div class="four columns">
<label for="s1">Select Box</label>
<select class="full-width" id="s1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<br/><br/>
<label for="s2">Select Disabled</label>
<select class="full-width" id="s2" disabled>
<option value="1">Option 1</option>
</select>
</div>
</div>
<p>Forms can be structured with <code>row</code> and <code>columns</code> to easily group fields together. Don't forget the <code>form</code> class though.</p>
<pre><code class="html"><div class="form row">
<div class="three columns">
<label for="in1" class="">Text Input</label>
<input type="text" id="in1" value="12345" />
</div>
<div class="three columns">
<label for="in2" class="">Password Input</label>
<input type="password" id="in2" value="12345" />
</div>
<div class="three columns">
<label for="in3" class="">Email Input</label>
<input type="email" id="in3" placeholder="email@example.com" />
</div>
<div class="three columns">
<label for="ind1" class="">Disabled Input</label>
<input type="text" id="ind1" value="disabled" disabled />
</div>
</div>
<div class="form row padding-top">
<div class="three columns">
<label for="in4" class="">Date Input</label>
<input type="date" id="in4" value="12/01/2017" />
</div>
<div class="three columns">
<label for="in5" class="">Time Input</label>
<input type="time" id="in5" value="12:30 AM" />
</div>
<div class="three columns">
<label for="in6" class="">Telephone Input</label>
<input type="tel" id="in6" placeholder="xxx-xxx-xxxx" />
</div>
<div class="three columns">
<label for="ind2" class="">Readonly Input</label>
<input type="text" id="ind2" value="readonly" readonly />
</div>
</div>
<div class="form row padding-top">
<label for="in8" class="">Text Input with Full Width</label>
<input type="text" id="in8" class="full-width" value="1234567890" />
</div>
<div class="form row padding-top">
<label for="t1" class="">Textarea with Full Width</label>
<textarea id="t1" class="full-width" placeholder="Hello..."></textarea>
</div>
<div class="form row padding-top">
<div class="four columns">
<input type="checkbox" id="c1" value="1" checked="checked" />
<label for="c1">Checkbox</label>
<input type="checkbox" id="c2" value="2" checked="checked" />
<label for="c2">Checkbox</label>
<input type="checkbox" id="c3" value="3" />
<label for="c3">Checkbox</label>
<input type="checkbox" id="c4" value="4" disabled />
<label for="c4">Checkbox Disabled</label>
<input type="checkbox" id="c5" value="5" checked readonly />
<label for="c5">Checkbox Readonly</label>
</div>
<div class="four columns">
<input type="radio" id="r1" name="radiogroup" value="1" />
<label for="r1">Radio</label>
<input type="radio" id="r2" name="radiogroup" value="2" />
<label for="r2">Radio</label>
<input type="radio" id="r3" name="radiogroup" value="3" />
<label for="r3">Radio</label>
<input type="radio" id="r4" name="radiogroup" value="4" disabled />
<label for="r4">Radio Disabled</label>
<input type="radio" id="r5" name="radiogroup2" value="5" checked readonly />
<label for="r5">Radio Readonly</label>
</div>
<div class="four columns">
<label for="s1">Select Box</label>
<select class="full-width" id="s1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<br/><br/>
<label for="s2">Select Disabled</label>
<select class="full-width" id="s2" disabled>
<option value="1">Option 1</option>
</select>
</div>
</div></code></pre>
<br/>
<p>You can make nice box forms with additional layout classes, such as offset-by columns, borders, and padding.
More utility classes are explained in the <a href="#utility">Utility</a> section.</p>
<form method="post" action="#" class="form">
<div class="row">
<div class="four columns offset-by-four padding-large border round">
<h4>Login</h4>
<div class="row">
<input class="full-width" placeholder="Username" id="input3" type="text" />
<input class="full-width margin-top" placeholder="Password" id="input4" type="password" />
</div>
<div class="row padding-top padding-bottom border-bottom text-center">
<a href="javascript:void(0);" class="text-small">Forgot Username</a> <a href="javascript:void(0);" class="text-small">/ Password?</a>
</div>
<div class="row padding-top margin-top">
<input type="button" class="button button-primary full-width" type="submit" value="Login" />
</div>
</div>
</div>
</form>
<pre><code class="html"><form method="post" action="#" class="form">
<div class="row">
<div class="four columns offset-by-four padding-large border round">
<h4>Login</h4>
<div class="row">
<input class="full-width" placeholder="Username" id="input3" type="text