mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-04 12:57:23 +02:00
Code Issues Releases Wiki Activity

Navigation complete, documentation and wiki page missing

Browse Source
This commit is contained in:
Angelos Chalaris
2016-08-25 09:56:19 +03:00
parent abc020aad1
commit 9edfb97b2d
7 changed files with 266 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@@ -1,5 +1,5 @@
# mini.css # mini.css
A minimal, responsive CSS framework to get you started. A minimal, responsive pure CSS framework to get you started.
## Components ## Components
@@ -7,6 +7,13 @@ A minimal, responsive CSS framework to get you started.
- **button**: button styles `GZIPPED SIZE`: 427 bytes - **button**: button styles `GZIPPED SIZE`: 427 bytes
- **form**: form styles `GZIPPED SIZE`: 517 bytes - **form**: form styles `GZIPPED SIZE`: 517 bytes
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes - **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
- **nav**: coming soon - **nav**: navigation bar `GZIPPED SIZE`: 517 bytes
- **table**: table styles `GZIPPED SIZE`: 243 bytes - **table**: table styles `GZIPPED SIZE`: 243 bytes
- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes - **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
TODO:
- Tabbed navigation (radio button based)
- Dropdowns (checkbox based)
- Modals (checkbox based)
- Labels and badges
- Pure css progress bars

84
css/mini-full.css
View File

@@ -917,3 +917,87 @@ img.thumb {
.hidden { .hidden {
display: none !important; } display: none !important; }
.nav {
box-sizing: border-box;
background-color: #ddd; }
.nav .logo {
font-size: 135%; }
.nav ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0; }
.nav ul li {
display: inline-block;
margin: 0;
white-space: nowrap; }
.nav ul li * {
display: inline-block;
padding: 8px;
color: #272727;
margin: 0; }
.nav ul li a:hover, .nav ul li a:active, .nav ul li a:focus {
background: #cacaca; }
.nav ul li a.disabled, .nav ul li a[disabled] {
cursor: not-allowed;
opacity: 0.65; }
.nav.vertical ul {
display: block; }
.nav.vertical ul li {
display: block; }
.nav.vertical ul li * {
width: 100%;
padding: 8px 0; }
.nav.fixed {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%; }
.nav.fixed.vertical {
height: 100%;
width: 16.66667%; }
.nav.fixed.vertical ul {
width: 100%; }
.nav.fixed.vertical ul li {
display: block; }
.nav + label {
display: none;
font-weight: 700;
margin: 10px;
font-size: 1.75em;
padding: 8px;
background-color: #ddd;
width: auto;
position: fixed;
z-index: 1000;
top: 0;
right: 0; }
.nav + label:before {
position: relative;
content: '\2630'; }
.nav + label:hover, .nav + label:active, .nav + label:focus {
background: #cacaca; }
@media (max-width: 768px) {
.nav {
overflow: auto; }
.nav.fixed {
display: none; }
.nav.fixed + label {
display: block; }
input[type="checkbox"]:checked + .nav.fixed {
display: block;
width: 100%;
height: 100%; }
input[type="checkbox"]:checked + .nav.fixed ul {
display: block; }
input[type="checkbox"]:checked + .nav.fixed ul li {
display: block; }
input[type="checkbox"]:checked + .nav.fixed ul li * {
width: 100%;
padding: 8px 0; }
input[type="checkbox"]:checked + .nav.fixed + label:before {
content: '\00d7'; } }

2
css/mini-full.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
scss/mini-full.scss
View File

@@ -35,3 +35,6 @@
@include make-center-block(ct-block); @include make-center-block(ct-block);
@include make-clearfix(cf); @include make-clearfix(cf);
@include make-hidden(hidden); @include make-hidden(hidden);
@import 'mini/nav';
// Use nav mixin to create nav with default specs.
@include make-nav(nav, vertical, fixed, logo, 135%, 8px, #272727, #ddd, darken, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);

2
scss/mini/_button.scss
View File

@@ -18,7 +18,7 @@
background: lighten($btn-variant-bg-color, $btn-variant-hover-style-percentage); background: lighten($btn-variant-bg-color, $btn-variant-hover-style-percentage);
} }
@else{ @else{
background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage); // 7.5% background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage);
} }
} }

153
scss/mini/_nav.scss Normal file
View File

