mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-18 05:18:25 +01:00
Updated CSS references, added footer, finished module demos
This commit is contained in:
Angelos Chalaris
parent
d435fa64ec
commit
2abc436ed5
@ -11,9 +11,14 @@
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css"> -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/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">
|
||||
@ -51,8 +56,8 @@
|
||||
<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 page</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="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"></pre>
|
||||
<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="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css"></pre>
|
||||
<br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
@ -73,39 +78,45 @@
|
||||
|
||||
<ul>
|
||||
|
||||
<li><h3>Core : Base</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#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>Core : Responsive Grid</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#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>Core : Navigation</h3><p>A customizable responsive navigation bar for your pages.</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>Extra : Navigation - Dropdown</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#dropdown">Extra : Navigation - Dropdown</a></h3><p>The navigation system can easily be extended using the dropdown component.</p></li>
|
||||
|
||||
<li><h3>Extra : Navigation - Tabs</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#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>Core : Tables</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#table">Core : Tables</a></h3><p>Give a fresh style to your tables without overloading your page.</p></li>
|
||||
|
||||
<li><h3>Core : Forms</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#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>Core : Buttons</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#button">Core : Buttons</a></h3><p>Tiny button styles that allow you to beautify your buttons, labels and links.</p></li>
|
||||
|
||||
<li><h3>Extra : Labels & Badges</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#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>Extra : Modals</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#modal">Extra : Modals</a></h3><p>Modal dialog prompts to notify your users the easy way.</p></li>
|
||||
|
||||
<li><h3>Extra : Collapse</h3><p>Hide and show text using customizable collapse buttons.</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>Extra : Progress Bars</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#progress">Extra : Progress Bars</a></h3><p>A simple module that allows you to create progess bars for your pages.</p></li>
|
||||
|
||||
<li><h3>Extra : Carousel</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#carousel">Extra : Carousel</a></h3><p>Really light and customizable imaage slideshow for all your showcase needs.</p></li>
|
||||
|
||||
<li><h3>Core : Utilities & Helper Classes</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">Core : Utilities & Helper Classes</a></h3><p>Classes for generic borders, image thumbnails, contextual text coloring, utility buttons and more.</p></li>
|
||||
|
||||
<li><h3>Extra : Utilities & Experimental Classes</h3><p>Breadcrumbs, containers, panels, alerts, popovers, button groups 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>
|
||||
@ -13,10 +13,19 @@
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -674,8 +683,8 @@
|
||||
</div></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 class="utility">Utilities & Helper classes</h2>
|
||||
<p>The core utiltiy module contains a set of useful utilities and helper classes to make common tasks easier when developing new pages.</p>
|
||||
<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>
|
||||
@ -728,8 +737,106 @@
|
||||
<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" style="margin-left: 10px; margin-right: 10px; padding:0"><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>
|
||||
Loading…
x
Reference in New Issue
Block a user