Packaging and documentation
This commit is contained in:
Angelos Chalaris
parent
133390f2a7
commit
aed32e13a5
29 changed files with 1401 additions and 1368 deletions
2
.npmignore
Normal file
2
.npmignore
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
docs/v1
|
||||
docs/v2
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
# Changelog
|
||||
|
||||
## v2.0.0
|
||||
|
||||
- New version, rebuilt from scratch.
|
||||
- Breaking changes in legacy browser compatibility.
|
||||
- Full module and component redesign and restructure.
|
||||
- New documentation and demo pages.
|
||||
|
||||
## v1.1.0
|
||||
|
||||
- Fixed a problem with disabled buttons not behaving properly (issue #7).
|
||||
|
|
|
|||
15
bower.json
15
bower.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mini.css",
|
||||
"description": "A minimal Sass-y responsive mobile-first style-agnostic CSS framework.",
|
||||
"description": "A minimal, responsive, style-agnostic CSS toolkit.",
|
||||
"main": "flavors/mini-default.min.css",
|
||||
"authors": [
|
||||
"Angelos Chalaris (Chalarangelo)"
|
||||
|
|
@ -10,13 +10,16 @@
|
|||
"mini.css",
|
||||
"mini",
|
||||
"CSS",
|
||||
"responsive",
|
||||
"framework",
|
||||
"mobile",
|
||||
"first",
|
||||
"style",
|
||||
"agnostic",
|
||||
"toolkit",
|
||||
"minimal",
|
||||
"responsive",
|
||||
"style-agnostic",
|
||||
"Sass"
|
||||
],
|
||||
"ignore": [
|
||||
"docs/v1",
|
||||
"docs/v2"
|
||||
],
|
||||
"homepage": "https://chalarangelo.github.io/mini.css/"
|
||||
}
|
||||
|
|
|
|||
BIN
docs/favicon.png
BIN
docs/favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.7 KiB |
357
docs/index.html
357
docs/index.html
|
|
@ -1,123 +1,276 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<!-- Live demo styled as of 20161213 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</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="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css v2 (Fermion) helps you build quick, modern, responsive websites and web apps with minimal effort."/>
|
||||
<meta property="og:image" content="favicon.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
||||
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
||||
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" class="hidden" id="nav-toggle" autocomplete="off" class="hidden">
|
||||
<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>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="index.html" class="button">Introduction</a>
|
||||
<a href="modules.html" class="button">Modules</a>
|
||||
<a href="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<label for="nav-toggle"></label>
|
||||
<br>
|
||||
<div class="grid-container">
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<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>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> or the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre style="overflow: auto;"><link rel=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"</span>></pre>
|
||||
|
||||
<p>If you'd rather use a package manager, <strong>mini.css</strong> is available in both Bower and NPM:</p>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bower install</span> mini.css</pre>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">npm install</span> mini.css</pre><br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Minimal<small>Size matters!</small></h2><br>
|
||||
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> aims to provide as much functionality as possible in about 5KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive<small>Think mobile!</small></h2><br>
|
||||
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br>
|
||||
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h2>Setup and usage</h2>
|
||||
<p>You can import he default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
</div><br>
|
||||
<p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="#">Customization</a> page for information, tips on how to get started and general guidelines.</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI toolkits (Bootstrap, Semantic UI etc):</p>
|
||||
<table>
|
||||
<caption>Toolkit file size comparison</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Version</th>
|
||||
<th>Size (uncompressed)</th>
|
||||
<th>Size (minified)</th>
|
||||
<th>Size (gzipped)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Bootstrap</td>
|
||||
<td data-label="Version"><a href="https://github.com/twbs/bootstrap/blob/0b9c4a4007c44201dce9a6cc1a38407005c26c86/dist/css/bootstrap.css">v3.3.7</a></td>
|
||||
<td data-label="Size (uncompressed)">143 KB</td>
|
||||
<td data-label="Size (minified)">117 KB</td>
|
||||
<td data-label="Size (gzipped)">20 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Material Framework</td>
|
||||
<td data-label="Version"><a href="https://github.com/nt1m/material-framework/blob/c5f7fed174686118dded31aecca311d4cc9d8b07/css/material.css">v3.0</a></td>
|
||||
<td data-label="Size (uncompressed)">114 KB</td>
|
||||
<td data-label="Size (minified)">90 KB</td>
|
||||
<td data-label="Size (gzipped)">18 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">mini.css</td>
|
||||
<td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.0/dist/css/mini-default.css">v2.0</a></td>
|
||||
<td data-label="Size (uncompressed)">47 KB</td>
|
||||
<td data-label="Size (minified)">36 KB</td>
|
||||
<td data-label="Size (gzipped)">7 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Semantic UI</td>
|
||||
<td data-label="Version"><a href="https://github.com/Semantic-Org/Semantic-UI/blob/0b1b59b0e1c780e842820df5c1904a162034812c/dist/semantic.css">v2.2.6</a></td>
|
||||
<td data-label="Size (uncompressed)">730 KB</td>
|
||||
<td data-label="Size (minified)">550 KB</td>
|
||||
<td data-label="Size (gzipped)">95 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Zurb Foundation</td>
|
||||
<td data-label="Version"><a href="https://github.com/zurb/foundation-sites/blob/ab172838d6de406204956015c9fd393c5a526e0e/dist/foundation.css">v3.0</a></td>
|
||||
<td data-label="Size (uncompressed)">90 KB</td>
|
||||
<td data-label="Size (minified)">64 KB</td>
|
||||
<td data-label="Size (gzipped)">12 KB</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark> The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<h3>Module list</h3>
|
||||
<ul>
|
||||
<li><strong>Size matters!</strong> - The key focus of <strong>mini.css</strong> is to provide developers with a very light framework to build their pages with. To accomplish this, we stripped down most of the commonly-used components to their essentials, utilising the magic of CSS. By building lighter components, using only CSS, we made <strong>mini.css</strong> really tiny, just under 5KB for the default flavor.</li>
|
||||
|
||||
<li><strong>Easily customize your pages!</strong> - <strong>mini.css</strong> does not rely on a huge monolithic CSS file to do everything. In fact, we split the framework into smaller modules using Sass(SCSS), so you can easily distinguish what pieces you want in your final stylesheet. But that's not all! Every single detail of the provided modules can be changed, from colors and border styles to class names and structure. It's all really simple and you can do it without a lot of CSS or Sass knowledge. These customized stylesheets are called <strong>flavors</strong> and are one of the key differences between <strong>mini.css</strong> and other frameworks.</li>
|
||||
|
||||
<li><strong>We are mobile-friendly!</strong><sup>*</sup> - That's right! We built <strong>mini.css</strong> from the ground up to support mobile devices as best as possible and be responsive. All of this functionality can be fully customized to suit your end-users.</li>
|
||||
|
||||
<li><strong>No Javascript!</strong> - As much as we all love Javascript, we tried to keep all of the modules in <strong>mini.css</strong> pure CSS. This means no dependencies on Javascript libraries or excessive code for events you might never use.</li>
|
||||
|
||||
<li><strong>Core</strong> - Resets, typography rules and fixes</li>
|
||||
<li><strong>Grid</strong> - Powerful, responsive flexbox-based grid</li>
|
||||
<li><strong>Navigation</strong> - Common elements for navigation</li>
|
||||
<li><strong>Input Control</strong> - Forms, buttons and inputs</li>
|
||||
<li><strong>Table</strong> - Modern, responsive tables</li>
|
||||
<li><strong>Card</strong> - Sleek, modern content containers</li>
|
||||
<li><strong>Tab</strong> - Responsive tabs and accordions</li>
|
||||
<li><strong>Contextual</strong> - Contextual highlights and alerts</li>
|
||||
<li><strong>Progress</strong> - Modern progress bars and loaders</li>
|
||||
<li><strong>Utility</strong> - Utility and helper classes</li>
|
||||
</ul>
|
||||
<small>(*): We do not want to claim that any website will ever instantly work 100% the way you want on mobile, but mini.css eliminates a lot of the tedious work of making your websites mobile-friendly, so you can focus on the interesting parts that actually need your attention.</small>
|
||||
|
||||
<h2 id="modules">What does it contain?</h2>
|
||||
<p><strong>mini.css</strong> is split up into modules, each with a specific focus or set of components. These modules are categorized under core modules and extra modules. We suggest that you use most of the core modules in your projects, as most projects can make good use of them. As for the extra modules, we suggest you carefully pick the ones you need for your project. Below is a quick overview of all the modules:</p>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<h3>Why does <strong>mini.css</strong> have so few modules?</h3>
|
||||
<p>Modules are what makes toolkits so powerful, by giving developers the essential components they need to structure and style their websites. <strong>mini.css</strong> simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to do exactly what the developer wants. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<table>
|
||||
<caption>Browser support</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Not supported</th>
|
||||
<th>Partially supported</th>
|
||||
<th>Fully supported</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-internet-explorer" aria-hidden="true" style="color: #1565c0;"></i> Internet Explorer</td>
|
||||
<td data-label="Not supported">8-</td>
|
||||
<td data-label="Partially supported">9-10</td>
|
||||
<td data-label="Fully supported">11+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-edge" aria-hidden="true" style="color: #0d47a1;"></i> Edge</td>
|
||||
<td data-label="Not supported">n/a</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">12+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-firefox" aria-hidden="true" style="color: #bf360c;"></i> Firefox</td>
|
||||
<td data-label="Not supported">21-</td>
|
||||
<td data-label="Partially supported">22-27</td>
|
||||
<td data-label="Fully supported">28+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-chrome" aria-hidden="true" style="color: #ff8f00;"></i> Chrome</td>
|
||||
<td data-label="Not supported">20-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">21+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-safari" aria-hidden="true" style="color: #0277bd;"></i> Safari</td>
|
||||
<td data-label="Not supported">6-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">6.1+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-opera" aria-hidden="true" style="color: #b71c1c;"></i> Opera</td>
|
||||
<td data-label="Not supported">11.5-</td>
|
||||
<td data-label="Partially supported">12.1-16</td>
|
||||
<td data-label="Fully supported">17+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-android" aria-hidden="true" style="color: #827717;"></i> Android Browser</td>
|
||||
<td data-label="Not supported">4.3-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">4.4+</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark> Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the above table, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not display or behave properly due to the browsers themselves.</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 40px;">
|
||||
<div class="col-sm">
|
||||
<h2>Getting started</h2>
|
||||
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
|
||||
<ul>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#base">Core : Base</a></h3><p>A modified version of <a href="https://necolas.github.io/normalize.css/">normalize.css</a> combined with a long list of variables produces a customized base for your projects along with typography rules and colors.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#grid">Core : Responsive Grid</a></h3><p>A customizable reponsive grid that lets you build pages that look great on all devices wih minimal tweaking..</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#nav">Core : Navigation</a></h3><p>A customizable responsive navigation bar for your pages.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#dropdown">Extra : Navigation - Dropdown</a></h3><p>The navigation system can easily be extended using the dropdown component.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#tab">Extra : Navigation - Tabs</a></h3><p>If you would rather use tabs instead of the usual navigation bar, you can use this module to enable tabbed navigation.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#table">Core : Tables</a></h3><p>Give a fresh style to your tables without overloading your page.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#form">Core : Forms</a></h3><p>Simple, elegant and light forms that will work well and give feedback to the user.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#button">Core : Buttons</a></h3><p>Tiny button styles that allow you to beautify your buttons, labels and links.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#label">Extra : Labels & Badges</a></h3><p>Small badges and labels to provide your user's with all the info they need.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#modal">Extra : Modals</a></h3><p>Modal dialog prompts to notify your users the easy way.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#collapse">Extra : Collapse</a></h3><p>Hide and show text using customizable collapse buttons.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#progress">Extra : Progress Bars</a></h3><p>A simple module that allows you to create progess bars for your pages.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#carousel">Extra : Carousel</a></h3><p>Really light and customizable imaage slideshow for all your showcase needs.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#utility">Core : Utilities & Helper Classes</a></h3><p>Classes for generic borders, image thumbnails, contextual text coloring, utility buttons and more.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#utility-extra">Extra : Utilities & Experimental Classes</a></h3><p>Breadcrumbs, containers, panels, alerts, popovers, button groups and more.</p></li>
|
||||
|
||||
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row footer">
|
||||
<div class="col xs-no md-1"></div>
|
||||
<div class="col xs-12 md-10 footer">
|
||||
<p style="padding-top: 10px;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
|
@ -1,857 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<!-- Live demo styled as of 20161213 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Modules</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="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, modules">
|
||||
<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"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
input[type="checkbox"].stateful{display: none;}
|
||||
input[type="checkbox"].stateful+label{display:block;}
|
||||
input[type="checkbox"].stateful+label+label{display:none;}
|
||||
input[type="checkbox"]:checked.stateful+label{display:none;}
|
||||
input[type="checkbox"]:checked.stateful+label+label{display:block;}
|
||||
.btn-grp .btn{margin-left:-5px;}
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
.panel > .nav , .panel > .bordered, .panel > .circle{ padding: 0 !important; }
|
||||
.panel > .btn { padding: 6px 12px !important;}
|
||||
.panel > .lbl { padding: 6px 10px !important; }
|
||||
.panel > .bdg { padding: 3px 8px !important; }
|
||||
.panel > .well { padding: 20px !important; }
|
||||
.panel code, .panel kbd, .panel pre{ padding: 2px 4px !important; }
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.box-left { text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<input type="checkbox" id="nav-toggle" autocomplete="off" class="hidden">
|
||||
<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>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="index.html" class="button">Introduction</a>
|
||||
<a href="modules.html" class="button">Modules</a>
|
||||
<a href="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<label for="nav-toggle"></label>
|
||||
<br>
|
||||
<div class="grid-container">
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<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><a href="https://chalarangelo.github.io/mini.css/modules-niteowl">NiteOwl</a></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>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"></pre><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 typography 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>
|
||||
|
||||
<h2 id="modal">Modals</h2>
|
||||
<p>Modal dialogs can be easily added and customized to the user's liking and offer support for the close button utility. <strong>Showing more than one modal dialog at once might have unexpected results and is not encouraged.</strong></p>
|
||||
|
||||
<h3>Modal dialog structure</h3>
|
||||
<p>The basic structure of a modal dialog is as follows:</p>
|
||||
<ul>
|
||||
<li>Use the <code>.modal</code> class on an <code><input type="checkbox"></code>. <strong>Place this checkbox along with any other elements specified below at the very start of your <code><body></code>.</strong></li>
|
||||
<li>Add a <code><div></code> right after the checkbox. Inside it add a second <code><div></code> with your modal dialog's contents, as well as a <code><label></code> for the checkbox <strong>without any content inside it.</strong> 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.</li>
|
||||
<li>If you have enabled close button support, you can add a <code><span class="close"></code> inside a label for the checkbox in the innermost <code><div></code> to add a close button to the top right corner of your modal dialog.</li>
|
||||
<li>Finally, add a label linking to the modal dialog's checkbox anywhere in your page. You can also toggle the modal using Javascript, by setting the checkbox's state to <code>checked</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Modal dialog example</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<label for="modal1" class="btn red">Open modal</label><br><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="collapse">Collapse</h2>
|
||||
<p>The collapse module adds two components with similar functionality. </p>
|
||||
<ul>
|
||||
<li>Single collapse components can be created by adding the <code>.clps</code> class on an <code><input type="checkbox"></code> element, followed by a <code><div></code> with the content to be hidden/shown based on the collapse's state.</li>
|
||||
<li>Similarly, accordion collapse components can be created by adding the <code>.acrd</code> class to as many <code><input type="radio"></code> elements as you want. You should add a <code><label></code> linking to each radio immediately after it, followed by a <code><div></code> with the content to be hidden/shown based on the accordion's state. </li>
|
||||
<li>You can use the single collapse component's styling for a set of radio buttons or the accordion's styling for a single checkbox if you would like to use a different styling for your collapse components without adding new CSS definitions.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Single collapse style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<label for="collapse1" class="btn blue">Toggle collapse</label><br>
|
||||
<input type="checkbox" class="clps" id="collapse1" autocomplete="off"><div class="well" style="margin-left: 10px; margin-right: 10px;">This text will be shown or hidden based on the above button.</div><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Accordion style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<div style="margin-left: 10px; margin-right: 10px;">
|
||||
<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>
|
||||
</div>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="progress">Progress bars</h2>
|
||||
<p>The progress bar module is very easy to use and extend. Simply create a <code><div></code> with the <code>.prg</code> class and inside it add a <code><span></code> element with the desired <code>style="width:XX%"</code> and you have a progress bar. Add text inside the <code><span></code> element if you want. You can use the <code>.green</code> or <code>.red</code> variants for the <code><span></code> element if you want to use different colors. Finally, you can always stack multiple progress bars, by simply adding more <code><span></code> elements, just make sure their widths add up to 100% or less.</p>
|
||||
|
||||
<h3>Default progress bar style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span style="width:60%;">60%</span></div><br>
|
||||
<pre class="panelcode"><div class="prg"><span style="width:60%;">60%</span></div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress bar variant styles</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="green" style="width:40%;"></span></div><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="red" style="width:70%;"></span></div><br>
|
||||
<pre class="panelcode"><div class="prg"><span class="green" style="width:40%;"></span></div>
|
||||
<div class="prg"><span class="red" style="width:70%;"></span></div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Stacked progress bars</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;">
|
||||
<span class="red" style="width:30%;"></span>
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div><br>
|
||||
<pre class="panelcode"><div class="prg">
|
||||
<span class="red" style="width:30%;"></span>
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress spinners</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<p>Spinner dots: <span class="spinner-dots"></span></p>
|
||||
<p>Spinner round: <span class="spinner-round"></span></p>
|
||||
<br>
|
||||
<pre class="panelcode"><span class="spinner-dots"></span>
|
||||
<span class="spinner-round"></span></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="carousel">Carousel</h2>
|
||||
<p>The carousel module allows you to create manually-controlled image slideshows for your pages. <strong>Nested carousels might cause unexpected behavior, please refrain from using them.</strong></p>
|
||||
|
||||
<h3>Carousel structure</h3>
|
||||
<p>The base structure for the carousel component is as follows:</p>
|
||||
<ul>
|
||||
<li>Specify a carousel wrapper, using the <code>.carousel</code> class on a <code><div></code> element.</li>
|
||||
<li>Inside the wrapper, add the an <code><input type="radio"></code>, followed immediately by a <code><div></code> element. Inside the latter, add an <code><img></code> element, followed by a <code><div></code> element which will act as the image's description. Finally, right after closing the first <code><div></code> element, add a <code><label></code> linked to the radio button for the image.</li>
|
||||
<li>Repeat the process as many times as you want to add more images. <strong>Remember that you cannot skip the description <code><div></code> element, even if it is empty, as it is required for the component to work properly.</strong></li>
|
||||
<li>Add the <code>checked</code> 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.</li>
|
||||
</ul>
|
||||
<p><strong>Auto-scrolling is not enabled by default in this carousel component.</strong> 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.</p>
|
||||
|
||||
<h3>Carousel example</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<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>
|
||||
<br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="utility">Utilities & Helper classes</h2>
|
||||
<p>The core utilities module contains a set of useful utilities and helper classes to make common tasks easier when developing new pages.</p>
|
||||
|
||||
<h3>Generic borders</h3>
|
||||
<p>By using the <code>opacity</code> CSS property in a creative way, along with <code>border-radius</code>es, we have created utility classes that will create generic borders for virtually any element you want. Simply add the <code>.bordered</code> class to create a generic border around an element. You can also use the <code>.rounded</code> and <code>.circle</code> classes (with or without the border style) to create reounded or circular corners for different elements accordingly.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<span>Button with generic border:</span> <button class="btn blue bordered">Button</button><br>
|
||||
<span>Image with generic border and rounded corners:</span> <img class="bordered rounded" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br><br>
|
||||
<pre class="panelcode"><button class="btn blue bordered">Button</button>
|
||||
<img class="bordered rounded" src="favicon.png">
|
||||
<img class="circle" src="favicon.png"></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Contextual colors and backgrounds</h3>
|
||||
<p>You can easily add contextual text or background color to certain textual elements by simply using one of the contextual prefixes (<code>.txt-</code> and <code>.bg-</code> respectively) and a color suffix (<code>red</code>, <code>green</code> or <code>blue</code>).</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<p>Here is some text with contextual colors: <span class="txt-red">red</span>, <span class="txt-green">green</span> & <span class="txt-blue">blue</span>.<br>
|
||||
And here is some text with contextual backgrounds: <span class="bg-red">red</span>, <span class="bg-green">green</span> & <span class="bg-blue">blue</span>.</p>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Image thumbnails</h3>
|
||||
<p>Image thumbnails can be used to stylize images by adding a custom border around them by simply using the <code>.thumb</code> class.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<img class="thumb" src="favicon.png" style="height: 100px; width: auto; display:inline-block;"><br><br>
|
||||
<pre class="panelcode"><img class="thumb" src="favicon.png"></pre>
|
||||
</div>
|
||||
|
||||
<h3>Utility symbols</h3>
|
||||
<p>You can easily add carets and close symbols by using the <code>.caret</code> and <code>.close</code> classes respectively.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<span class="caret" style="padding:0;"></span>
|
||||
<span class="close"></span><br>
|
||||
<pre class="panelcode"><span class="caret"></span>
|
||||
<span class="close"></span></pre>
|
||||
</div>
|
||||
|
||||
<h3>Helper classes</h3>
|
||||
<p>Apart from the above utilities, there are some extra classes provided to help streamline the development process. Some of these classes use the <code class="txt-red">!important</code> property to override other styles, so be careful when using them. The provided helper classes are as follows:</p>
|
||||
<ul>
|
||||
<li>Quick floats can be created using the <code>.drg-left</code> and <code>.drg-right</code> classes.</li>
|
||||
<li>Center content blocks can be created using the <code>.ct-block</code> class.</li>
|
||||
<li>Utilize the popular <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix hack</a> using the <code>.cf</code> class.</li>
|
||||
<li>Use the <code>.hidden</code> class to hide any content you wish.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="utility-extra">Utilities & Experimental classes</h2>
|
||||
<p>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. <strong>Any components marked as experimental might be unstable and behave unexpectedly, use at your own risk!</strong></p>
|
||||
|
||||
<h3>Breadcrumbs</h3>
|
||||
<p>Create breadcrumbs to indicate the navigational hierarchy of a page's location, using the <code>.brdcrmb</code> class on a list element.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<ol class="brdcrmb">
|
||||
<li><a href="#">Core</a></li>
|
||||
<li><a href="#">Modules</a></li>
|
||||
<li>Utility</li>
|
||||
</ol>
|
||||
<pre class="panelcode"><ol class="brdcrmb">
|
||||
<li><a href="#">Core</a></li>
|
||||
<li><a href="#">Modules</a></li>
|
||||
<li>Utility</li>
|
||||
</ol></pre>
|
||||
</div>
|
||||
|
||||
<h3>Containers</h3>
|
||||
<p>There are multiple types of generic containers provided:</p>
|
||||
<ul>
|
||||
<li>Wells can be created using the <code>.well</code> class and are the simplest type of generic container.</li>
|
||||
<li>Alerts are similar to wells, but are contextualized can be toggled on or off (manually or using scripts). Use the <code>.alert-</code> prefix on an <code><input type="checkbox"></code> along with a color suffix (<code>red</code>, <code>green</code> or <code>blue</code>) and a <code><div></code> element to create an alert. Adding a <code><span class="close"></li> element inside a label pointing to the alert's checkbox will allow user to dismiss the alert.</code>
|
||||
<li>Panels are similar to wells, but looks like application windows. You can create a panel using the <code>.panel</code> class and you can specify a title element for your panel using the <code>.head</code> class on the very first element of your panel.</li>
|
||||
</ul>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<strong>Well:</strong><br><br>
|
||||
<div class="well" style="margin-left: 10px; margin-right: 10px;">This is a well.</div><br>
|
||||
<strong>Alerts:</strong><br><br>
|
||||
<input type="checkbox" id="alert1" class="alert-red" checked><div style="margin-left: 10px; margin-right: 10px;">This is a red alert without a close button.</div><br>
|
||||
<input type="checkbox" id="alert2" class="alert-green" checked><div style="margin-left: 10px; margin-right: 10px;">This is a green alert with a <a href="#">link</a> but no close button either.</div><br>
|
||||
<input type="checkbox" id="alert3" class="alert-blue" checked autocomplete="off"><div style="margin-left: 10px; margin-right: 10px;">This is a blue alert with a close button. <label for="alert3"><span class="close"></span></label></div><br>
|
||||
<strong>Panel:</strong><br><br>
|
||||
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h3 class="head">Panel head</h3>
|
||||
<p>This is a panel.</p>
|
||||
</div><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Popovers</h3>
|
||||
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></code> 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.</p>
|
||||
<div class="panel"><h4 class="head">Example</h4><br>
|
||||
<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><br><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Experimental components</h3>
|
||||
<p>There are two experimental components provided, stateful buttons and button groups:
|
||||
<ul><li>To create a stateful button apply the <code>.stateful</code> class to an <code><input type="checkbox"></code>, followed by two labels (the first is for the inactive state and the second one for the active state).<strong>This component is not enabled by default as it is unstable, you can enable it manually.</strong></li>
|
||||
<li>To create a button group, use the <code>.btn-grp</code> class to wrap a set of <code>.btn</code> elements.<strong>This component is considered stable enough, so it is enabled by default, you can disable it manually.</strong></li></ul>
|
||||
<div class="panel"><h4 class="head">Example</h4>
|
||||
<input type="checkbox" id="stateful1" class="stateful" autocomplete="off"><label for="stateful1" class="btn blue" style="margin-left: 10px; margin-right: 10px;width:200px;">Click to load</label><label class="btn blue" style="margin-left: 10px; margin-right: 10px;width:200px;">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>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row footer">
|
||||
<div class="col xs-no md-1"></div>
|
||||
<div class="col xs-12 md-10 footer">
|
||||
<p style="padding-top: 10px;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</p>
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<h1>Modules</h1>
|
||||
<p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark> Core</h2>
|
||||
<p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
|
||||
<a href="core.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark> Grid</h2>
|
||||
<p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
|
||||
<a href="grid.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
||||
<p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
|
||||
<a href="navigation.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
|
||||
<a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark> Table</h2>
|
||||
<p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
|
||||
<a href="table.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark> Card</h2>
|
||||
<p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
|
||||
<a href="card.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark> Tab</h2>
|
||||
<p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
|
||||
<a href="tab.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
||||
<p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
|
||||
<a href="contextual.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered" style="padding-bottom: 40px;">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary bordered"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark> Progress</h2>
|
||||
<p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
||||
<a href="progress.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark> Utility</h2>
|
||||
<p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
|
||||
<a href="utility.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
BIN
docs/v1/favicon.png
Normal file
BIN
docs/v1/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
123
docs/v1/index.html
Normal file
123
docs/v1/index.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!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"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" class="hidden" id="nav-toggle" autocomplete="off" class="hidden">
|
||||
<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>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> or the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre style="overflow: auto;"><link rel=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"</span>></pre>
|
||||
|
||||
<p>If you'd rather use a package manager, <strong>mini.css</strong> is available in both Bower and NPM:</p>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bower install</span> mini.css</pre>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">npm install</span> mini.css</pre><br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
<ul>
|
||||
<li><strong>Size matters!</strong> - The key focus of <strong>mini.css</strong> is to provide developers with a very light framework to build their pages with. To accomplish this, we stripped down most of the commonly-used components to their essentials, utilising the magic of CSS. By building lighter components, using only CSS, we made <strong>mini.css</strong> really tiny, just under 5KB for the default flavor.</li>
|
||||
|
||||
<li><strong>Easily customize your pages!</strong> - <strong>mini.css</strong> does not rely on a huge monolithic CSS file to do everything. In fact, we split the framework into smaller modules using Sass(SCSS), so you can easily distinguish what pieces you want in your final stylesheet. But that's not all! Every single detail of the provided modules can be changed, from colors and border styles to class names and structure. It's all really simple and you can do it without a lot of CSS or Sass knowledge. These customized stylesheets are called <strong>flavors</strong> and are one of the key differences between <strong>mini.css</strong> and other frameworks.</li>
|
||||
|
||||
<li><strong>We are mobile-friendly!</strong><sup>*</sup> - That's right! We built <strong>mini.css</strong> from the ground up to support mobile devices as best as possible and be responsive. All of this functionality can be fully customized to suit your end-users.</li>
|
||||
|
||||
<li><strong>No Javascript!</strong> - As much as we all love Javascript, we tried to keep all of the modules in <strong>mini.css</strong> pure CSS. This means no dependencies on Javascript libraries or excessive code for events you might never use.</li>
|
||||
|
||||
</ul>
|
||||
<small>(*): We do not want to claim that any website will ever instantly work 100% the way you want on mobile, but mini.css eliminates a lot of the tedious work of making your websites mobile-friendly, so you can focus on the interesting parts that actually need your attention.</small>
|
||||
|
||||
<h2 id="modules">What does it contain?</h2>
|
||||
<p><strong>mini.css</strong> is split up into modules, each with a specific focus or set of components. These modules are categorized under core modules and extra modules. We suggest that you use most of the core modules in your projects, as most projects can make good use of them. As for the extra modules, we suggest you carefully pick the ones you need for your project. Below is a quick overview of all the modules:</p>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#base">Core : Base</a></h3><p>A modified version of <a href="https://necolas.github.io/normalize.css/">normalize.css</a> combined with a long list of variables produces a customized base for your projects along with typography rules and colors.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#grid">Core : Responsive Grid</a></h3><p>A customizable reponsive grid that lets you build pages that look great on all devices wih minimal tweaking..</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#nav">Core : Navigation</a></h3><p>A customizable responsive navigation bar for your pages.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#dropdown">Extra : Navigation - Dropdown</a></h3><p>The navigation system can easily be extended using the dropdown component.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#tab">Extra : Navigation - Tabs</a></h3><p>If you would rather use tabs instead of the usual navigation bar, you can use this module to enable tabbed navigation.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#table">Core : Tables</a></h3><p>Give a fresh style to your tables without overloading your page.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#form">Core : Forms</a></h3><p>Simple, elegant and light forms that will work well and give feedback to the user.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#button">Core : Buttons</a></h3><p>Tiny button styles that allow you to beautify your buttons, labels and links.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#label">Extra : Labels & Badges</a></h3><p>Small badges and labels to provide your user's with all the info they need.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#modal">Extra : Modals</a></h3><p>Modal dialog prompts to notify your users the easy way.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#collapse">Extra : Collapse</a></h3><p>Hide and show text using customizable collapse buttons.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#progress">Extra : Progress Bars</a></h3><p>A simple module that allows you to create progess bars for your pages.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#carousel">Extra : Carousel</a></h3><p>Really light and customizable imaage slideshow for all your showcase needs.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#utility">Core : Utilities & Helper Classes</a></h3><p>Classes for generic borders, image thumbnails, contextual text coloring, utility buttons and more.</p></li>
|
||||
|
||||
<li><h3><a href="https://chalarangelo.github.io/mini.css/modules#utility-extra">Extra : Utilities & Experimental Classes</a></h3><p>Breadcrumbs, containers, panels, alerts, popovers, button groups and more.</p></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row footer">
|
||||
<div class="col xs-no md-1"></div>
|
||||
<div class="col xs-12 md-10 footer">
|
||||
<p style="padding-top: 10px;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
857
docs/v1/modules.html
Normal file
857
docs/v1/modules.html
Normal file
|
|
@ -0,0 +1,857 @@
|
|||
<!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"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
input[type="checkbox"].stateful{display: none;}
|
||||
input[type="checkbox"].stateful+label{display:block;}
|
||||
input[type="checkbox"].stateful+label+label{display:none;}
|
||||
input[type="checkbox"]:checked.stateful+label{display:none;}
|
||||
input[type="checkbox"]:checked.stateful+label+label{display:block;}
|
||||
.btn-grp .btn{margin-left:-5px;}
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
.panel > .nav , .panel > .bordered, .panel > .circle{ padding: 0 !important; }
|
||||
.panel > .btn { padding: 6px 12px !important;}
|
||||
.panel > .lbl { padding: 6px 10px !important; }
|
||||
.panel > .bdg { padding: 3px 8px !important; }
|
||||
.panel > .well { padding: 20px !important; }
|
||||
.panel code, .panel kbd, .panel pre{ padding: 2px 4px !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<input type="checkbox" id="nav-toggle" autocomplete="off" class="hidden">
|
||||
<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><a href="https://chalarangelo.github.io/mini.css/modules-niteowl">NiteOwl</a></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>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"></pre><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 typography 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>
|
||||
|
||||
<h2 id="modal">Modals</h2>
|
||||
<p>Modal dialogs can be easily added and customized to the user's liking and offer support for the close button utility. <strong>Showing more than one modal dialog at once might have unexpected results and is not encouraged.</strong></p>
|
||||
|
||||
<h3>Modal dialog structure</h3>
|
||||
<p>The basic structure of a modal dialog is as follows:</p>
|
||||
<ul>
|
||||
<li>Use the <code>.modal</code> class on an <code><input type="checkbox"></code>. <strong>Place this checkbox along with any other elements specified below at the very start of your <code><body></code>.</strong></li>
|
||||
<li>Add a <code><div></code> right after the checkbox. Inside it add a second <code><div></code> with your modal dialog's contents, as well as a <code><label></code> for the checkbox <strong>without any content inside it.</strong> 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.</li>
|
||||
<li>If you have enabled close button support, you can add a <code><span class="close"></code> inside a label for the checkbox in the innermost <code><div></code> to add a close button to the top right corner of your modal dialog.</li>
|
||||
<li>Finally, add a label linking to the modal dialog's checkbox anywhere in your page. You can also toggle the modal using Javascript, by setting the checkbox's state to <code>checked</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Modal dialog example</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<label for="modal1" class="btn red">Open modal</label><br><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="collapse">Collapse</h2>
|
||||
<p>The collapse module adds two components with similar functionality. </p>
|
||||
<ul>
|
||||
<li>Single collapse components can be created by adding the <code>.clps</code> class on an <code><input type="checkbox"></code> element, followed by a <code><div></code> with the content to be hidden/shown based on the collapse's state.</li>
|
||||
<li>Similarly, accordion collapse components can be created by adding the <code>.acrd</code> class to as many <code><input type="radio"></code> elements as you want. You should add a <code><label></code> linking to each radio immediately after it, followed by a <code><div></code> with the content to be hidden/shown based on the accordion's state. </li>
|
||||
<li>You can use the single collapse component's styling for a set of radio buttons or the accordion's styling for a single checkbox if you would like to use a different styling for your collapse components without adding new CSS definitions.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Single collapse style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<label for="collapse1" class="btn blue">Toggle collapse</label><br>
|
||||
<input type="checkbox" class="clps" id="collapse1" autocomplete="off"><div class="well" style="margin-left: 10px; margin-right: 10px;">This text will be shown or hidden based on the above button.</div><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Accordion style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<div style="margin-left: 10px; margin-right: 10px;">
|
||||
<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>
|
||||
</div>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="progress">Progress bars</h2>
|
||||
<p>The progress bar module is very easy to use and extend. Simply create a <code><div></code> with the <code>.prg</code> class and inside it add a <code><span></code> element with the desired <code>style="width:XX%"</code> and you have a progress bar. Add text inside the <code><span></code> element if you want. You can use the <code>.green</code> or <code>.red</code> variants for the <code><span></code> element if you want to use different colors. Finally, you can always stack multiple progress bars, by simply adding more <code><span></code> elements, just make sure their widths add up to 100% or less.</p>
|
||||
|
||||
<h3>Default progress bar style</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span style="width:60%;">60%</span></div><br>
|
||||
<pre class="panelcode"><div class="prg"><span style="width:60%;">60%</span></div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress bar variant styles</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="green" style="width:40%;"></span></div><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="red" style="width:70%;"></span></div><br>
|
||||
<pre class="panelcode"><div class="prg"><span class="green" style="width:40%;"></span></div>
|
||||
<div class="prg"><span class="red" style="width:70%;"></span></div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Stacked progress bars</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;">
|
||||
<span class="red" style="width:30%;"></span>
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div><br>
|
||||
<pre class="panelcode"><div class="prg">
|
||||
<span class="red" style="width:30%;"></span>
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress spinners</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<p>Spinner dots: <span class="spinner-dots"></span></p>
|
||||
<p>Spinner round: <span class="spinner-round"></span></p>
|
||||
<br>
|
||||
<pre class="panelcode"><span class="spinner-dots"></span>
|
||||
<span class="spinner-round"></span></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="carousel">Carousel</h2>
|
||||
<p>The carousel module allows you to create manually-controlled image slideshows for your pages. <strong>Nested carousels might cause unexpected behavior, please refrain from using them.</strong></p>
|
||||
|
||||
<h3>Carousel structure</h3>
|
||||
<p>The base structure for the carousel component is as follows:</p>
|
||||
<ul>
|
||||
<li>Specify a carousel wrapper, using the <code>.carousel</code> class on a <code><div></code> element.</li>
|
||||
<li>Inside the wrapper, add the an <code><input type="radio"></code>, followed immediately by a <code><div></code> element. Inside the latter, add an <code><img></code> element, followed by a <code><div></code> element which will act as the image's description. Finally, right after closing the first <code><div></code> element, add a <code><label></code> linked to the radio button for the image.</li>
|
||||
<li>Repeat the process as many times as you want to add more images. <strong>Remember that you cannot skip the description <code><div></code> element, even if it is empty, as it is required for the component to work properly.</strong></li>
|
||||
<li>Add the <code>checked</code> 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.</li>
|
||||
</ul>
|
||||
<p><strong>Auto-scrolling is not enabled by default in this carousel component.</strong> 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.</p>
|
||||
|
||||
<h3>Carousel example</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<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>
|
||||
<br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="utility">Utilities & Helper classes</h2>
|
||||
<p>The core utilities module contains a set of useful utilities and helper classes to make common tasks easier when developing new pages.</p>
|
||||
|
||||
<h3>Generic borders</h3>
|
||||
<p>By using the <code>opacity</code> CSS property in a creative way, along with <code>border-radius</code>es, we have created utility classes that will create generic borders for virtually any element you want. Simply add the <code>.bordered</code> class to create a generic border around an element. You can also use the <code>.rounded</code> and <code>.circle</code> classes (with or without the border style) to create reounded or circular corners for different elements accordingly.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<span>Button with generic border:</span> <button class="btn blue bordered">Button</button><br>
|
||||
<span>Image with generic border and rounded corners:</span> <img class="bordered rounded" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br><br>
|
||||
<pre class="panelcode"><button class="btn blue bordered">Button</button>
|
||||
<img class="bordered rounded" src="favicon.png">
|
||||
<img class="circle" src="favicon.png"></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Contextual colors and backgrounds</h3>
|
||||
<p>You can easily add contextual text or background color to certain textual elements by simply using one of the contextual prefixes (<code>.txt-</code> and <code>.bg-</code> respectively) and a color suffix (<code>red</code>, <code>green</code> or <code>blue</code>).</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<p>Here is some text with contextual colors: <span class="txt-red">red</span>, <span class="txt-green">green</span> & <span class="txt-blue">blue</span>.<br>
|
||||
And here is some text with contextual backgrounds: <span class="bg-red">red</span>, <span class="bg-green">green</span> & <span class="bg-blue">blue</span>.</p>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Image thumbnails</h3>
|
||||
<p>Image thumbnails can be used to stylize images by adding a custom border around them by simply using the <code>.thumb</code> class.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<img class="thumb" src="favicon.png" style="height: 100px; width: auto; display:inline-block;"><br><br>
|
||||
<pre class="panelcode"><img class="thumb" src="favicon.png"></pre>
|
||||
</div>
|
||||
|
||||
<h3>Utility symbols</h3>
|
||||
<p>You can easily add carets and close symbols by using the <code>.caret</code> and <code>.close</code> classes respectively.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<span class="caret" style="padding:0;"></span>
|
||||
<span class="close"></span><br>
|
||||
<pre class="panelcode"><span class="caret"></span>
|
||||
<span class="close"></span></pre>
|
||||
</div>
|
||||
|
||||
<h3>Helper classes</h3>
|
||||
<p>Apart from the above utilities, there are some extra classes provided to help streamline the development process. Some of these classes use the <code class="txt-red">!important</code> property to override other styles, so be careful when using them. The provided helper classes are as follows:</p>
|
||||
<ul>
|
||||
<li>Quick floats can be created using the <code>.drg-left</code> and <code>.drg-right</code> classes.</li>
|
||||
<li>Center content blocks can be created using the <code>.ct-block</code> class.</li>
|
||||
<li>Utilize the popular <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix hack</a> using the <code>.cf</code> class.</li>
|
||||
<li>Use the <code>.hidden</code> class to hide any content you wish.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="utility-extra">Utilities & Experimental classes</h2>
|
||||
<p>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. <strong>Any components marked as experimental might be unstable and behave unexpectedly, use at your own risk!</strong></p>
|
||||
|
||||
<h3>Breadcrumbs</h3>
|
||||
<p>Create breadcrumbs to indicate the navigational hierarchy of a page's location, using the <code>.brdcrmb</code> class on a list element.</p>
|
||||
<div class="panel" ><h4 class="head">Example</h4>
|
||||
<ol class="brdcrmb">
|
||||
<li><a href="#">Core</a></li>
|
||||
<li><a href="#">Modules</a></li>
|
||||
<li>Utility</li>
|
||||
</ol>
|
||||
<pre class="panelcode"><ol class="brdcrmb">
|
||||
<li><a href="#">Core</a></li>
|
||||
<li><a href="#">Modules</a></li>
|
||||
<li>Utility</li>
|
||||
</ol></pre>
|
||||
</div>
|
||||
|
||||
<h3>Containers</h3>
|
||||
<p>There are multiple types of generic containers provided:</p>
|
||||
<ul>
|
||||
<li>Wells can be created using the <code>.well</code> class and are the simplest type of generic container.</li>
|
||||
<li>Alerts are similar to wells, but are contextualized can be toggled on or off (manually or using scripts). Use the <code>.alert-</code> prefix on an <code><input type="checkbox"></code> along with a color suffix (<code>red</code>, <code>green</code> or <code>blue</code>) and a <code><div></code> element to create an alert. Adding a <code><span class="close"></li> element inside a label pointing to the alert's checkbox will allow user to dismiss the alert.</code>
|
||||
<li>Panels are similar to wells, but looks like application windows. You can create a panel using the <code>.panel</code> class and you can specify a title element for your panel using the <code>.head</code> class on the very first element of your panel.</li>
|
||||
</ul>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<strong>Well:</strong><br><br>
|
||||
<div class="well" style="margin-left: 10px; margin-right: 10px;">This is a well.</div><br>
|
||||
<strong>Alerts:</strong><br><br>
|
||||
<input type="checkbox" id="alert1" class="alert-red" checked><div style="margin-left: 10px; margin-right: 10px;">This is a red alert without a close button.</div><br>
|
||||
<input type="checkbox" id="alert2" class="alert-green" checked><div style="margin-left: 10px; margin-right: 10px;">This is a green alert with a <a href="#">link</a> but no close button either.</div><br>
|
||||
<input type="checkbox" id="alert3" class="alert-blue" checked autocomplete="off"><div style="margin-left: 10px; margin-right: 10px;">This is a blue alert with a close button. <label for="alert3"><span class="close"></span></label></div><br>
|
||||
<strong>Panel:</strong><br><br>
|
||||
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h3 class="head">Panel head</h3>
|
||||
<p>This is a panel.</p>
|
||||
</div><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Popovers</h3>
|
||||
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></code> 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.</p>
|
||||
<div class="panel"><h4 class="head">Example</h4><br>
|
||||
<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><br><br>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div>
|
||||
|
||||
<h3>Experimental components</h3>
|
||||
<p>There are two experimental components provided, stateful buttons and button groups:
|
||||
<ul><li>To create a stateful button apply the <code>.stateful</code> class to an <code><input type="checkbox"></code>, followed by two labels (the first is for the inactive state and the second one for the active state).<strong>This component is not enabled by default as it is unstable, you can enable it manually.</strong></li>
|
||||
<li>To create a button group, use the <code>.btn-grp</code> class to wrap a set of <code>.btn</code> elements.<strong>This component is considered stable enough, so it is enabled by default, you can disable it manually.</strong></li></ul>
|
||||
<div class="panel"><h4 class="head">Example</h4>
|
||||
<input type="checkbox" id="stateful1" class="stateful" autocomplete="off"><label for="stateful1" class="btn blue" style="margin-left: 10px; margin-right: 10px;width:200px;">Click to load</label><label class="btn blue" style="margin-left: 10px; margin-right: 10px;width:200px;">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>
|
||||
<pre class="panelcode"><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></pre>
|
||||
</div><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row footer">
|
||||
<div class="col xs-no md-1"></div>
|
||||
<div class="col xs-12 md-10 footer">
|
||||
<p style="padding-top: 10px;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -654,3 +654,7 @@
|
|||
- Started writing `customization`.
|
||||
- Documented `core` in `customization`.
|
||||
- `customization` documentation complete (very simplistic, but I think the flavor file is better as a guideline).
|
||||
- Updated `bower.json` and `package.json`.
|
||||
- Added `.npmignore` and tested to see if it works.
|
||||
- Moved docs around, getting ready for release.
|
||||
- *TODO* Delete this file eventually.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,10 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161213 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -17,260 +13,6 @@
|
|||
<meta property="og:image" content="favicon.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
||||
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
||||
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
||||
</style>
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="index.html" class="button">Introduction</a>
|
||||
<a href="modules.html" class="button">Modules</a>
|
||||
<a href="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Minimal<small>Size matters!</small></h2><br>
|
||||
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> aims to provide as much functionality as possible in about 5KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive<small>Think mobile!</small></h2><br>
|
||||
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br>
|
||||
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h2>Setup and usage</h2>
|
||||
<p>You can import he default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
</div><br>
|
||||
<p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="#">Customization</a> page for information, tips on how to get started and general guidelines.</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI toolkits (Bootstrap, Semantic UI etc):</p>
|
||||
<table>
|
||||
<caption>Toolkit file size comparison</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Version</th>
|
||||
<th>Size (uncompressed)</th>
|
||||
<th>Size (minified)</th>
|
||||
<th>Size (gzipped)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Bootstrap</td>
|
||||
<td data-label="Version"><a href="https://github.com/twbs/bootstrap/blob/0b9c4a4007c44201dce9a6cc1a38407005c26c86/dist/css/bootstrap.css">v3.3.7</a></td>
|
||||
<td data-label="Size (uncompressed)">143 KB</td>
|
||||
<td data-label="Size (minified)">117 KB</td>
|
||||
<td data-label="Size (gzipped)">20 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Material Framework</td>
|
||||
<td data-label="Version"><a href="https://github.com/nt1m/material-framework/blob/c5f7fed174686118dded31aecca311d4cc9d8b07/css/material.css">v3.0</a></td>
|
||||
<td data-label="Size (uncompressed)">114 KB</td>
|
||||
<td data-label="Size (minified)">90 KB</td>
|
||||
<td data-label="Size (gzipped)">18 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">mini.css</td>
|
||||
<td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.0/dist/css/mini-default.css">v2.0</a></td>
|
||||
<td data-label="Size (uncompressed)">47 KB</td>
|
||||
<td data-label="Size (minified)">36 KB</td>
|
||||
<td data-label="Size (gzipped)">7 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Semantic UI</td>
|
||||
<td data-label="Version"><a href="https://github.com/Semantic-Org/Semantic-UI/blob/0b1b59b0e1c780e842820df5c1904a162034812c/dist/semantic.css">v2.2.6</a></td>
|
||||
<td data-label="Size (uncompressed)">730 KB</td>
|
||||
<td data-label="Size (minified)">550 KB</td>
|
||||
<td data-label="Size (gzipped)">95 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Zurb Foundation</td>
|
||||
<td data-label="Version"><a href="https://github.com/zurb/foundation-sites/blob/ab172838d6de406204956015c9fd393c5a526e0e/dist/foundation.css">v3.0</a></td>
|
||||
<td data-label="Size (uncompressed)">90 KB</td>
|
||||
<td data-label="Size (minified)">64 KB</td>
|
||||
<td data-label="Size (gzipped)">12 KB</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark> The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<h3>Module list</h3>
|
||||
<ul>
|
||||
<li><strong>Core</strong> - Resets, typography rules and fixes</li>
|
||||
<li><strong>Grid</strong> - Powerful, responsive flexbox-based grid</li>
|
||||
<li><strong>Navigation</strong> - Common elements for navigation</li>
|
||||
<li><strong>Input Control</strong> - Forms, buttons and inputs</li>
|
||||
<li><strong>Table</strong> - Modern, responsive tables</li>
|
||||
<li><strong>Card</strong> - Sleek, modern content containers</li>
|
||||
<li><strong>Tab</strong> - Responsive tabs and accordions</li>
|
||||
<li><strong>Contextual</strong> - Contextual highlights and alerts</li>
|
||||
<li><strong>Progress</strong> - Modern progress bars and loaders</li>
|
||||
<li><strong>Utility</strong> - Utility and helper classes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<h3>Why does <strong>mini.css</strong> have so few modules?</h3>
|
||||
<p>Modules are what makes toolkits so powerful, by giving developers the essential components they need to structure and style their websites. <strong>mini.css</strong> simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to do exactly what the developer wants. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<table>
|
||||
<caption>Browser support</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Not supported</th>
|
||||
<th>Partially supported</th>
|
||||
<th>Fully supported</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-internet-explorer" aria-hidden="true" style="color: #1565c0;"></i> Internet Explorer</td>
|
||||
<td data-label="Not supported">8-</td>
|
||||
<td data-label="Partially supported">9-10</td>
|
||||
<td data-label="Fully supported">11+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-edge" aria-hidden="true" style="color: #0d47a1;"></i> Edge</td>
|
||||
<td data-label="Not supported">n/a</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">12+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-firefox" aria-hidden="true" style="color: #bf360c;"></i> Firefox</td>
|
||||
<td data-label="Not supported">21-</td>
|
||||
<td data-label="Partially supported">22-27</td>
|
||||
<td data-label="Fully supported">28+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-chrome" aria-hidden="true" style="color: #ff8f00;"></i> Chrome</td>
|
||||
<td data-label="Not supported">20-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">21+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-safari" aria-hidden="true" style="color: #0277bd;"></i> Safari</td>
|
||||
<td data-label="Not supported">6-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">6.1+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-opera" aria-hidden="true" style="color: #b71c1c;"></i> Opera</td>
|
||||
<td data-label="Not supported">11.5-</td>
|
||||
<td data-label="Partially supported">12.1-16</td>
|
||||
<td data-label="Fully supported">17+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-android" aria-hidden="true" style="color: #827717;"></i> Android Browser</td>
|
||||
<td data-label="Not supported">4.3-</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">4.4+</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark> Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the above table, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not display or behave properly due to the browsers themselves.</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 40px;">
|
||||
<div class="col-sm">
|
||||
<h2>Getting started</h2>
|
||||
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
|
||||
<ul>
|
||||
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161213 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Modules</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, modules">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.box-left { text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="index.html" class="button">Introduction</a>
|
||||
<a href="modules.html" class="button">Modules</a>
|
||||
<a href="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<h1>Modules</h1>
|
||||
<p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark> Core</h2>
|
||||
<p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
|
||||
<a href="core.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark> Grid</h2>
|
||||
<p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
|
||||
<a href="grid.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
||||
<p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
|
||||
<a href="navigation.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
|
||||
<a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark> Table</h2>
|
||||
<p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
|
||||
<a href="table.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark> Card</h2>
|
||||
<p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
|
||||
<a href="card.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark> Tab</h2>
|
||||
<p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
|
||||
<a href="tab.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
||||
<p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
|
||||
<a href="contextual.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered" style="padding-bottom: 40px;">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary bordered"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark> Progress</h2>
|
||||
<p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
||||
<a href="progress.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark> Utility</h2>
|
||||
<p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
|
||||
<a href="utility.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
11
package.json
11
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "mini.css",
|
||||
"version": "1.1.0",
|
||||
"description": "A minimal Sass-y responsive mobile-first style-agnostic CSS framework.",
|
||||
"description": "A minimal, responsive, style-agnostic CSS toolkit.",
|
||||
"main": "flavors/mini-default.min.css",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
|
|
@ -17,12 +17,11 @@
|
|||
"mini.css",
|
||||
"mini",
|
||||
"CSS",
|
||||
"responsive",
|
||||
"framework",
|
||||
"mobile",
|
||||
"first",
|
||||
"style",
|
||||
"agnostic",
|
||||
"toolkit",
|
||||
"minimal",
|
||||
"responsive",
|
||||
"style-agnostic",
|
||||
"Sass"
|
||||
],
|
||||
"author": "Angelos Chalaris (Chalarangelo)",
|
||||
|
|
|
|||
Loading…
Reference in a new issue