@@ -0,0 +1,153 @@
@mixin make-nav( $nav-name, $nav-vertical-name, $nav-fixed-name, $nav-logo-name,
$nav-logo-size, $nav-padding, $nav-color, $nav-bg-color, $nav-hover-style,
$nav-hover-style-percentage, $nav-disabled-cursor, $nav-disabled-opacity,
$nav-fixed-left-right, $grid-columns-total,
$grid-columns-count-for-nav-fixed-vertical, $nav-fixed-collapse-breakpoint,
$nav-fixed-collapse-label-location, $nav-fixed-collapse-label-margin,
$nav-fixed-collapse-label-font-size ){
.#{$nav-name}{
box-sizing: border-box;
background-color: #{$nav-bg-color};
.#{$nav-logo-name}{
font-size: $nav-logo-size;
}
ul{
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
li{
display: inline-block;
margin: 0;
white-space: nowrap;
* {
display: inline-block;
padding: #{$nav-padding};
color: #{$nav-color};
margin: 0;
}
& a{
&:hover, &:active, &:focus{
@if $nav-hover-style == 'lighten'{
background: lighten($nav-bg-color, $nav-hover-style-percentage);
}
@else{
background: darken($nav-bg-color, $nav-hover-style-percentage);
}
}
&.disabled, &[disabled]{
cursor: $nav-disabled-cursor;
opacity: $nav-disabled-opacity;
}
}
}
}
&.#{$nav-vertical-name}{
ul{
display: block;
li{
display: block;
* {
width: 100%;
padding: #{$nav-padding} 0;
}
}
}
}
&.#{$nav-fixed-name}{
position: fixed;
@if $nav-fixed-left-right == 'left'{
left: 0;
}
@else{
right: 0;
}
top: 0;
z-index: 999;
width: 100%;
&.#{$nav-vertical-name}{
height: 100%;
width: #{($grid-columns-count-for-nav-fixed-vertical * 100%/ $grid-columns-total)};
ul{
width: 100%;
li{
display: block;
}
}
}
}
& + label{
display: none;
font-weight: 700;
margin: $nav-fixed-collapse-label-margin;
font-size: $nav-fixed-collapse-label-font-size;
padding: #{$nav-padding};
background-color: $nav-bg-color;
width: auto;
position: fixed;
z-index: 1000;
@if $nav-fixed-collapse-label-location == 'top-left'{
top: 0;
left: 0;
}
@else if $nav-fixed-collapse-label-location == 'top-right'{
top: 0;
right: 0;
}
@else if $nav-fixed-collapse-label-location == 'bottom-left'{
bottom: 0;
left: 0;
}
@else{
bottom: 0;
right: 0;
}
&:before{
position: relative;
content: '\2630';
}
&:hover, &:active, &:focus{
@if $nav-hover-style == 'lighten'{
background: lighten($nav-bg-color, $nav-hover-style-percentage);
}
@else{
background: darken($nav-bg-color, $nav-hover-style-percentage);
}
}
}
}
@media (max-width: $nav-fixed-collapse-breakpoint){
.#{$nav-name}{
overflow: auto;
&.#{$nav-fixed-name}{
display: none;
& + label{
display: block;
}
}
}
input[type="checkbox"]:checked + .#{$nav-name}.#{$nav-fixed-name}{
display: block;
width: 100%;
height: 100%;
ul{
display: block;
li{
display: block;
* {
width: 100%;
padding: #{$nav-padding} 0;
}
}
}
& + label{
&:before{
content: '\00d7';
}
}
}
}
}

15
testpage.html
View File

@@ -8,7 +8,20 @@
<link rel="stylesheet" href="css/mini-full.css"> <link rel="stylesheet" href="css/mini-full.css">
</head> </head>
<body> <body>
<h1>Heading 1 <small>smaller</small></h1> <h1>Heading 1 <small>smaller</small></h1><br>
<input type="checkbox" class="hidden" id="nav-toggle"><div class="nav">
<span class="logo">mini.css</span>
<ul class="pure-menu-list">
<li><a href="#" class="nav-link">link 1</a></li>
<li class="nav-link"><a href="#" class="pure-menu-link" disabled>d link</a></li>
<li class="nav-link"><a href="#" class="pure-menu-link">other</a></li>
<li class="nav-link"><a href="#" class="pure-menu-link">thing</a></li>
<li class="nav-link">Separator</li>
<li class="nav-link"><a href="#" class="pure-menu-link">test</a></li>
<li class="nav-link"><a href="#" class="pure-menu-link">test2</a></li>
<li class="nav-link"><a href="#" class="pure-menu-link">test3!</a></li>
</ul>
</div><label for="nav-toggle"></label><br>
<h2>Heading 2 <small>smaller</small></h2><br> <h2>Heading 2 <small>smaller</small></h2><br>
<p><strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. <code>Praesent est mi</code>, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus <sub>quis</sub> ipsum aliquam, <sup>fringilla</sup> ante <kbd>sit</kbd> amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, <kbd>sit</kbd> amet tincidunt ante suscipit. In malesuada consectetur molestie.</p> <p><strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. <code>Praesent est mi</code>, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus <sub>quis</sub> ipsum aliquam, <sup>fringilla</sup> ante <kbd>sit</kbd> amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, <kbd>sit</kbd> amet tincidunt ante suscipit. In malesuada consectetur molestie.</p>
<br> <br>