ae9e864631
Changed the splash logo and updated a lot of the branding for the framework. A follow-up commit will be made to resolve a minor issuue with the documentation images.
224 lines
20 KiB
HTML
224 lines
20 KiB
HTML
<!DOCTYPE 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">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans">
|
|
<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>
|
|
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
|
|
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
|
|
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
|
|
#top-vtag-cont { width: 100%; text-align: center; }
|
|
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
|
|
@media screen and (max-height:480px) { #top-version-tag { top: 70vh; } #description { top: 55vh;}}
|
|
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
|
|
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
|
|
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
|
|
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
|
|
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 8vw solid transparent; border-bottom: 5vw solid #1b0833; z-index: 3; }
|
|
#mt3:after { content: ""; position: absolute; left: -7vw; border-left: 7vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 5vw solid #220a40; z-index: 4; }
|
|
#mt4 { position: absolute; bottom: -0.25vw; right: 9.25vw; width: 0; height: 0; border-left: 6.25vw solid transparent; border-right: 8vw solid transparent; border-bottom: 5.75vw solid #150627; }
|
|
#mt4:after { content: ""; position: absolute; left: -6.25vw; border-left: 6.25vw solid transparent; border-right: 2.15vw solid transparent; border-bottom: 5.75vw solid #1f0a3b; z-index: 2;}
|
|
#mt5 { position: absolute; bottom: 0; right: -7vw; width: 0; height: 0; border-left: 6vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
|
#mt5:after { content: ""; position: absolute; left: -6vw; border-left: 6vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
|
|
@media screen and (max-width: 767px) {
|
|
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
|
|
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
|
|
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
|
|
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
|
|
#mt3 { right: 26.625vw; border-left: 10.5vw solid transparent; border-right: 12vw solid transparent; border-bottom: 7.5vw solid #1b0833; }
|
|
#mt3:after { left: -10.5vw; border-left: 10.5vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 7.5vw solid #220a40; }
|
|
#mt4 { bottom: -0.375vw; right: 13.875vw; border-left: 9.375vw solid transparent; border-right: 12vw solid transparent; border-bottom: 8.625vw solid #150627; }
|
|
#mt4:after { left: -9.375vw; border-left: 9.375vw solid transparent; border-right: 3.225vw solid transparent; border-bottom: 8.625vw solid #1f0a3b; }
|
|
#mt5 { right: -10.5vw; border-left: 9vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
|
#mt5:after { left: -9vw; border-left: 9vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
|
|
}
|
|
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.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 id="logo-body">
|
|
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
|
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
|
<p id="top-vtag-cont"><mark id="top-version-tag">v2.1</mark></p>
|
|
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
|
<small id="codename">Fermion</small>
|
|
</div>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<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/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
|
|
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
|
|
<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 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>
|
|
</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>
|
|
<div class="row">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<h2>Setup & usage</h2>
|
|
<p>You can import the 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.1.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.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> 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>
|
|
<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 col-lg-5">
|
|
<h3>Why does <strong>mini.css</strong> have so few modules?</h3>
|
|
<p>Modules are what make frameworks 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 behave exactly as the developer needs them to. 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="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> 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="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></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 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;">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference.html">quick reference</a> page!</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>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|