Extra component: labels
This commit is contained in:
Angelos Chalaris
parent
bcbd2b2d11
commit
84d5f92ed5
9 changed files with 220 additions and 65 deletions
27
README.md
27
README.md
|
|
@ -1,7 +1,7 @@
|
|||
# mini.css
|
||||
A minimal, responsive pure CSS framework to get you started.
|
||||
|
||||
## Components
|
||||
## Core Components
|
||||
|
||||
- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,195 bytes
|
||||
- **button**: button styles `GZIPPED SIZE`: 427 bytes
|
||||
|
|
@ -11,26 +11,35 @@ A minimal, responsive pure CSS framework to get you started.
|
|||
- **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
|
||||
|
||||
## Extra Components
|
||||
|
||||
- **label**: label and badge styles `GZIPPED SIZE`: 208 bytes
|
||||
|
||||
TODO:
|
||||
- Tabbed navigation (radio button based)
|
||||
- Dropdowns (checkbox based)
|
||||
- Modals (checkbox based)
|
||||
- Labels and badges
|
||||
- Pure css progress bars
|
||||
- Maybe breadcrumbs
|
||||
- Maybe button groups (with radios maybe? - use first and last to style borders)
|
||||
- Alerts with checkbox?
|
||||
- Add more utilities for Media objects
|
||||
- Possibly panels
|
||||
- Responsive embed?
|
||||
- Are tooltips even doable? (they are on-click as popovers for sure with checkboxes)
|
||||
- Buttons with states (implemented using a checkbox)
|
||||
- Checbox collapses
|
||||
- Is a Pure CSS Carousel even possible?
|
||||
|
||||
|
||||
|
||||
HOMEWORK FOR AFTER THE HOLIDAYS:
|
||||
|
||||
ON A MORE SERIOUS NOTE:
|
||||
- Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page
|
||||
- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with th two **)
|
||||
- Move variables to a main file, cleanup the mini-default.scss and flavored csses etc, make it more consistent
|
||||
- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with the two **)
|
||||
- Update wiki with changes, write missing pages (documentation etc.)
|
||||
- Add the missing extra components, try to stay below 5KB
|
||||
- Add images and make two live pages to showcase vastly different flavors
|
||||
- Make NiteOwl flavor (dark flavor, like the thing that cquanu (my star in html template) has for github, colors look cool)
|
||||
- Make a Bootstrap flavor to ease the transition from that framework
|
||||
- Make more flavors
|
||||
- Update wiki punchline footer and README!
|
||||
- Promote in reddit etc.
|
||||
- Write a blog post about it
|
||||
- Use it
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="../flavors/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css"> -->
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" class="hidden" id="nav-toggle">
|
||||
|
|
|
|||
|
|
@ -798,10 +798,10 @@ textarea {
|
|||
*/
|
||||
.nav {
|
||||
box-sizing: border-box;
|
||||
background-color: #ddd; }
|
||||
background-color: #272727; }
|
||||
.nav .logo {
|
||||
font-size: 135%;
|
||||
color: #272727; }
|
||||
color: #ddd; }
|
||||
.nav ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
|
|
@ -814,11 +814,11 @@ textarea {
|
|||
.nav ul li * {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
color: #272727;
|
||||
color: #ddd;
|
||||
margin: 0; }
|
||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||
color: #272727;
|
||||
background: #cacaca; }
|
||||
color: #ddd;
|
||||
background: #141414; }
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
|
@ -848,8 +848,8 @@ textarea {
|
|||
margin: 10px;
|
||||
font-size: 1.75em;
|
||||
padding: 8px;
|
||||
color: #272727;
|
||||
background-color: #ddd;
|
||||
color: #ddd;
|
||||
background-color: #272727;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
|
|
@ -859,7 +859,7 @@ textarea {
|
|||
position: relative;
|
||||
content: '\2630'; }
|
||||
.nav + label:hover, .nav + label:active, .nav + label:focus {
|
||||
background: #cacaca; }
|
||||
background: #141414; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
|
|
@ -1052,3 +1052,69 @@ img.thumb {
|
|||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
/*
|
||||
Mixin for the labels/badges.
|
||||
Parameters:
|
||||
- $lbl-name : The class name of the labels/badges.
|
||||
- $lbl-bg-color : The background color of the labels/badges.
|
||||
- $lbl-color : The text color of the labels/badges.
|
||||
- $lbl-border-radius : The border-radius of the labels/badges.
|
||||
- $lbl-padding : The padding of the labels/badges.
|
||||
- $lbl-hide-on-empty : Style of the label/badges when empty. [1]
|
||||
Notes:
|
||||
- [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only
|
||||
checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`.
|
||||
*/
|
||||
/*
|
||||
Mixin for labels/badges styles.
|
||||
Parameters:
|
||||
- $lbl-name : The class name of the labels/badges. [1]
|
||||
- $lbl-style-name : The class name of the labels/badges style.
|
||||
- $lbl-style-color : The text color of the labels/badges style.
|
||||
- $lbl-style-bg-color : The background color of the labels/badges style.
|
||||
Notes:
|
||||
- [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise
|
||||
the specified style will not work correctly.
|
||||
*/
|
||||
.lbl {
|
||||
display: inline;
|
||||
padding: 6px 10px;
|
||||
color: #eeeeee;
|
||||
background-color: #777;
|
||||
border-radius: 4px; }
|
||||
.lbl:empty {
|
||||
display: none; }
|
||||
|
||||
.lbl.blue {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
|
||||
.lbl.green {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
|
||||
.lbl.red {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
|
||||
.bdg {
|
||||
display: inline;
|
||||
padding: 3px 8px;
|
||||
color: #eeeeee;
|
||||
background-color: #777;
|
||||
border-radius: 8px; }
|
||||
.bdg:empty {
|
||||
display: none; }
|
||||
|
||||
.bdg.blue {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
|
||||
.bdg.green {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
|
||||
.bdg.red {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
|
|
|
|||
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
|
|
@ -14,6 +14,11 @@
|
|||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
// CORE COMPONENTS (located in `mini`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Base module (_base.scss)
|
||||
//====================================================================
|
||||
// Basic rules for body
|
||||
|
|
@ -172,7 +177,7 @@ $navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed na
|
|||
@import '../scss/mini/nav';
|
||||
// Use nav mixin to create nav with default specs. For more information
|
||||
// refer to the _nav.scss file to check the definitions.
|
||||
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utilities and Helper Classes module (_utility.scss)
|
||||
//====================================================================
|
||||
|
|
@ -225,3 +230,36 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
|
|||
@include make-center-block($center-block-name);
|
||||
@include make-clearfix($clearfix-class-name);
|
||||
@include make-hidden($hidden-class-name);
|
||||
//====================================================================
|
||||
//
|
||||
// EXTRA COMPONENTS (located in `mini-extra`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Label module (_label.scss)
|
||||
//====================================================================
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2
|
||||
$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: lbl; // Name for the base labels class
|
||||
$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class
|
||||
$lbl-style2-name: 'green'; // Name for labels/badges style 2 class
|
||||
$lbl-style3-name: 'red'; // Name for labels/badges style 3 class
|
||||
$badge-class-name: bdg; // Name for the base badges class
|
||||
// Enable labels (_label.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/label';
|
||||
// Use label mixins to create labels with given specs. For more information
|
||||
// refer to the _label.scss file to check the definitions.
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
|
|
@ -14,6 +14,11 @@
|
|||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
// CORE COMPONENTS (located in `mini`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Base module (_base.scss)
|
||||
//====================================================================
|
||||
// Basic rules for body
|
||||
|
|
@ -172,7 +177,7 @@ $navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed na
|
|||
@import 'mini/nav';
|
||||
// Use nav mixin to create nav with default specs. For more information
|
||||
// refer to the _nav.scss file to check the definitions.
|
||||
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utilities and Helper Classes module (_utility.scss)
|
||||
//====================================================================
|
||||
|
|
@ -225,3 +230,36 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
|
|||
@include make-center-block($center-block-name);
|
||||
@include make-clearfix($clearfix-class-name);
|
||||
@include make-hidden($hidden-class-name);
|
||||
//====================================================================
|
||||
//
|
||||
// EXTRA COMPONENTS (located in `mini-extra`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Label module (_label.scss)
|
||||
//====================================================================
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2
|
||||
$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: lbl; // Name for the base labels class
|
||||
$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class
|
||||
$lbl-style2-name: 'green'; // Name for labels/badges style 2 class
|
||||
$lbl-style3-name: 'red'; // Name for labels/badges style 3 class
|
||||
$badge-class-name: bdg; // Name for the base badges class
|
||||
// Enable labels (_label.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/label';
|
||||
// Use label mixins to create labels with given specs. For more information
|
||||
// refer to the _label.scss file to check the definitions.
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
44
scss/mini-extra/_label.scss
Normal file
44
scss/mini-extra/_label.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
Mixin for the labels/badges.
|
||||
Parameters:
|
||||
- $lbl-name : The class name of the labels/badges.
|
||||
- $lbl-bg-color : The background color of the labels/badges.
|
||||
- $lbl-color : The text color of the labels/badges.
|
||||
- $lbl-border-radius : The border-radius of the labels/badges.
|
||||
- $lbl-padding : The padding of the labels/badges.
|
||||
- $lbl-hide-on-empty : Style of the label/badges when empty. [1]
|
||||
Notes:
|
||||
- [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only
|
||||
checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`.
|
||||
*/
|
||||
@mixin make-lbl($lbl-name, $lbl-bg-color, $lbl-color, $lbl-border-radius, $lbl-padding, $lbl-hide-on-empty){
|
||||
.#{$lbl-name}{
|
||||
display: inline;
|
||||
padding: $lbl-padding;
|
||||
color: $lbl-color;
|
||||
background-color: $lbl-bg-color;
|
||||
border-radius: $lbl-border-radius;
|
||||
@if $lbl-hide-on-empty == 'hide'{
|
||||
&:empty{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for labels/badges styles.
|
||||
Parameters:
|
||||
- $lbl-name : The class name of the labels/badges. [1]
|
||||
- $lbl-style-name : The class name of the labels/badges style.
|
||||
- $lbl-style-color : The text color of the labels/badges style.
|
||||
- $lbl-style-bg-color : The background color of the labels/badges style.
|
||||
Notes:
|
||||
- [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise
|
||||
the specified style will not work correctly.
|
||||
*/
|
||||
@mixin make-lbl-style($lbl-name, $lbl-style-name, $lbl-style-color, $lbl-style-bg-color){
|
||||
.#{$lbl-name}.#{$lbl-style-name}{
|
||||
color: $lbl-style-color;
|
||||
background: $lbl-style-bg-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
@import 'mini/variables';
|
||||
@import 'mini/base';
|
||||
@import 'mini/button';
|
||||
// Use button mixins to create buttons with default specs.
|
||||
@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color);
|
||||
@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color);
|
||||
@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color);
|
||||
@include make-btn-size(btn, lg, 9px 15px, 135%);
|
||||
@include make-btn-size(btn, sm, 4px 8px, 80%);
|
||||
@import 'mini/grid';
|
||||
// Use grid mixin to create grid with default specs.
|
||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
||||
@import 'mini/form';
|
||||
// Use form mixin to create form with default specs.
|
||||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||||
@import 'mini/table';
|
||||
// Use table mixin to create table with default specs.
|
||||
@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor);
|
||||
@import 'mini/utility';
|
||||
// Use utility mixins to create utility classes with default specs.
|
||||
@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px);
|
||||
@include make-border-generic(bordered);
|
||||
@include make-border-radial-style(rounded, 4px);
|
||||
@include make-border-radial-style(circle, 50%);
|
||||
@include make-colored-text(txt-blue, $btn-b-bg-color);
|
||||
@include make-colored-text(txt-green, $btn-g-bg-color);
|
||||
@include make-colored-text(txt-red, $btn-r-bg-color);
|
||||
@include make-colored-bg-text(bg-blue, $btn-b-bg-color);
|
||||
@include make-colored-bg-text(bg-green, $btn-g-bg-color);
|
||||
@include make-colored-bg-text(bg-red, $btn-r-bg-color);
|
||||
@include make-caret-down(caret, 0.35em, #222);
|
||||
@include make-close(close, #aaa, pointer, 1.3em, 700, #777);
|
||||
@include make-drags(drg-left, drg-right);
|
||||
@include make-center-block(ct-block);
|
||||
@include make-clearfix(cf);
|
||||
@include make-hidden(hidden);
|
||||
@import 'mini/nav';
|
||||
// Use nav mixin to create nav with default specs.
|
||||
@include make-nav(nav, vertical, fixed, logo, 135%, link, 8px, #272727, #ddd, darken, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
*/
|
||||
@mixin make-btn-style($btn-name, $btn-style-name, $btn-style-color, $btn-style-bg-color, $btn-style-hover-style: lighten, $btn-style-hover-style-percentage: 7.5%){
|
||||
.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}:visited{
|
||||
@include btn-variant($btn-alt-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage);
|
||||
@include btn-variant($btn-style-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
/*
|
||||
|
|
|
|||
Loading…
Reference in a new issue