mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-09-15 08:22:11 +02:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
b2e7f80d38 | ||
|
|
61a4425346 | ||
|
|
efc429c40a | ||
|
|
b3e2b8becd | ||
|
|
94eddbe7ea | ||
|
|
02d76895d9 |
11
CHANGELOG.md
Normal file
11
CHANGELOG.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## v1.0.1
|
||||
|
||||
- Fixed modals covering other elements due to `z-index` (issue #3)
|
||||
- Fixed label & badge display overlapping in smaller displays (issue #4)
|
||||
- Fixed display of demo pages and incorrect padding of elements in panels (issue #5)
|
||||
|
||||
## v1.0.0
|
||||
|
||||
- Initial release
|
||||
@@ -7,9 +7,16 @@ You can learn all about using it, its modules and components, as well as see a l
|
||||
|
||||
## Setup
|
||||
|
||||
**mini.css** is available in both Bowser and NPM:
|
||||
|
||||
bowser install mini.css
|
||||
|
||||
npm install mini.css
|
||||
|
||||
|
||||
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
|
||||
Alternatively, you can use one of the other [flavors](https://github.com/Chalarangelo/mini.css/tree/master/flavors). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
@@ -57,8 +57,11 @@
|
||||
<div class="col xs-12 md-10">
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> or the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css"></pre>
|
||||
<br>
|
||||
<pre style="overflow: auto;"><link rel=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css"</span>></pre>
|
||||
|
||||
<p>If you'd rather use a package manager, <strong>mini.css</strong> is available in both Bowser and NPM:</p>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bowser install</span> mini.css</pre>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">npm install</span> mini.css</pre><br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
<ul>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-niteowl.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-niteowl.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
@@ -23,9 +23,15 @@
|
||||
input[type="checkbox"]:checked.stateful+label{display:none;}
|
||||
input[type="checkbox"]:checked.stateful+label+label{display:block;}
|
||||
.btn-grp .btn{margin-left:-5px;}
|
||||
.footer{background-color:#243447; color:#f5f5f5;}
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
.panel > .nav , .panel > .bordered, .panel > .circle{ padding: 0 !important; }
|
||||
.panel > .btn { padding: 6px 12px !important;}
|
||||
.panel > .lbl { padding: 6px 10px !important; }
|
||||
.panel > .bdg { padding: 3px 8px !important; }
|
||||
.panel > .well { padding: 20px !important; }
|
||||
.panel code, .panel kbd, .panel pre{ padding: 2px 4px !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -67,7 +73,7 @@
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>NiteOwl</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong><a href="https://chalarangelo.github.io/mini.css/modules">Default</a></strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-niteowl.min.css"></pre><br>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-niteowl.min.css"></pre><br>
|
||||
|
||||
<h2 id="base">Base</h2>
|
||||
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
|
||||
@@ -693,7 +699,7 @@
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<span>Button with generic border:</span> <button class="btn blue bordered">Button</button><br>
|
||||
<span>Image with generic border and rounded corners:</span> <img class="bordered rounded" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br><br>
|
||||
<pre class="panelcode"><button class="btn blue bordered">Button</button>
|
||||
<img class="bordered rounded" src="favicon.png">
|
||||
<img class="circle" src="favicon.png"></pre>
|
||||
@@ -792,7 +798,7 @@
|
||||
|
||||
<h3>Popovers</h3>
|
||||
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></code> right after the checkbox linked to it and inside it add another element with the popover's class you are using. When you click the label, the popover will appear above or below the label. Click on the label again or the popover text itself to hide it.</p>
|
||||
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h4 class="head">Example</h4><br>
|
||||
<div class="panel"><h4 class="head">Example</h4><br>
|
||||
<input type="checkbox" id="popover1" class="popover-top" autocomplete="off"><label for="popover1" class="btn green">Open top popover<span class="popover-top">This is the popover text.</span></label>
|
||||
|
||||
<input type="checkbox" id="popover2" class="popover-bottom" autocomplete="off"><label for="popover2" class="btn red">Open bottom popover<span class="popover-bottom">This is the popover text.</span></label><br><br>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
@@ -26,6 +26,12 @@
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
.footer a:hover{text-decoration: underline;}
|
||||
.panel > .nav , .panel > .bordered, .panel > .circle{ padding: 0 !important; }
|
||||
.panel > .btn { padding: 6px 12px !important;}
|
||||
.panel > .lbl { padding: 6px 10px !important; }
|
||||
.panel > .bdg { padding: 3px 8px !important; }
|
||||
.panel > .well { padding: 20px !important; }
|
||||
.panel code, .panel kbd, .panel pre{ padding: 2px 4px !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -67,7 +73,7 @@
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>Default</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong><a href="https://chalarangelo.github.io/mini.css/modules-niteowl">NiteOwl</a></strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css"></pre><br>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css"></pre><br>
|
||||
|
||||
<h2 id="base">Base</h2>
|
||||
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
|
||||
@@ -693,7 +699,7 @@
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<span>Button with generic border:</span> <button class="btn blue bordered">Button</button><br>
|
||||
<span>Image with generic border and rounded corners:</span> <img class="bordered rounded" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br>
|
||||
<span>Image with circular corners:</span> <img class="circle" src="favicon.png" style="height: 100px; width: auto; display:inline-block;vertical-align: middle;"><br><br>
|
||||
<pre class="panelcode"><button class="btn blue bordered">Button</button>
|
||||
<img class="bordered rounded" src="favicon.png">
|
||||
<img class="circle" src="favicon.png"></pre>
|
||||
@@ -792,7 +798,7 @@
|
||||
|
||||
<h3>Popovers</h3>
|
||||
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></code> right after the checkbox linked to it and inside it add another element with the popover's class you are using. When you click the label, the popover will appear above or below the label. Click on the label again or the popover text itself to hide it.</p>
|
||||
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h4 class="head">Example</h4><br>
|
||||
<div class="panel"><h4 class="head">Example</h4><br>
|
||||
<input type="checkbox" id="popover1" class="popover-top" autocomplete="off"><label for="popover1" class="btn green">Open top popover<span class="popover-top">This is the popover text.</span></label>
|
||||
|
||||
<input type="checkbox" id="popover2" class="popover-bottom" autocomplete="off"><label for="popover2" class="btn red">Open bottom popover<span class="popover-bottom">This is the popover text.</span></label><br><br>
|
||||
|
||||
@@ -1078,7 +1078,7 @@ img.thumb {
|
||||
the specified style will not work correctly.
|
||||
*/
|
||||
.lbl {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
color: #eeeeee;
|
||||
background-color: #777;
|
||||
@@ -1099,7 +1099,7 @@ img.thumb {
|
||||
background: #ea4848; }
|
||||
|
||||
.bdg {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
color: #eeeeee;
|
||||
background-color: #777;
|
||||
@@ -1227,6 +1227,7 @@ img.thumb {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transition: opacity .3s ease-out; }
|
||||
.modal + div > div {
|
||||
z-index: 998;
|
||||
@@ -1241,7 +1242,8 @@ img.thumb {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
|
||||
.modal:checked + div {
|
||||
height: 100%;
|
||||
opacity: 1; }
|
||||
opacity: 1;
|
||||
display: block; }
|
||||
.modal:checked + div > label {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
position: fixed;
|
||||
|
||||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1078,7 +1078,7 @@ img.thumb {
|
||||
the specified style will not work correctly.
|
||||
*/
|
||||
.lbl {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
color: #f5f5f5;
|
||||
background-color: #525252;
|
||||
@@ -1099,7 +1099,7 @@ img.thumb {
|
||||
background: #e72a2a; }
|
||||
|
||||
.bdg {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
color: #f5f5f5;
|
||||
background-color: #525252;
|
||||
@@ -1227,6 +1227,7 @@ img.thumb {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transition: opacity .3s ease-out; }
|
||||
.modal + div > div {
|
||||
z-index: 998;
|
||||
@@ -1241,7 +1242,8 @@ img.thumb {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
|
||||
.modal:checked + div {
|
||||
height: 100%;
|
||||
opacity: 1; }
|
||||
opacity: 1;
|
||||
display: block; }
|
||||
.modal:checked + div > label {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
position: fixed;
|
||||
|
||||
2
flavors/mini-niteowl.min.css
vendored
2
flavors/mini-niteowl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mini.css",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "A minimal Sass-y responsive mobile-first style-agnostic CSS framework.",
|
||||
"main": "flavors/mini-default.min.css",
|
||||
"directories": {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
*/
|
||||
@mixin make-lbl($lbl-name, $lbl-bg-color, $lbl-color, $lbl-border-radius, $lbl-padding, $lbl-hide-on-empty){
|
||||
.#{$lbl-name}{
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: $lbl-padding;
|
||||
color: $lbl-color;
|
||||
background-color: $lbl-bg-color;
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
@if $modal-transition-enabled == 'enabled'{
|
||||
transition: opacity .3s ease-out;
|
||||
}
|
||||
@@ -48,7 +49,8 @@
|
||||
}
|
||||
&:checked + div{
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
& > label{
|
||||
background-color: rgba(0,0,0,.35);
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user