504 lines
29 KiB
HTML
504 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<!-- For local testing only -->
|
|
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
|
<!-- Old link -->
|
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css"> -->
|
|
<!-- Correct link -->
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css">
|
|
<style>
|
|
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
|
pre{ overflow: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="checkbox" id="nav-toggle" autocomplete="off">
|
|
<div class="nav fixed">
|
|
<a href="https://chalarangelo.github.io/mini.css"><span class="logo"> <img src="favicon.png" style="height: 34px; width: auto; display: inline-block; vertical-align: middle;"> mini.css </span></a>
|
|
<ul>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/#why-mini-css" class="link">Introduction</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/#modules" class="link">Module overview</a></li>
|
|
<li><label class="link dropdown" for="menu-drop1">Module demos</label></li>
|
|
</ul>
|
|
<input type="checkbox" id="menu-drop1" class="dropdown" autocomplete="off"><div>
|
|
<ul>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#base" class="link">Base</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#grid" class="link">Responsive Grid</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#nav" class="link">Navigation</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#dropdown" class="link">Dropdowns</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#tab" class="link">Tabs</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#table" class="link">Tables</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#form" class="link">Forms</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#button" class="link">Buttons</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#label" class="link">Labels</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#modal" class="link">Modals</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#collapse" class="link">Collapse</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#progress" class="link">Progress Bars</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#carousel" class="link">Carousel</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#utility" class="link">Utilities & Helper Classes</a></li>
|
|
<li><a href="https://chalarangelo.github.io/mini.css/modules#utility-extra" class="link">Utilities & Experimental Classes</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<label for="nav-toggle"></label>
|
|
<br>
|
|
<div class="grid-container">
|
|
<div class="row">
|
|
<div class="col xs-no md-1"></div>
|
|
<div class="col xs-12 md-10">
|
|
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
|
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>Default</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong>NiteOwl</strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p><br>
|
|
|
|
<h2 id="base">Base</h2>
|
|
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
|
|
|
|
<h3>Fonts, sizes and colors</h3>
|
|
<p>The default flavor uses the <strong>Helvetica</strong> font family and a font-size of <strong>1em</strong> with a line-height of <strong>1.5</strong>. Colors used are <strong>#f5f5f5</strong> for the background and <strong>#222</strong> for the text. Most of the things in this module are subjective to one's preferences and should be changed according to your liking. Heading, <code><sub></code>, <code><sup></code> and <code><small></code> elements use multipliers, so changing the base font-size should affect those too. Apart from that, colors and styles for links can easily be changed, as well as a lot of other parameters. Images are responsive by default, so they will shrink to fit smaller viewports without any additional work. Below we highlight some important things, like heading and code styling, but you can see most of the typograhpy rules in action in these pages.</p>
|
|
|
|
<h3>Headings</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<h1>Heading 1 <small>small text</small></h1>
|
|
<h2>Heading 2 <small>small text</small></h2>
|
|
<h3>Heading 3 <small>small text</small></h3>
|
|
<h4>Heading 4 <small>small text</small></h4>
|
|
<h5>Heading 5 <small>small text</small></h5>
|
|
<h6>Heading 6 <small>small text</small></h6>
|
|
<pre class="panelcode"><h1>Heading 1 <small>small text</small></h1>
|
|
<h2>Heading 2 <small>small text</small></h2>
|
|
<h3>Heading 3 <small>small text</small></h3>
|
|
<h4>Heading 4 <small>small text</small></h4>
|
|
<h5>Heading 5 <small>small text</small></h5>
|
|
<h6>Heading 6 <small>small text</small></h6></pre>
|
|
</div>
|
|
|
|
<h3>Code, <code><pre></code> and <code><kbd></code> elements</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<p>Inline code looks like <code>this</code>. User input looks like <kbd>this</kbd>. Finally, code blocks look like...</p>
|
|
<pre style="margin-left: 10px; margin-right: 10px;">this! This is a code block!</pre>
|
|
<br><pre class="panelcode"><code>Inline code</code>
|
|
<kbd>User input</kbd>
|
|
<pre>Code block</pre></pre>
|
|
</div><br>
|
|
|
|
<h2 id="grid">Responsive grid</h2>
|
|
<p>The grid system provided can be fully customized to use as many columns as you wish and have custom breakpoints for different device sizes. The default grid uses 12 columns (as shown below). Customized classes are also defined to hide certain columns in certain viewport sizes. This can be specifically used to customize column offseting on different devices.</p>
|
|
|
|
<h3>Grid structure</h3>
|
|
<p>The basic grid structure is as follows:</p>
|
|
<ul>
|
|
<li>The outer wrapper of the grid system uses the <code>.grid-container</code> class.</li>
|
|
<li>Inside this wrapper, rows can be defined using the <code>.row</code> class.</li>
|
|
<li>Inside the rows, columns can be defined using the <code>.col</code> class.</li>
|
|
<li>Column width can be specified for different devices using the respective class prefixes (<code>.xs-</code>, <code>.sm-</code>, <code>.md-</code>, <code>.lg-</code>) followed by the width (in columns) of the specific column.</li>
|
|
<li>Columns can be hidden in certain viewports, using the <code>-no</code> suffix for the specific screen size.</li>
|
|
</ul>
|
|
|
|
<h3>12-column grid example</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<div class="grid-container">
|
|
<div class="row">
|
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div>
|
|
<div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-3 bordered">1/4</div><div class="col xs-3 bordered">1/4</div><div class="col xs-3 bordered">1/4</div>
|
|
<div class="col xs-3 bordered">1/4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-4 bordered">1/3</div><div class="col xs-4 bordered">1/3</div><div class="col xs-4 bordered">1/3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-6 bordered">1/2</div><div class="col xs-6 bordered">1/2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-12 bordered">1/1</div>
|
|
</div>
|
|
</div>
|
|
<pre class="panelcode"><div class="grid-container">
|
|
<div class="row">
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
<div class="col xs-1">1/12</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-2">1/6</div>
|
|
<div class="col xs-2">1/6</div>
|
|
<div class="col xs-2">1/6</div>
|
|
<div class="col xs-2">1/6</div>
|
|
<div class="col xs-2">1/6</div>
|
|
<div class="col xs-2">1/6</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-3">1/4</div>
|
|
<div class="col xs-3">1/4</div>
|
|
<div class="col xs-3">1/4</div>
|
|
<div class="col xs-3">1/4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-4">1/3</div>
|
|
<div class="col xs-4">1/3</div>
|
|
<div class="col xs-4">1/3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-6">1/2</div>
|
|
<div class="col xs-6">1/2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col xs-12">1/1</div>
|
|
</div>
|
|
</div></pre>
|
|
</div><br>
|
|
|
|
<h2 id="nav">Navigation</h2>
|
|
<p>The navigation system provided contains custom classes for the navigation bar, logo and links. Navigation bars can be horizontal or vertical, fixed or otherwise. Navigation bars are responsive by default, so fixed navigation bars will properly shrink down to a button on smaller screens and, when the menu is opened, it will be displayed on top of the page's content.</p>
|
|
|
|
<h3>Navigation structure</h3>
|
|
<p>The structure of the navigation system is as follows:</p>
|
|
<ul>
|
|
<li>You should wrap your navigation system in a <code><div></code> with the <code>.nav</code> class.</li>
|
|
<li>If you want your navigation bar to be vertical (horizontal is the default), use the <code>.vertical</code> class.</li>
|
|
<li>If you want your navigation bar to be fixed, use the <code>.fixed</code> class.</li>
|
|
<li>Use an element with the <code>.logo</code> class for your website's logo.</li>
|
|
<li>For the navigation links, use an unordered list (<code><ul></code>) and <strong>inside</strong> each <code><li></code> element, add another element with the <code>.link</code> class to stylize the element as a navigation link.</li>
|
|
<li>Responsiveness can be added for fixed navigation bars by adding a hidden <code><input type="checkbox"></code> right before the navigation bar and a label linking to that specific checkbox right after the navigation bar.</li>
|
|
<li>Use <code>autocomplete="off"</code> to make your menu not open by default in mobile devices.</li>
|
|
</ul>
|
|
|
|
<h3>Horizontal navigation bar</h3>
|
|
<div class="panel"><h4 class="head">Example</h4><br>
|
|
<div class="nav" style="margin-left: 10px; margin-right: 10px;">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
</ul>
|
|
</div><br>
|
|
<pre class="panelcode"><div class="nav">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
</ul>
|
|
</div></pre>
|
|
</div>
|
|
|
|
<h3>Vertical navigation bar</h3>
|
|
<div class="panel"><h4 class="head">Example</h4><br>
|
|
<div class="nav vertical" style="margin-left: 10px; margin-right: 10px;">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
</ul>
|
|
</div><br>
|
|
<pre class="panelcode"><div class="nav vertical">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
</ul>
|
|
</div></pre>
|
|
</div><br>
|
|
|
|
<h2 id="dropdown">Dropdowns</h2>
|
|
<p>The dropdown module is an extra module that allows you to add dropdown components to your navigation bars. These components can be customized and work well on mobile devices. <strong>Using too many dropdowns or nesting dropdowns is yet undocumented and might cause unexpected behavior.</strong></p>
|
|
|
|
<h3>Dropdown structure</h3>
|
|
<p>The basic structure of dropdowns is as follows</p>
|
|
<ul>
|
|
<li>To add a dropdown component, add the <code>.dropdown</code> class to one of your link elements inside the navigation bar.</li>
|
|
<li>Add an <code><input type="checkbox"></code> with the <code>.dropdown</code> class and right after it a <code><div></code> element that contains an unordered list with list elements that contains navigation links, exactly like you would make a normal navigation menu.</li>
|
|
<li>For multiple dropdowns, you should use <code><input type="radio"></code> elements.</li>
|
|
<li>On mobile devices, there might be issues with the dropdown not closing after a link is clicked (mainly when it links to the same page). This can be easily dealt with using javascript (by making all the links inside the dropdown's <code><div></code> element uncheck the navigation bar's checkbox) or using <code><label></code> elements creatively inside the links.</li>
|
|
<li>Use <code>autocomplete="off"</code> to make your dropdown not open by default in mobile devices.</li>
|
|
</ul>
|
|
|
|
<h3>Horizontal navigation dropdown example</h3>
|
|
<div class="panel"><h4 class="head">Example</h4><br>
|
|
<div class="nav">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><label class="link dropdown" for="dropdown1">Dropdown</label></li>
|
|
</ul>
|
|
<input type="checkbox" id="dropdown1" class="dropdown" autocomplete="off">
|
|
<div>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
<li><a href="#" class="link">Link 3</a></li>
|
|
</ul>
|
|
</div>
|
|
</div><br>
|
|
<pre class="panelcode"><div class="nav">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><label class="link dropdown" for="dropdown1">Dropdown</label></li>
|
|
</ul>
|
|
<input type="checkbox" id="dropdown1" class="dropdown" autocomplete="off">
|
|
<div>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
<li><a href="#" class="link">Link 3</a></li>
|
|
</ul>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
|
|
<h3>Vertical navigation dropdown example</h3>
|
|
<div class="panel"><h4 class="head">Example</h4><br>
|
|
<div class="nav vertical" style="margin-left: 10px; margin-right: 10px;">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><label class="link dropdown" for="dropdown2">Dropdown</label></li>
|
|
</ul>
|
|
<input type="checkbox" id="dropdown2" class="dropdown" autocomplete="off">
|
|
<div>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
<li><a href="#" class="link">Link 3</a></li>
|
|
</ul>
|
|
</div>
|
|
</div><br>
|
|
<pre class="panelcode"><div class="nav vertical">
|
|
<span class="logo">Logo</span>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 1</a></li>
|
|
<li><label class="link dropdown" for="dropdown1">Dropdown</label></li>
|
|
</ul>
|
|
<input type="checkbox" id="dropdown1" class="dropdown" autocomplete="off">
|
|
<div>
|
|
<ul>
|
|
<li><a href="#" class="link">Link 2</a></li>
|
|
<li><a href="#" class="link">Link 3</a></li>
|
|
</ul>
|
|
</div>
|
|
</div></pre>
|
|
</div><br>
|
|
|
|
<h2 id="tab">Tabs</h2>
|
|
<p>The tabbed navigation module allows you to easily create tabbed navigation systems, that are fully customizable to fit your needs. <strong>Nested tabs are not supported and might cause unexpected behavior.</strong></p>
|
|
|
|
<h3>Tabbed navigation structure</h3>
|
|
<p>The structure of the tabbed navigation system is as follows:</p>
|
|
<ul>
|
|
<li>Use the <code>.tabs</code> class to specify the container for the tabbed navigation system.</li>
|
|
<li>For each tab use an <code><input type="radio"></code>, immediately followed by a <code><div></code> element.</li>
|
|
<li>This last element should contain a <code><label></code> linking to the radio button of the tab and another <code><div></code> that will contain the tab's contents.</li>
|
|
<li>Specify the tab that will be open by default using the <code>checked</code> property on one of the radio buttons.</li>
|
|
</ul>
|
|
|
|
|
|
<h3>Tabbed navigation example <sup>*</sup></h3>
|
|
<div class="tabs">
|
|
<input type="radio" name="tabs-radio" id="tab1" checked>
|
|
<div>
|
|
<label for="tab1">Tab 1</label>
|
|
<div>Tab 1 content...</div>
|
|
</div>
|
|
<input type="radio" name="tabs-radio" id="tab2">
|
|
<div>
|
|
<label for="tab2">Tab 2</label>
|
|
<div>Tab 2 content...</div>
|
|
</div>
|
|
<input type="radio" name="tabs-radio" id="tab3">
|
|
<div>
|
|
<label for="tab3">Tab 3</label>
|
|
<div>Tab 3 content...</div>
|
|
</div>
|
|
</div>
|
|
<pre class="panelcode"><div class="tabs">
|
|
<input type="radio" name="tabs-radio" id="tab1" checked>
|
|
<div>
|
|
<label for="tab1">Tab 1</label>
|
|
<div>Tab 1 content...</div>
|
|
</div>
|
|
<input type="radio" name="tabs-radio" id="tab2">
|
|
<div>
|
|
<label for="tab2">Tab 2</label>
|
|
<div>Tab 2 content...</div>
|
|
</div>
|
|
<input type="radio" name="tabs-radio" id="tab3">
|
|
<div>
|
|
<label for="tab3">Tab 3</label>
|
|
<div>Tab 3 content...</div>
|
|
</div>
|
|
</div></pre><br>
|
|
<p>(*):Due to a minor incompatibility between panels and tabs, the above example is not shown like most of the others. Our most experienced teams of developers and designers are on this.</p><br>
|
|
|
|
<h2 id="table">Tables</h2>
|
|
<p>Tables can be easily stylized to look more modern, using stripes and selective borders (vertical only by default). Classes for horizontal only borders(<code>.hor</code>) and full borders(<code>.bor</code>) are also provided. Use the <code>.tbl</code> class in your <code><table></code> elements to easily apply your styling.</p>
|
|
|
|
<h3>Default table example</h3>
|
|
<div class="panel"><h4 class="head">Example</h4><br>
|
|
<table class="tbl" style="margin-left: 10px; margin-right: 10px;">
|
|
<thead>
|
|
<th>Column 1</th> <th>Column 2</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br>
|
|
<pre class="panelcode"><table class="tbl">
|
|
<thead>
|
|
<th>Column 1</th> <th>Column 2</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Name</td> <td>Value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></pre>
|
|
</div><br>
|
|
|
|
<h2 id="form">Forms</h2>
|
|
<p>Form customization and styling is easy using the <code>.frm</code> class in any <code><form></code> element. Inputs inside the form will be automatically styled and they will use complementary highlights for certain events (<code>:focus</code>, <code>disabled</code>, <code>:invalid</code> etc.). You can use the <code>.aligned</code> and <code>.inline</code> classes to create aligned and inline forms respectively. Aligned forms should be used in combination with the <code>.ctrl-group</code> class to group together labels with their respective inputs.</p>
|
|
|
|
<h3>Vertical form</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<form class="frm" autocomplete="off">
|
|
<label for="email1">Email</label>
|
|
<input type="email" id="email1">
|
|
<label for="password1">Password</label>
|
|
<input type="password" id="password1">
|
|
</form>
|
|
<pre class="panelcode"><form class="frm">
|
|
<label for="email1">Email</label>
|
|
<input type="email" id="email1">
|
|
<label for="password1">Password</label>
|
|
<input type="password" id="password1">
|
|
</form></pre>
|
|
</div>
|
|
|
|
<h3>Inline form</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<form class="frm inline" autocomplete="off">
|
|
<label for="email2">Email</label>
|
|
<input type="email" id="email2">
|
|
<label for="password2">Password</label>
|
|
<input type="password" id="password2">
|
|
</form>
|
|
<pre class="panelcode"><form class="frm inline">
|
|
<label for="email1">Email</label>
|
|
<input type="email" id="email1">
|
|
<label for="password1">Password</label>
|
|
<input type="password" id="password1">
|
|
</form></pre>
|
|
</div>
|
|
|
|
<h3>Aligned form</h3>
|
|
<div class="panel"><h4 class="head">Example</h4>
|
|
<form class="frm aligned" autocomplete="off">
|
|
<div class="ctrl-group">
|
|
<label for="email3">Email</label>
|
|
<input type="email" id="email3">
|
|
</div>
|
|
<div class="ctrl-group">
|
|
<label for="password3">Password</label>
|
|
<input type="password" id="password3">
|
|
</div>
|
|
</form>
|
|
<pre class="panelcode"><form class="frm aligned">
|
|
<div class="ctrl-group">
|
|
<label for="email1">Email</label>
|
|
<input type="email" id="email1">
|
|
</div>
|
|
<div class="ctrl-group">
|
|
<label for="password1">Password</label>
|
|
<input type="password" id="password1">
|
|
</div>
|
|
</form></pre>
|
|
</div><br>
|
|
|
|
<h2 id="button">Buttons</h2>
|
|
<p>Use the <code>.btn</code> class on <code><button></code>, <code><a></code>, <code><label></code> or similar elements to give them a unique style. Color variants are provided (<code>.red</code>, <code>.green</code> and <code>.blue</code>), as well as size variants (<code>.sm</code> and <code>.lg</code>).</p>
|
|
|
|
<h3>Button styles and variants</h3>
|
|
<div class="panel" ><h4 class="head">Example</h4><br>
|
|
<button class="btn">Default button</button>
|
|
<button class="btn red">Red button</button>
|
|
<button class="btn green">Green button</button>
|
|
<button class="btn blue">Blue button</button>
|
|
<button class="btn sm">Small button</button>
|
|
<button class="btn lg">Large button</button><br><br>
|
|
<pre class="panelcode"><button class="btn">Default button</button>
|
|
<button class="btn red">Red button</button>
|
|
<button class="btn green">Green button</button>
|
|
<button class="btn blue">Blue button</button>
|
|
<button class="btn sm">Small button</button>
|
|
<button class="btn lg">Large button</button></pre>
|
|
</div><br>
|
|
|
|
<h2 id="label">Labels & Badges</h2>
|
|
<p>Use the <code>.lbl</code> or <code>.bdg</code> class on any elements to style them like labels or badges. Color variants are provided (<code>.red</code>, <code>.green</code> and <code>.blue</code>) for both of these styles.</p>
|
|
|
|
<h3>Labels and badge styles</h3>
|
|
<div class="panel" ><h4 class="head">Example</h4><br>
|
|
<span class="lbl">Label</span>
|
|
<span class="lbl red">Red label</span>
|
|
<span class="lbl green">Green label</span>
|
|
<span class="lbl blue">Blue label</span>
|
|
<span class="bdg">12</span>
|
|
<span class="bdg red">3</span>
|
|
<span class="bdg green">45</span>
|
|
<span class="bdg blue">6</span><br><br>
|
|
<pre class="panelcode"><span class="lbl">Label</span>
|
|
<span class="lbl red">Red label</span>
|
|
<span class="lbl green">Green label</span>
|
|
<span class="lbl blue">Blue label</span>
|
|
|
|
<span class="bdg">12</span>
|
|
<span class="bdg red">3</span>
|
|
<span class="bdg green">45</span>
|
|
<span class="bdg blue">6</span></pre>
|
|
</div><br>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |