mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-13 01:13:59 +02:00
Updated CSS references, added footer, finished module demos
This commit is contained in:
Angelos Chalaris
@@ -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>
|
||||
Reference in New Issue
Block a user