239 lines
14 KiB
HTML
239 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161113 -->
|
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css"> -->
|
|
<!-- Local stylesheet -->
|
|
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
|
<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">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
|
<style>
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
|
margin-left: -3px; padding: 2px;
|
|
}
|
|
#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-header {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 3px 5px; 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
|
<a href="#" class="button">Introduction</a>
|
|
<a href="#" class="button">Module Overview</a>
|
|
<a href="#" class="button">Module Demos</a>
|
|
<a href="#" class="button">Flavors</a>
|
|
<a href="#" 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-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row cards" style="padding-top: 20px;">
|
|
<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>Reponsive<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-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>
|
|
<hr>
|
|
<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)">38 KB</td>
|
|
<td data-label="Size (minified)">31 KB</td>
|
|
<td data-label="Size (gzipped)">6 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">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">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">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">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">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">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">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>
|
|
</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> |