mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-14 09:21:53 +02:00
Code Issues Releases Wiki Activity

Universal margin and variable names

Browse Source 
Added a universal margin variable and converted CSS variables to SCSS strings that are compiled from the flavor file.
This commit is contained in:
Angelos Chalaris 2017-10-18 13:48:56 +03:00
parent f55a282512
commit 37b93b9f54
4 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dist/mini-default.css vendored
View File

@ -7,9 +7,13 @@
/*
Browsers resets and base typography.
*/
/* Core module CSS variable definitions */
:root {
--fore-color: #212121;
--secondary-fore-color: #424242;
--back-color: #f8f8f8;
--heading-ratio: 1.19;
--side-margin: 0.5rem;
}
html {
@ -53,3 +57,39 @@ img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
margin: calc(1.5 * var(--side-margin)) var(--side-margin);
font-weight: 500;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: var(--secondary-fore-color);
display: block;
margin-top: -0.25rem;
}
h1 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}
h2 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}
h3 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
}
h4 {
font-size: calc(1rem * var(--heading-ratio));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(--heading-ratio));
}

2
dist/mini-default.min.css vendored
View File

@ -1 +1 @@
:root{--fore-color:#212121;--back-color:#f8f8f8}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}
:root{--fore-color:#212121;--secondary-fore-color:#424242;--back-color:#f8f8f8;--heading-ratio:1.19;--side-margin:.5rem}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--side-margin)) var(--side-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}

5
docs/v3/DEVLOG.md
View File

@ -25,3 +25,8 @@
- Built up the heading elements (`h1` - `h6`), using CSS variables (`--heading-ratio` for universal heading ratio scaling).
- Added `--secondary-fore-color` for things like `small` in `h1`, which is set to `#424242`. Avoided using the term `--fore-color-lighter` as it could cause ambiguity in reverse-color-palette flavors.
- `small` elements in headings are now by defauly displayed in blocks. I haven't seen many use cases for the old style and the codebase could use the cleanup, so there's that.
## 20171018
- Added universal margin variable `--universal-margin` for an easy way to align content and elements.
- Converted all hardcoded CSS variable names to SCSS variables that are then converted into the final variables. This will allow for an extra layer of customization and help alleviate conflict problems (also allows for code minification in tiny flavor files that require variables names with simpler names).

36
src/mini/_core.scss
View File

@ -17,18 +17,26 @@ $heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$universal-margin: 0.5rem !default; // Universal margin for the most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements
// TODO: universalize
$heading-margin: 0.75rem 0.5rem !default; // Margin for headers, use universal
$heading-font-weight: 500 !default; // Font weight for headings
// CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color';
$secondary-fore-color-var: '--secondary-fore-color';
$back-color-var: '--back-color';
$heading-ratio-var: '--heading-ratio';
$universal-margin-var: '--universal-margin';
/* Core module CSS variable definitions */
:root {
--fore-color: $fore-color;
--secondary-fore-color: $secondary-fore-color;
--back-color: $back-color;
--heading-ratio: $heading-ratio;
#{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color;
#{$heading-ratio-var}: $heading-ratio;
#{$side-margin-var}: $side-margin;
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
@ -56,8 +64,8 @@ html {
body {
margin: $_body-margin;
color: var(--fore-color);
background: var(--back-color);
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
@ -89,10 +97,10 @@ img {
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: $heading-margin;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
color: var(--secondary-fore-color);
color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
@ -104,20 +112,20 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
font-size: calc(1rem * var(--heading-ratio));
font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(--heading-ratio));
font-size: calc(1rem / var(#{$heading-ratio-var}));
}