Ready to release 2.3.0
All changes and additions complete, ready to release.
This commit is contained in:
Angelos Chalaris
parent
b1fc2f28fa
commit
8be387a230
14
CHANGELOG.md
14
CHANGELOG.md
|
|
@ -1,5 +1,19 @@
|
|||
# Changelog
|
||||
|
||||
## v2.3.0
|
||||
|
||||
- Added a new `.modal` component, which allows you to show modal dialogs (`contextual`).
|
||||
- Added a new `.switch` component for displaying on/off switches (`input_control`).
|
||||
- Added `.scrollable` tables, allowing for long tables to be displayed in an alternate way (`table`).
|
||||
- Added `.vertical` input groups, allowing vertical forms to be created more easily (`input_control`).
|
||||
- Updated **mini-default** color palette. The new palette should now display better on screens with uncommon contrast settings.
|
||||
- Slightly tweaked the styling of various elements to improve their look.
|
||||
- Various under-the-hood updates to make everything work better, load faster and be lighter.
|
||||
- Updated the styling of borders and other elements to use `rem` instead of `px` in all `rem`-based flavors.
|
||||
- Added a color highlight for the selected tab in `.tabs`.
|
||||
- Added styling for `disabled` elements in `input_control` that were wrongly omitted in the past.
|
||||
- Fixed some bugs and improved overall stability, updated all flavors accordingly.
|
||||
|
||||
## v2.2.0
|
||||
|
||||
- Replaced old classes for generic shadows with one class (`.shadowed`).
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../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>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
|
||||
#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: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
|
||||
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
|
||||
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
|
||||
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
|
||||
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
||||
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw 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: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
|
||||
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
|
||||
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
|
||||
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
|
||||
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
||||
#mt5:after { left: -13.5vw; border-left: 13.5vw 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;} li a { text-decoration: none;}
|
||||
</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.2</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> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group fluid">
|
||||
<label for="username">username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="pwd">password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><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>.<br/>
|
||||
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<h1>Flavors</h1>
|
||||
<p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<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.3.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
|
||||
<ul style="margin-left:0px; padding-left: 4px">
|
||||
<li class="card fluid">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<li class="card fluid">
|
||||
<h2 class="section double-padded">Lite <a href="http://codepen.io/chalarangelo/pen/bWVrMv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a><small>mini-lite</small></h2>
|
||||
<pre class="section double-padded" style="border-left:0; box-shadow: none;"><<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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-lite.min.css"</span>></pre>
|
||||
<p class="section double-padded" style="text-align:justify">Lite is a light flavor that uses the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars, drawers and toasts are not included.</p>
|
||||
<p class="section double-padded" style="text-align:justify">Lite is a light flavor that uses the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars, modals, drawers and toasts are not included.</p>
|
||||
<div class="section double-padded">
|
||||
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
|
||||
<p><strong>Size:</strong> 5 KB</p>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<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.2</mark></p>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.3</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>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
<br/>
|
||||
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<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.3.0/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
</div><br>
|
||||
<p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<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.3.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre>
|
||||
|
|
|
|||
|
|
@ -1254,3 +1254,4 @@
|
|||
- Added `$tab-selected-border-color` to imbue `tabs` with a little extra style (applies only to non-`.stacked` tabs).
|
||||
- Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
|
||||
- Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.
|
||||
- Updated `CHANGELOG` and doc pages (new tag etc.), released **v2.3.0**.
|
||||
|
|
|
|||
Loading…
Reference in a new issue