mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 15:26:29 +02:00
Code Issues Releases Wiki Activity

Updated index.html

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-02 23:36:08 +02:00
parent be029195e0
commit 62c5220a3b
2 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/index.html
View File

@@ -4,19 +4,19 @@
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<!-- Local tests --> <!-- Local tests -->
<link rel="stylesheet" href="../dist/mini-default.css"> <link rel="stylesheet" href="../dist/mini-default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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 toolkit</title> <title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass"> <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 name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/> <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:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@@ -24,8 +24,8 @@
padding: 4px; padding: 4px;
} }
#top-area { #top-area {
height: 320px; height: 320px;
background: -webkit-linear-gradient(#455a64,#192024); background: -webkit-linear-gradient(#455a64,#192024);
background: linear-gradient(#455a64,#192024); background: linear-gradient(#455a64,#192024);
} }
#top-logo { #top-logo {
@@ -54,7 +54,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@@ -67,7 +67,7 @@
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; } .fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style> </style>
</head> </head>
<body> <body>
<div class="container" id="top-area"> <div class="container" id="top-area">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
@@ -94,12 +94,12 @@
<div class="row" style="padding-top: 60px; padding-bottom: 20px;"> <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-lg-10 col-lg-offset-1 row">
<div class="col-sm-12 col-md box-centered row"> <div class="col-sm-12 col-md box-centered row">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Minimal<small>Size matters!</small></h2><br> <h2>Minimal<small>Size matters!</small></h2><br>
<i class="fa fa-compress fa-4x" aria-hidden="true"></i> <i class="fa fa-compress fa-4x" aria-hidden="true"></i>
<br><br> <br><br>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 10KB 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> <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>
</div> </div>
@@ -114,7 +114,7 @@
</div> </div>
</div> </div>
<div class="col-sm-12 col-md box-centered row"> <div class="col-sm-12 col-md box-centered row">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br> <h2>Style-agnostic<small>Infinitely customizable!</small></h2><br>
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i> <i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
@@ -146,9 +146,9 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2> <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> <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> <table>
<caption>Toolkit file size comparison</caption> <caption>Framework file size comparison</caption>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@@ -175,7 +175,7 @@
</tr> </tr>
<tr> <tr>
<td data-label="Name">mini.css</td> <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="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 (uncompressed)">47 KB</td>
<td data-label="Size (minified)">36 KB</td> <td data-label="Size (minified)">36 KB</td>
<td data-label="Size (gzipped)">7 KB</td> <td data-label="Size (gzipped)">7 KB</td>
@@ -196,7 +196,7 @@
</tr> </tr>
</tbody> </tbody>
</table><br> </table><br>
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</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> <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> <br>
</div> </div>
<div class="col-sm-12 col-md col-lg-5 col-lg-offset-1"> <div class="col-sm-12 col-md col-lg-5 col-lg-offset-1">
@@ -204,7 +204,7 @@
<ul> <ul>
<li><strong>Core</strong> - Resets, typography rules and fixes</li> <li><strong>Core</strong> - Resets, typography rules and fixes</li>
<li><strong>Grid</strong> - Powerful, responsive flexbox-based grid</li> <li><strong>Grid</strong> - Powerful, responsive flexbox-based grid</li>
<li><strong>Navigation</strong> - Common elements for navigation</li> <li><strong>Navigation</strong> - Common elements for navigation</li>
<li><strong>Input Control</strong> - Forms, buttons and inputs</li> <li><strong>Input Control</strong> - Forms, buttons and inputs</li>
<li><strong>Table</strong> - Modern, responsive tables</li> <li><strong>Table</strong> - Modern, responsive tables</li>
<li><strong>Card</strong> - Sleek, modern content containers</li> <li><strong>Card</strong> - Sleek, modern content containers</li>
@@ -216,12 +216,12 @@
</div> </div>
<div class="col-sm-12 col-md col-lg-5"> <div class="col-sm-12 col-md col-lg-5">
<h3>Why does <strong>mini.css</strong> have so few modules?</h3> <h3>Why does <strong>mini.css</strong> have so few modules?</h3>
<p>Modules are what make 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 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> <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> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<table> <table>
<caption>Browser support</caption> <caption>Browser support</caption>
<thead> <thead>
<tr> <tr>
@@ -276,7 +276,7 @@
</tr> </tr>
</tbody> </tbody>
</table><br> </table><br>
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</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> <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> <br><hr>
</div> </div>
</div> </div>
@@ -297,4 +297,4 @@
<!-- End of page content--> <!-- 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> <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> </body>
</html> </html>

1
docs/v2/DEVLOG.md
View File

@@ -815,3 +815,4 @@
- Added `[role="button"]` selector for elements inside `header`, did not remove any other selectors from component as specifity would be too low if changed. - Added `[role="button"]` selector for elements inside `header`, did not remove any other selectors from component as specifity would be too low if changed.
- Updated `.card.section` to work properly with `[role="button"]` elements. - Updated `.card.section` to work properly with `[role="button"]` elements.
- #22: Spent a lot of time testing possible implementation of *Media Object*. See related issue for what I ended up with. - #22: Spent a lot of time testing possible implementation of *Media Object*. See related issue for what I ended up with.
- Updated `index.html`. It's now ready for v2.1.0.