mini.css
This is a modal dialog.
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 NiteOwl 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 Default 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 Bootstrap flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.
To use the Default flavor, add the following code inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-niteowl.min.css">
The Base module contains customized typography rules, colors and most of the functionality provided in normalize.css. Below we showcase some of the most important typography styles.
The NiteOwl flavor uses the Helvetica font family and a font-size of 1em with a line-height of 1.5. Colors used are #151f29 for the background and #f5f5f5 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, <sub>, <sup> and <small> 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 typography rules in action in these pages.
<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> and <kbd> elementsInline code looks like this. User input looks like this. Finally, code blocks look like...
this! This is a code block!
<code>Inline code</code> <kbd>User input</kbd> <pre>Code block</pre>
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.
The basic grid structure is as follows:
.grid-container class..row class..col class..xs-, .sm-, .md-, .lg-) followed by the width (in columns) of the specific column.-no suffix for the specific screen size.<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>
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.
The structure of the navigation system is as follows:
<div> with the .nav class..vertical class..fixed class..logo class for your website's logo.<ul>) and inside each <li> element, add another element with the .link class to stylize the element as a navigation link.<input type="checkbox"> right before the navigation bar and a label linking to that specific checkbox right after the navigation bar.autocomplete="off" to make your menu not open by default in mobile devices.<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>
<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>
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. Using too many dropdowns or nesting dropdowns is yet undocumented and might cause unexpected behavior.
The basic structure of dropdowns is as follows
.dropdown class to one of your link elements inside the navigation bar.<input type="checkbox"> with the .dropdown class and right after it a <div> element that contains an unordered list with list elements that contains navigation links, exactly like you would make a normal navigation menu.<input type="radio"> elements.<div> element uncheck the navigation bar's checkbox) or using <label> elements creatively inside the links.autocomplete="off" to make your dropdown not open by default in mobile devices.<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>
<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>
The tabbed navigation module allows you to easily create tabbed navigation systems, that are fully customizable to fit your needs. Nested tabs are not supported and might cause unexpected behavior.
The structure of the tabbed navigation system is as follows:
.tabs class to specify the container for the tabbed navigation system.<input type="radio">, immediately followed by a <div> element.<label> linking to the radio button of the tab and another <div> that will contain the tab's contents.checked property on one of the radio buttons.<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>(*):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.
Tables can be easily stylized to look more modern, using stripes and selective borders (vertical only by default). Classes for horizontal only borders(.hor) and full borders(.bor) are also provided. Use the .tbl class in your <table> elements to easily apply your styling.
| Column 1 | Column 2 |
|---|---|
| Name | Value |
| Name | Value |
| Name | Value |
| Name | Value |
<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>
Form customization and styling is easy using the .frm class in any <form> element. Inputs inside the form will be automatically styled and they will use complementary highlights for certain events (:focus, disabled, :invalid etc.). You can use the .aligned and .inline classes to create aligned and inline forms respectively. Aligned forms should be used in combination with the .ctrl-group class to group together labels with their respective inputs.
<form class="frm"> <label for="email1">Email</label> <input type="email" id="email1"> <label for="password1">Password</label> <input type="password" id="password1"> </form>
<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>
<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>
Use the .btn class on <button>, <a>, <label> or similar elements to give them a unique style. Color variants are provided (.red, .green and .blue), as well as size variants (.sm and .lg).
<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>
Use the .lbl or .bdg class on any elements to style them like labels or badges. Color variants are provided (.red, .green and .blue) for both of these styles.
<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>
Modal dialogs can be easily added and customized to the user's liking and offer support for the close button utility. Showing more than one modal dialog at once might have unexpected results and is not encouraged.
The basic structure of a modal dialog is as follows:
.modal class on an <input type="checkbox">. Place this checkbox along with any other elements specified below at the very start of your <body>.<div> right after the checkbox. Inside it add a second <div> with your modal dialog's contents, as well as a <label> for the checkbox without any content inside it. This label will act as the overlay behind the modal. If you do not want clicking the background to close the modal dialog, add the label without linking it to the checkbox.<span class="close"> inside a label for the checkbox in the innermost <div> to add a close button to the top right corner of your modal dialog.checked.<input type="checkbox" class="modal" id="modal1">
<div>
<label for="modal1" autocomplete="off"></label>
<div>
<label for="modal1">
<span class="close"></span>
</label>
<h3>Modal dialog</h3>
<hr>
<p>This is a modal dialog.</p>
</div>
</div>
...
<label for="modal1" class="btn red">Open modal</label>
The collapse module adds two components with similar functionality.
.clps class on an <input type="checkbox"> element, followed by a <div> with the content to be hidden/shown based on the collapse's state..acrd class to as many <input type="radio"> elements as you want. You should add a <label> linking to each radio immediately after it, followed by a <div> with the content to be hidden/shown based on the accordion's state. <label for="collapse1" class="btn blue">Toggle collapse</label> <input type="checkbox" class="clps" id="collapse1"> <div>This text will be shown or hidden based on the above button.</div>
<input type="radio" class="acrd" id="acrd1" autocomplete="off" name="accordion"> <label for="acrd1">First option</label> <div>This is the first collapse of the accordion.</div> <input type="radio" class="acrd" id="acrd2" autocomplete="off" name="accordion"> <label for="acrd2">Second option</label> <div>This is the second collapse of the accordion.</div> <input type="radio" class="acrd" id="acrd3" autocomplete="off" name="accordion"> <label for="acrd3">Third option</label> <div>This is the final collapse of the accordion.</div>
The progress bar module is very easy to use and extend. Simply create a <div> with the .prg class and inside it add a <span> element with the desired style="width:XX%" and you have a progress bar. Add text inside the <span> element if you want. You can use the .green or .red variants for the <span> element if you want to use different colors. Finally, you can always stack multiple progress bars, by simply adding more <span> elements, just make sure their widths add up to 100% or less.
<div class="prg"><span style="width:60%;">60%</span></div>
<div class="prg"><span class="green" style="width:40%;"></span></div> <div class="prg"><span class="red" style="width:70%;"></span></div>
<div class="prg"> <span class="red" style="width:30%;"></span> <span class="green" style="width:20%;"></span> <span style="width:40%;"></span> </div>
Spinner dots:
Spinner round:
<span class="spinner-dots"></span> <span class="spinner-round"></span>
The carousel module allows you to create manually-controlled image slideshows for your pages. Nested carousels might cause unexpected behavior, please refrain from using them.
The base structure for the carousel component is as follows:
.carousel class on a <div> element.<input type="radio">, followed immediately by a <div> element. Inside the latter, add an <img> element, followed by a <div> element which will act as the image's description. Finally, right after closing the first <div> element, add a <label> linked to the radio button for the image.<div> element, even if it is empty, as it is required for the component to work properly.checked attribute to the first radio button of your carousel (or the one corresponding to the image you want to be displayed by default) to make the carousel work properly.Auto-scrolling is not enabled by default in this carousel component. If you want the carousel to scroll automatically, you can check each of the radio buttons automatically using Javascript on set intervals. Using a similar technique you can pause the automatic scrolling when the user's cursor is inside the carousel.
This is a sample image description.
This is another sample image description.
This is yet another image description.
<div class="carousel">
<input type="radio" name="carousel-control" id="crs1" checked>
<div>
<img src="favicon.png">
<div>
<h3>First image</h3>
<p>This is a sample image description.</p>
</div>
</div>
<label for="crs1"></label>
<input type="radio" name="carousel-control" id="crs2">
<div>
<img src="favicon.png" style="transform: scale(1,-1);">
<div>
<h3>Second image</h3>
<p>This is another sample image description.</p>
</div>
</div>
<label for="crs2"></label>
<input type="radio" name="carousel-control" id="crs3">
<div>
<img src="favicon.png" style="transform: scale(-1,-1);">
<div>
<h3>Third image</h3>
<p>This is yet another image description.</p>
</div>
</div>
<label for="crs3"></label>
</div>
The core utilities module contains a set of useful utilities and helper classes to make common tasks easier when developing new pages.
By using the opacity CSS property in a creative way, along with border-radiuses, we have created utility classes that will create generic borders for virtually any element you want. Simply add the .bordered class to create a generic border around an element. You can also use the .rounded and .circle classes (with or without the border style) to create reounded or circular corners for different elements accordingly.
<button class="btn blue bordered">Button</button> <img class="bordered rounded" src="favicon.png"> <img class="circle" src="favicon.png">
You can easily add contextual text or background color to certain textual elements by simply using one of the contextual prefixes (.txt- and .bg- respectively) and a color suffix (red, green or blue).
Here is some text with contextual colors: red, green & blue.
And here is some text with contextual backgrounds: red, green & blue.
<span class="txt-red">red text</span> <span class="txt-green">green text</span> <span class="txt-blue">blue text</span> <span class="bg-red">red background</span> <span class="bg-green">green background</span> <span class="bg-blue">blue background</span>
Image thumbnails can be used to stylize images by adding a custom border around them by simply using the .thumb class.
<img class="thumb" src="favicon.png">
You can easily add carets and close symbols by using the .caret and .close classes respectively.
<span class="caret"></span> <span class="close"></span>
Apart from the above utilities, there are some extra classes provided to help streamline the development process. Some of these classes use the !important property to override other styles, so be careful when using them. The provided helper classes are as follows:
.drg-left and .drg-right classes..ct-block class..cf class..hidden class to hide any content you wish.The extra utilities module contains some more useful utilities, as well as some more experimental and unstable utility classes, that some people might find of use. Any components marked as experimental might be unstable and behave unexpectedly, use at your own risk!
Create breadcrumbs to indicate the navigational hierarchy of a page's location, using the .brdcrmb class on a list element.
<ol class="brdcrmb">
<li><a href="#">Core</a></li>
<li><a href="#">Modules</a></li>
<li>Utility</li>
</ol>
There are multiple types of generic containers provided:
.well class and are the simplest type of generic container..alert- prefix on an <input type="checkbox"> along with a color suffix (red, green or blue) and a <div> element to create an alert. Adding a <span class="close">.panel class and you can specify a title element for your panel using the .head class on the very first element of your panel.This is a panel.
<div class="well">This is a well.</div>
<input type="checkbox" id="alert1" class="alert-red" checked>
<div>This is a red alert without a close button.</div>
<input type="checkbox" id="alert2" class="alert-green" checked>
<div>This is a green alert with a <a href="#">link</a> but no close button either.</div>
<input type="checkbox" id="alert3" class="alert-blue" checked>
<div>This is a blue alert with a close button. <label for="alert3"><span class="close"></span></label></div>
<div class="panel">
<h3 class="head">Panel head</h3>
<p>This is a panel.</p>
</div>
You can show a small overlay of content when the user clicks on specific elements using the .popover- prefix on an <input type="checkbox"> along with the top or bottom suffix. Add a <label> right after the checkbox linked to it and inside it add another element with the popover's class you are using. When you click the label, the popover will appear above or below the label. Click on the label again or the popover text itself to hide it.
<input type="checkbox" id="popover1" class="popover-top" autocomplete="off"> <label for="popover1" class="btn green">Open top popover <span class="popover-top">This is the popover text.</span> </label> <input type="checkbox" id="popover2" class="popover-bottom" autocomplete="off"> <label for="popover2" class="btn red">Open bottom popover <span class="popover-bottom">This is the popover text.</span> </label>
There are two experimental components provided, stateful buttons and button groups:
.stateful class to an <input type="checkbox">, followed by two labels (the first is for the inactive state and the second one for the active state).This component is not enabled by default as it is unstable, you can enable it manually..btn-grp class to wrap a set of .btn elements.This component is considered stable enough, so it is enabled by default, you can disable it manually.<input type="checkbox" id="stateful1" class="stateful" autocomplete="off"> <label for="stateful1" class="btn blue">Click to load</label> <label class="btn blue">Loading...</label> <div class="btn-grp"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> </div>