mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-30 00:59:58 +02:00
Code Issues Releases Wiki Activity

Housekeeping

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-07 12:23:53 +02:00
parent 74a815642f
commit 9d002418c2
16 changed files with 730 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
docs/index.html
View File

@@ -1,92 +1,48 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<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 framework</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 framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.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-area {
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
background: linear-gradient(#455a64,#192024);
}
#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;
}
@media (min-width: 768px) {
#top-area {
height: 440px;
}
#top-logo {
margin: 88px auto -24px;
}
#top-heading {
margin-bottom: -6px;
}
}
#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: #e53935; }
.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>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<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 framework</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 framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<style>
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
#top-area { height: 320px; background: -webkit-linear-gradient(#455a64,#192024); background: linear-gradient(#455a64,#192024);}
#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;}
@media (min-width: 768px) { #top-area {height: 440px;} #top-logo {margin: 88px auto -24px;} #top-heading {margin-bottom: -6px;} }
#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-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
.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; } [class^='fore-'] { font-family: monospace, monospace;}
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
</style>
</head>
<body>
<div class="container" id="top-area">
<div class="row">
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<div class="container" id="top-area"><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.1</mark>
</div>
</div>
</div>
</div>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a><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="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</div>
</header>
</div></div>
</div></div>
<header class="sticky">
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a>
<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="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</div>
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
@@ -94,9 +50,7 @@
<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>
<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 less than 7KB 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>
@@ -104,9 +58,7 @@
<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>
<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>
@@ -114,9 +66,7 @@
<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>
<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>
@@ -130,72 +80,47 @@
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css&quot;</span>&gt;</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 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.html">Customization</a> page for information, tips on how to get started and general guidelines.</p>
<br><hr>
<p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="customization.html">Customization</a> page for information, tips on how to get started and general guidelines.</p><br><hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI frameworks (Bootstrap, Semantic UI etc):</p>
<table>
<caption>Framework 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.1.0/dist/css/mini-default.css">v2.1</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="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;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>
<table> <caption>Framework 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.1.0/dist/css/mini-default.css">v2.1</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="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;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 col-lg-5 col-lg-offset-1">
<h3>Module list</h3>
@@ -219,63 +144,40 @@
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;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 table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p>
<br><hr>
<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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;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 table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><br><hr>
</div>
</div>
<div class="row" style="padding-bottom: 60px;">
@@ -289,7 +191,7 @@
<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>
</div>
</div></main>
<!-- End of page content-->