mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 12:58:13 +01:00
Inputs for the core module flavor controls
This commit is contained in:
Angelos Chalaris
parent
4f03856ba3
commit
356afcb1d3
@ -216,7 +216,7 @@ var customizationAppShellStart = `<div id="root"><header class="row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span> Docs</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
@ -235,8 +235,7 @@ var customizationLinks = [buildLink(custFragments[0]), '<hr style="padding:0;"/>
|
||||
|
||||
function buildCustomizationFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
<h2 class="section double-padded">${fragment.title}</h2>
|
||||
<div class="section">${fragment.content}</div>
|
||||
<h2 class="section double-padded">${fragment.title}</h2>${fragment.content}
|
||||
</div>`;
|
||||
return fragmentHtml;
|
||||
}
|
||||
|
||||
@ -2,28 +2,222 @@ var version = require('../vinf').version;
|
||||
module.exports = {
|
||||
id: 'build-your-own-flavor',
|
||||
title: 'Build your own flavor',
|
||||
content: `<p></p>`,
|
||||
content: `<div class="section">
|
||||
<h3>Core module</h3>
|
||||
<p>The <strong>Core</strong> module contains styling rules for common textual elements, headings, quotations and code, as well as rules for universal styling and color palettes. This module is always enabled, as many other modules and components depend on it.</p>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend id="textual-content">Textual content</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="baseRootFontSize">Base root font size (px):</label>
|
||||
<input type="number" id="baseRootFontSize" style="width:calc(100% - 0.5rem);" value="16" min="1"/>
|
||||
<p><small>Base font size for all text elements, in pixels</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="baseLineHeight">Base line height:</label>
|
||||
<input type="number" id="baseLineHeight" style="width:calc(100% - 0.5rem);" value="1.5" min="0.01" step="0.001"/>
|
||||
<p><small>Base line height for all text elements (unitless)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="boldFontWeight">Heading font weight:</label>
|
||||
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900"/>
|
||||
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingRatio">Heading ratio:</label>
|
||||
<input type="number" id="headingRatio" style="width:calc(100% - 0.5rem);" value="1.19" min="0.001" step="0.001"/>
|
||||
<p><small>Ratio for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingLineHeight">Heading line height:</label>
|
||||
<input type="number" id="headingLineHeight" style="width:calc(100% - 0.5rem);" value="1.2" min="0.001" step="0.001"/>
|
||||
<p><small>Line height for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingFontWeight">Heading font weight:</label>
|
||||
<input type="number" id="headingFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900"/>
|
||||
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subheadingFontSize">Subheading font size (em):</label>
|
||||
<input type="number" id="subheadingFontSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for subheadings, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subheadingTopMargin">Subheading top margin (rem):</label>
|
||||
<input type="number" id="subheadingTopMargin" style="width:calc(100% - 0.5rem);" value="-0.25" step="0.001"/>
|
||||
<p><small>Top margin for subheadings, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="smallFontSize">Small text font size (em):</label>
|
||||
<input type="number" id="smallFontSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for small text, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="horizontalRuleLineHeight">Horizontal rule line height:</label>
|
||||
<input type="number" id="horizontalRuleLineHeight" style="width:calc(100% - 0.5rem);" value="1.25" min="0.001" step="0.001"/>
|
||||
<p><small>Line height for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="codeFontSize">Code font size (em):</label>
|
||||
<input type="number" id="codeFontSize" style="width:calc(100% - 0.5rem);" value="0.85" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for code elements, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="supTop">Superscript top position (em):</label>
|
||||
<input type="number" id="supTop" style="width:calc(100% - 0.5rem);" value="-0.5" step="0.001"/>
|
||||
<p><small>Top position for superscript, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subBottom">Subscript bottom position (em):</label>
|
||||
<input type="number" id="subBottom" style="width:calc(100% - 0.5rem);" value="0.25" step="0.001"/>
|
||||
<p><small>Bottom position for subscript, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteQuotationSize">Code font size (rem):</label>
|
||||
<input type="number" id="blockquoteQuotationSize" style="width:calc(100% - 0.5rem);" value="3" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for the quotation of blockquotes, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteCiteSize">Code font size (rem):</label>
|
||||
<input type="number" id="blockquoteCiteSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for the citation of blockquotes, relative to root</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="color-palette">Color palette</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="foreColor">Foreground color:</label>
|
||||
<input type="text" id="foreColor" value="#111" autocomplete="off"/>
|
||||
<span id="foreColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for most textual elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="backColor">Background color:</label>
|
||||
<input type="text" id="backColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="backColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for document body</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="borderColor">Border color:</label>
|
||||
<input type="text" id="borderColor" value="#aaa" autocomplete="off"/>
|
||||
<span id="borderColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#aaa; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Border color for most elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryForeColor">Secondary foreground color:</label>
|
||||
<input type="text" id="secondaryForeColor" value="#444" autocomplete="off"/>
|
||||
<span id="secondaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#444; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary foreground color for certain textual elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryBackColor">Secondary background color:</label>
|
||||
<input type="text" id="secondaryBackColor" value="#f0f0f0" autocomplete="off"/>
|
||||
<span id="secondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f0f0f0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary background color for certain elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryBorderColor">Secondary border color:</label>
|
||||
<input type="text" id="secondaryBorderColor" value="#ddd" autocomplete="off"/>
|
||||
<span id="backColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary border color for certain elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteSidebarColor">Blockquote sidebar color:</label>
|
||||
<input type="text" id="blockquoteSidebarColor" value="#f57c00" autocomplete="off"/>
|
||||
<span id="blockquoteSidebarColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f57c00; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Sidebar color for blockquote elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="preSidebarColor">Preformatted text sidebar color:</label>
|
||||
<input type="text" id="preSidebarColor" value="#1565c0" autocomplete="off"/>
|
||||
<span id="preSidebarColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1565c0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Sidebar color for preformatted text elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="aLinkColor">Link color:</label>
|
||||
<input type="text" id="aLinkColor" value="#0277bd" autocomplete="off"/>
|
||||
<span id="aLinkColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#0277bd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Text color for hyperlink elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="aVisitedColor">Visited link color:</label>
|
||||
<input type="text" id="aVisitedColor" value="#01579b" autocomplete="off"/>
|
||||
<span id="aVisitedColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#01579b; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Text color for visited hyperlink elements</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="universal-styles">Universal styles</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalPadding">Universal padding (rem):</label>
|
||||
<input type="number" id="universalPadding" style="width:calc(100% - 0.5rem);" value="0.5" min="0.001" step="0.001"/>
|
||||
<p><small>Universal padding for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalMargin">Universal margin (rem):</label>
|
||||
<input type="number" id="universalMargin" style="width:calc(100% - 0.5rem);" value="0.5" step="0.001"/>
|
||||
<p><small>Universal margin for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalBorderRadius">Universal border radius (rem):</label>
|
||||
<input type="number" id="universalBorderRadius" style="width:calc(100% - 0.5rem);" value="0.125" min="0.001" step="0.001"/>
|
||||
<p><small>Universal border radius for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalBoxShadow">Universal box shadow:</label>
|
||||
<select id="universalBoxShadow" style="width:calc(100% - 0.5rem);"> <option selected value="0">Disabled</option> <option value="1">Enabled</option> </select>
|
||||
<p><small>Universal box shadow for most elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="mobileBreakpoint">Mobile breakpoint (px):</label>
|
||||
<input type="number" id="mobileBreakpoint" style="width:calc(100% - 0.5rem);" value="768" min="1"/>
|
||||
<p><small>Breakpoint between mobile screen and desktops, in pixels</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="largeScreenBreakpoint">Large screen breakpoint (px):</label>
|
||||
<input type="number" id="largeScreenBreakpoint" style="width:calc(100% - 0.5rem);" value="1280" min="1"/>
|
||||
<p><small>Breakpoint between desktops and large screens, in pixels</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
document.getElementById('foreColor').addEventListener('input', function(e){ updateColorPreview('foreColorPreview', e.target.value) });
|
||||
document.getElementById('backColor').addEventListener('input', function(e){ updateColorPreview('backColorPreview', e.target.value) });
|
||||
document.getElementById('borderColor').addEventListener('input', function(e){ updateColorPreview('borderColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryBackColor').addEventListener('input', function(e){ updateColorPreview('secondaryBackColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryForeColor').addEventListener('input', function(e){ updateColorPreview('secondaryForeColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryBorderColor').addEventListener('input', function(e){ updateColorPreview('secondaryBorderColorPreview', e.target.value) });
|
||||
document.getElementById('blockquoteSidebarColor').addEventListener('input', function(e){ updateColorPreview('blockquoteSidebarColorPreview', e.target.value) });
|
||||
document.getElementById('preSidebarColor').addEventListener('input', function(e){ updateColorPreview('preSidebarColorPreview', e.target.value) });
|
||||
document.getElementById('aLinkColor').addEventListener('input', function(e){ updateColorPreview('aLinkColorPreview', e.target.value) });
|
||||
document.getElementById('aVisitedColor').addEventListener('input', function(e){ updateColorPreview('aVisitedColorPreview', e.target.value) });
|
||||
}
|
||||
function updateColorPreview(element, value) { document.getElementById(element).style.background = value }
|
||||
</script>`,
|
||||
sections: [
|
||||
{id: 'textual-content', title: 'Textual content'},
|
||||
{id: 'color-palette', title: 'Color palette'},
|
||||
{id: 'universal-styles', title: 'Universal styles'},
|
||||
{id: 'grid', title: 'Grid'},
|
||||
{id: 'cards', title: 'Cards'},
|
||||
{id: 'grid', title: 'Grid'},
|
||||
{id: 'cards', title: 'Cards'},
|
||||
{id: 'forms-and-input', title: 'Forms & input'},
|
||||
{id: 'buttons', title: 'Buttons'},
|
||||
{id: 'header', title: 'Header'},
|
||||
{id: 'navbar', title: 'Navigation bar'},
|
||||
{id: 'footer', title: 'Footer'},
|
||||
{id: 'menu-drawer', title: 'Menu drawer'},
|
||||
{id: 'header', title: 'Header'},
|
||||
{id: 'navbar', title: 'Navigation bar'},
|
||||
{id: 'footer', title: 'Footer'},
|
||||
{id: 'menu-drawer', title: 'Menu drawer'},
|
||||
{id: 'tables', title: 'Tables'},
|
||||
{id: 'text-highlighting', title: 'Text highlighting'},
|
||||
{id: 'toasts', title: 'Toasts'},
|
||||
{id: 'tooltips', title: 'Tooltips'},
|
||||
{id: 'modals', title: 'Modal dialogs'},
|
||||
{id: 'collapse', title: 'Spoilers & accordions'},
|
||||
{id: 'text-highlighting', title: 'Text highlighting'},
|
||||
{id: 'toasts', title: 'Toasts'},
|
||||
{id: 'tooltips', title: 'Tooltips'},
|
||||
{id: 'modals', title: 'Modal dialogs'},
|
||||
{id: 'collapse', title: 'Spoilers & accordions'},
|
||||
{id: 'progress', title: 'Progress bars'},
|
||||
{id: 'donut-spinner', title: 'Donut spinners'},
|
||||
{id: 'icons', title: 'Icons'},
|
||||
{id: 'icons', title: 'Icons'},
|
||||
{id: 'utility', title: 'Utilities'}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,311 +1,317 @@
|
||||
# mini.css v3 (Gluon) Development Log
|
||||
|
||||
# v3.0.0-alpha.1
|
||||
|
||||
## 20171011
|
||||
|
||||
- Moved all WIP to `gluon` branch, seems like the right choice.
|
||||
- Initialized pages for **v3**.
|
||||
- Initialized new folder structure in `src` and `dist`, moved legacy code from **v2** to `_v2` inside of `src`, so that it can be easily identified.
|
||||
- Set version for the `gluon` branch to `v3.0.0-alpha.1`, should be ready for a pre-release next month at the latest.
|
||||
- Started development of `core` and `default` flavor.
|
||||
- Turned color palette of `core` into CSS variables to allow for customization.
|
||||
- Changed native font stack to a less legacy-based one.
|
||||
- Defined defaults for certain variables that were not defined in the past.
|
||||
- `$_body-margin` and `$_apply-defaults-to-all` are now hidden variables, effectively hiding a layer of complexity behind them and allowing for easier customization and more streamlined defaults.
|
||||
- Removed a fix for `article, aside, section, figcaption, figure, main, details, menu`, as it was IE-based. Replaced with a single fix for `details` as it could still be a bit of a problem in certain versions of Edge and Firefox.
|
||||
- Removed fix for `audio, video`, as it was IE-based.
|
||||
- Removed fix for `svg:not(:root)`, as it was IE-based.
|
||||
- Completely removed the `dfn` fix, as it's a rarely (if ever) used element and it targets an older version of Android, meaning it's not a really meaningful fix to anyone.
|
||||
- Stopped right before the headings, these will be updated and built next time.
|
||||
|
||||
## 20171015
|
||||
|
||||
- Cleaned up `docs` folder to be able to cherry pick into `master` branch for the new version documentation.
|
||||
- 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).
|
||||
- Added styling for `p`, `ol` and `ul`, used universal margin and applied its double to the `padding-left` of the lists, so that it is reasonably consistent. Hope this wasn't a mistake.
|
||||
- Removed the `overflow: visible;` fix that was applied to `hr` for IE (legacy).
|
||||
- The old *fancy style* of `hr` is now the default and only styling choice. Seems easier that way. Manual tweaking can resolve this for certain flavors.
|
||||
- Added `--border-color` to use for universal border colors.
|
||||
- Applied a new gradient style to `hr`, one that uses `transparent` and the `--border-color`. Hopefully, it works as expected.
|
||||
- Completely remodelled the `blockquote` element, using CSS variables, a cleaner styling and some extra tricks. It should now behave better when there is no `[cite]` attribute present, improving presentation.
|
||||
- After a couple hours of research on web safe monospaced fonts and fonts that are actually up-to-date, a cup of coffe and a terrible headache, I ended up with the shortest possible `font-family` native font stack for monospaced fonts for `code, pre, kbd`. The only useful article was [this](https://www.client9.com/css-system-font-stack---monospace-v1/), due to the fact that it was posted in the last year. Honestly, the last version used just `monospace`, worst-case scenario there is no improvement whatsoever, but at least I tried. Preliminary results show that this looks pretty decent on Windows.
|
||||
- `box-shadow` has been dropped entirely for now, it will be added at a later time during a later alpha. For now, I want a quick and dirty solution for the most part.
|
||||
- Quick and dirty `code` and `kbd` element implementation, tweaks might be required later down the line.
|
||||
- `pre` element styling now has a sidebar by default and uses a CSS variable for this.
|
||||
- `samp` element styling removed (at least for now).
|
||||
- Tested and debugged code up to this point.
|
||||
|
||||
## 20171019
|
||||
|
||||
- Added styling for `small, sub, sup`. Their `font-size` is now tied to one variable for consistency.
|
||||
- Styled links, quite simplified but should be easier to work with for now.
|
||||
- Added styling for `figcaption`, tied color and size to `small`'s size for consistency.
|
||||
- The revamped `core` module seems to be about `200bytes` heavier than the old one, but certain things will probably be optimized over time.
|
||||
|
||||
## 20171020
|
||||
|
||||
- Merged PR #105, upgrading aesthetics.
|
||||
|
||||
## 20171021
|
||||
|
||||
- Started working on the **Gluon** website, just to get a taste for what it will look like and get some feedback.
|
||||
- *TODO* Retake picture after the splash has been tweaked, right before release.
|
||||
- Tweaked the splash screen, looks a bit better now and is easier to read.
|
||||
- Reverted the `hr` fix, as it caused problems.
|
||||
- Moved some of the documentation from the old website to the `/docs/v3` website.
|
||||
|
||||
## 20171024
|
||||
|
||||
- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size.
|
||||
- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
|
||||
- Removed legacy support for prefixed flexbox (`-webkit-`), trimmed off another `91bytes`.
|
||||
- Improved indentation for `grid` module, now that prefixed code is gone.
|
||||
|
||||
## 20171025
|
||||
|
||||
- Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now.
|
||||
- Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables.
|
||||
- Started using variables in `grid`, namely `--universal-padding`. Size increased only by `26bytes`.
|
||||
- Made `$_include-parent-layout` a hidden variable in `grid`.
|
||||
- Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules.
|
||||
- Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far.
|
||||
|
||||
## 20171027
|
||||
|
||||
- Changed a lot of the layout and choices made in the `index.html` page, mainly to create a better and more coherent landing page.
|
||||
- Designed and added `responsive.svg`.
|
||||
- Created the responsiveness and speed section.
|
||||
- Created tailored section.
|
||||
- Landing page is mostly complete, footer and some minor changes are missing, I can start working on the rest of the docs now.
|
||||
|
||||
## 20171106
|
||||
|
||||
- Scraped the old website to get content for new documentation.
|
||||
- Started development of the new website app in `v3_dev`. This is going to be where the docs app is going to be created in.
|
||||
- Initial scaffolding of the documentation UI.
|
||||
- Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future.
|
||||
- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
|
||||
- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
|
||||
- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.
|
||||
|
||||
## 20171107
|
||||
|
||||
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.
|
||||
- Copied over the fix for `number` `input`s, still valid.
|
||||
- Removed the `textarea` fix, as it only applies to IE.
|
||||
- Copied over fixes for `search` elements, as they seem to apply to modern browsers.
|
||||
- Used CSS variables for most of the form `input` custmization, these should be easy to change.
|
||||
- Replaced old `::placeholder` definitions with `:placeholder-shown` for most browsers, kept the `-ms-` prefixed one for Edge. Using `:placeholder-shown` is following the latest standards, it has a high implementation rate, does not conflict with the browser support **Gluon** is targeting and, if it does not work, the code will default to what browsers usually do, which is pretty much what I am doing, too. It also simplifies the code a bit. `::-ms-placeholder` simulates the default behavior, so all browsers should get a similar styling.
|
||||
- Copied over all the fixes for `button` and similar elements, as they were up-to-date.
|
||||
- Created proper variables for `button`-like elements, built element syling on CSS variables.
|
||||
- Tested CSS variables for button, should allow for easy customization and additional styles, meaning it will be a breeze to add all the extra stuff as soon as possible.
|
||||
- Bundled up `[disabled]` styling for all elements in `input_control` as this should now be the default behavior of the code.
|
||||
- Dealt with #114. It shouldn't be a problem anymore.
|
||||
- Added mixins for `button` elements in `input_control`. They should now be perfectly usable.
|
||||
- Removed `header` `display` fix as it was targeting IE 9-.
|
||||
- Implemented `header` and links/buttons in it, `logo` is still missing.
|
||||
- Implemented `.sticky` for all `navigation` elements that needed it.
|
||||
|
||||
## 20171108
|
||||
|
||||
- Started debugging the extremely problematic `header` `.button`s. Figured out that `line-height: 2.4375` can fix the issue, no clue why that is, but I am going to use it for a little while.
|
||||
- Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
|
||||
- Figured out the `line-height` thing for the afforementioned elements.
|
||||
- Styled `.logo` in `header`. The styling is now far simpler and easier to use.
|
||||
- Removed `display:block` fix from `nav` as it was targeting IE 9-.
|
||||
- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
|
||||
- Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell.
|
||||
- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).
|
||||
- `footer` `display:block` fix removed - IE 9-.
|
||||
- `footer` rebuilt, pretty similar to the last iteration, except for colors.
|
||||
|
||||
## 20171109
|
||||
|
||||
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
||||
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
||||
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
|
||||
|
||||
## 20171112
|
||||
|
||||
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
|
||||
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
|
||||
|
||||
## 20171113
|
||||
|
||||
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
|
||||
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
|
||||
- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).
|
||||
- Updated color palettes that should have better contrasts (slight deviation from the old ones, but this might change before release).
|
||||
- Added all necessary variants for `.button`-like elements.
|
||||
- Added custom styles necessary for `.card` elements.
|
||||
- After compilation of the completed modules, the size is `4.58KB`, whereas the size of the **Fermion** branch with the same things (meaning the switches and other ditched components were not included) was `4.56KB`. This is unbelievable and makes the **hugging cat** really happy.
|
||||
- Recompiled the `mini-default` flavor files. They should be mostly ready for release by now.
|
||||
|
||||
## 20171114
|
||||
|
||||
- Struggled for a couple of hours with the whole docs architecture, finally moved to a new customized build system.
|
||||
- Added the `getting-started` section to the documentation, this should now start to look like a real website.
|
||||
- Worked on documentation and custom tool, it should now support a lot of the data that is thrown at it.
|
||||
- Fixed a huge bug that I expected to blow up in my face eventually, where I had removed the `max-width` propert from `.col-` elements. Everything should be bug-free in the `grid` components now.
|
||||
|
||||
## 20171115
|
||||
|
||||
- Documented headings.
|
||||
- Documented code and quotations.
|
||||
- Documented lists.
|
||||
- Documented images.
|
||||
- Added `margin` to `figcaption` elements to reset the browser defaults.
|
||||
|
||||
## 20171116
|
||||
|
||||
- Updated `layout` to make sure everything is bug-free. The `grid` in particular is not very friendly lately.
|
||||
- Fixed a couple of bugs in `input_control` as well.
|
||||
- Improved the build script to actually render the `modifiers` section, it should be complete now, I think.
|
||||
- Documented `grid`. The whole old module has been merged into one long card with all the information readily available. Hopefully it's less complicated now.
|
||||
- Changed the color of `main` in the documentation to help the cards pop out a little bit more.
|
||||
|
||||
## 20171117
|
||||
|
||||
- Documented `card` and `card section` to complete the `layout` module's docs.
|
||||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
|
||||
## 20171118
|
||||
- Documented `button` elements and input grouping.
|
||||
- Documented `header`, `footer` and `nav`.
|
||||
|
||||
## 20171119
|
||||
|
||||
- Documented `drawer`.
|
||||
- Implemented search functionality, using `fuse`. It all works pretty well.
|
||||
- Added `index.html` generation code in the build file, this will allow me to not load a script for the versioning.
|
||||
- Polished menus with icons, updated menus.
|
||||
- Updated splash page with all the necessary thing and buttons.
|
||||
- Optimized all images to make the pages lighter.
|
||||
- Updated links to open in new tabs when they are external.
|
||||
- Generated new favicons.
|
||||
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.
|
||||
|
||||
# v3.0.0-alpha.2
|
||||
|
||||
## 20171120
|
||||
|
||||
- Updated `.drawer` documentation to include customization.
|
||||
- Recompiled default flavor just in case.
|
||||
- Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
|
||||
- Unleashed the first **Gluon** alpha unto the world!
|
||||
|
||||
## 20171204
|
||||
|
||||
- Started working on `contextual` module.
|
||||
- Removed the `margin` property from `mark` elements, it seemed particularly irrelevant, provided they are usually inlined inside text. This can be added manually now, but I don't think nobody will have a use for it.
|
||||
- Removed `border` styling from `mark` elements, it also seemed reasonably irrelevant. Easy to add, generic borders will help here, when I add them back in `utility`.
|
||||
- Slightly altered `inline-block` version of `mark` to match the styling of the rest of the elements.
|
||||
- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
|
||||
- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
|
||||
- Fed **hugging cat**.
|
||||
|
||||
## 20171208
|
||||
|
||||
- Added `tooltip` and `toast`. Their mixins were rarely ever used as far as I can tell, so they will not make into **Gluon**, at least for now. If the need arises, they can be easily added back in at a later date.
|
||||
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
|
||||
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
|
||||
- I am removing `-webkit-transform`, it seems unnecessary now.
|
||||
|
||||
## 20171211
|
||||
|
||||
- Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else.
|
||||
- Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them.
|
||||
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
|
||||
- Moved component-specific variable definitions in `contextual` under the related conditionals.
|
||||
- Documented `mark` elements.
|
||||
- Fixed a broken link in `index.html`.
|
||||
- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
|
||||
- Documented `.toast` messages.
|
||||
|
||||
## 20171217
|
||||
|
||||
- Documented `.tooltip`.
|
||||
|
||||
## 20171228
|
||||
|
||||
- Documented `.modal`.
|
||||
- Documented `.collapse`.
|
||||
|
||||
## 20171229
|
||||
|
||||
- Coded `progress` module. Everything is pretty much the same as before.
|
||||
- Renamed `.spinner-donut` to `.spinner`.
|
||||
- Added a default variant to `progress` and `.spinner`, so that we can have `.primary`, `.secondary` and `.tertiary`.
|
||||
- Added alternative color mixins for `progress` and `.spinner`.
|
||||
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
|
||||
- Updated flavor file with the `progress` module and mixed-in variants.
|
||||
|
||||
## 20171230
|
||||
|
||||
- Documented `progress` element.
|
||||
- Documented `spinner` component.
|
||||
|
||||
## 20180102
|
||||
|
||||
- Started working on `table` module. Tables are now scrollable by default.
|
||||
- Coded desktop view for `table`, no `@media` queries in there yet, but there will be more sooner rather than later.
|
||||
- Added mobile view for tables, fully functional, no problems, still missing `.horizontal` and `.striped` (also `.hoverable` ?) and variablization.
|
||||
|
||||
## 20180103
|
||||
|
||||
- Added `.horizontal` `table` elements, optimized for minimal size. Some variables are missing and unset but overall both normal and `.horizontal` tables should work properly now on desktop as well as on mobile.
|
||||
|
||||
## 20180108
|
||||
|
||||
- Updated tables, variables cleanup.
|
||||
- Added `.striped` and `.hoverable` `table` styles.
|
||||
- Documented `table` module.
|
||||
|
||||
## 20180115
|
||||
|
||||
- Updated menus to not include a dead `blog` link no more. Sorry, **hugging cat**!
|
||||
- Updated tag for `v3.0.0-alpha.2`.
|
||||
- Released the new alpha.
|
||||
|
||||
# v3.0.0-alpha.3
|
||||
|
||||
## 20180116
|
||||
|
||||
- Started working on `utility` module.
|
||||
- Moved all old mixins from `utility_mixins` to the base `utility` module.
|
||||
- Removed `close`, `breadcrumbs` and legacy utility helper classes.
|
||||
- Everything including `utility` module, but no icons is `6.75KB`, which is quite good, considering everything.
|
||||
|
||||
## 20180122
|
||||
|
||||
- Started implementing the `icon` module. Made some changes in the icon set (removed `x` and `menu`, added `phone` and `rss`).
|
||||
- Due to decisions on using `filter: invert(100)` for icon coloring, the minimum supported version of Firefox will now be `35` instead of `31`.
|
||||
- Added all icons.
|
||||
- Added `.inverse` and `.secondary` filters for icons.
|
||||
- Total size with icons is `8.17KB` gzipped.
|
||||
|
||||
## 20180123
|
||||
|
||||
- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
|
||||
- Documented `icon` module in its entirety and retested everything. It's all good.
|
||||
|
||||
## 20180129
|
||||
|
||||
- Documented visibility helpers.
|
||||
- Documented element decorators.
|
||||
- Documented responsive spacing and sizing modifiers.
|
||||
- Updated version info to `v3.0.0-alpha.3`, soon ready to be released as the final alpha.
|
||||
|
||||
## 20180201
|
||||
|
||||
- Prepared everything for `v3.0.0-alpha.3`.
|
||||
- Released the new alpha.
|
||||
# mini.css v3 (Gluon) Development Log
|
||||
|
||||
# v3.0.0-alpha.1
|
||||
|
||||
## 20171011
|
||||
|
||||
- Moved all WIP to `gluon` branch, seems like the right choice.
|
||||
- Initialized pages for **v3**.
|
||||
- Initialized new folder structure in `src` and `dist`, moved legacy code from **v2** to `_v2` inside of `src`, so that it can be easily identified.
|
||||
- Set version for the `gluon` branch to `v3.0.0-alpha.1`, should be ready for a pre-release next month at the latest.
|
||||
- Started development of `core` and `default` flavor.
|
||||
- Turned color palette of `core` into CSS variables to allow for customization.
|
||||
- Changed native font stack to a less legacy-based one.
|
||||
- Defined defaults for certain variables that were not defined in the past.
|
||||
- `$_body-margin` and `$_apply-defaults-to-all` are now hidden variables, effectively hiding a layer of complexity behind them and allowing for easier customization and more streamlined defaults.
|
||||
- Removed a fix for `article, aside, section, figcaption, figure, main, details, menu`, as it was IE-based. Replaced with a single fix for `details` as it could still be a bit of a problem in certain versions of Edge and Firefox.
|
||||
- Removed fix for `audio, video`, as it was IE-based.
|
||||
- Removed fix for `svg:not(:root)`, as it was IE-based.
|
||||
- Completely removed the `dfn` fix, as it's a rarely (if ever) used element and it targets an older version of Android, meaning it's not a really meaningful fix to anyone.
|
||||
- Stopped right before the headings, these will be updated and built next time.
|
||||
|
||||
## 20171015
|
||||
|
||||
- Cleaned up `docs` folder to be able to cherry pick into `master` branch for the new version documentation.
|
||||
- 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).
|
||||
- Added styling for `p`, `ol` and `ul`, used universal margin and applied its double to the `padding-left` of the lists, so that it is reasonably consistent. Hope this wasn't a mistake.
|
||||
- Removed the `overflow: visible;` fix that was applied to `hr` for IE (legacy).
|
||||
- The old *fancy style* of `hr` is now the default and only styling choice. Seems easier that way. Manual tweaking can resolve this for certain flavors.
|
||||
- Added `--border-color` to use for universal border colors.
|
||||
- Applied a new gradient style to `hr`, one that uses `transparent` and the `--border-color`. Hopefully, it works as expected.
|
||||
- Completely remodelled the `blockquote` element, using CSS variables, a cleaner styling and some extra tricks. It should now behave better when there is no `[cite]` attribute present, improving presentation.
|
||||
- After a couple hours of research on web safe monospaced fonts and fonts that are actually up-to-date, a cup of coffe and a terrible headache, I ended up with the shortest possible `font-family` native font stack for monospaced fonts for `code, pre, kbd`. The only useful article was [this](https://www.client9.com/css-system-font-stack---monospace-v1/), due to the fact that it was posted in the last year. Honestly, the last version used just `monospace`, worst-case scenario there is no improvement whatsoever, but at least I tried. Preliminary results show that this looks pretty decent on Windows.
|
||||
- `box-shadow` has been dropped entirely for now, it will be added at a later time during a later alpha. For now, I want a quick and dirty solution for the most part.
|
||||
- Quick and dirty `code` and `kbd` element implementation, tweaks might be required later down the line.
|
||||
- `pre` element styling now has a sidebar by default and uses a CSS variable for this.
|
||||
- `samp` element styling removed (at least for now).
|
||||
- Tested and debugged code up to this point.
|
||||
|
||||
## 20171019
|
||||
|
||||
- Added styling for `small, sub, sup`. Their `font-size` is now tied to one variable for consistency.
|
||||
- Styled links, quite simplified but should be easier to work with for now.
|
||||
- Added styling for `figcaption`, tied color and size to `small`'s size for consistency.
|
||||
- The revamped `core` module seems to be about `200bytes` heavier than the old one, but certain things will probably be optimized over time.
|
||||
|
||||
## 20171020
|
||||
|
||||
- Merged PR #105, upgrading aesthetics.
|
||||
|
||||
## 20171021
|
||||
|
||||
- Started working on the **Gluon** website, just to get a taste for what it will look like and get some feedback.
|
||||
- *TODO* Retake picture after the splash has been tweaked, right before release.
|
||||
- Tweaked the splash screen, looks a bit better now and is easier to read.
|
||||
- Reverted the `hr` fix, as it caused problems.
|
||||
- Moved some of the documentation from the old website to the `/docs/v3` website.
|
||||
|
||||
## 20171024
|
||||
|
||||
- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size.
|
||||
- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
|
||||
- Removed legacy support for prefixed flexbox (`-webkit-`), trimmed off another `91bytes`.
|
||||
- Improved indentation for `grid` module, now that prefixed code is gone.
|
||||
|
||||
## 20171025
|
||||
|
||||
- Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now.
|
||||
- Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables.
|
||||
- Started using variables in `grid`, namely `--universal-padding`. Size increased only by `26bytes`.
|
||||
- Made `$_include-parent-layout` a hidden variable in `grid`.
|
||||
- Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules.
|
||||
- Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far.
|
||||
|
||||
## 20171027
|
||||
|
||||
- Changed a lot of the layout and choices made in the `index.html` page, mainly to create a better and more coherent landing page.
|
||||
- Designed and added `responsive.svg`.
|
||||
- Created the responsiveness and speed section.
|
||||
- Created tailored section.
|
||||
- Landing page is mostly complete, footer and some minor changes are missing, I can start working on the rest of the docs now.
|
||||
|
||||
## 20171106
|
||||
|
||||
- Scraped the old website to get content for new documentation.
|
||||
- Started development of the new website app in `v3_dev`. This is going to be where the docs app is going to be created in.
|
||||
- Initial scaffolding of the documentation UI.
|
||||
- Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future.
|
||||
- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
|
||||
- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
|
||||
- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.
|
||||
|
||||
## 20171107
|
||||
|
||||
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.
|
||||
- Copied over the fix for `number` `input`s, still valid.
|
||||
- Removed the `textarea` fix, as it only applies to IE.
|
||||
- Copied over fixes for `search` elements, as they seem to apply to modern browsers.
|
||||
- Used CSS variables for most of the form `input` custmization, these should be easy to change.
|
||||
- Replaced old `::placeholder` definitions with `:placeholder-shown` for most browsers, kept the `-ms-` prefixed one for Edge. Using `:placeholder-shown` is following the latest standards, it has a high implementation rate, does not conflict with the browser support **Gluon** is targeting and, if it does not work, the code will default to what browsers usually do, which is pretty much what I am doing, too. It also simplifies the code a bit. `::-ms-placeholder` simulates the default behavior, so all browsers should get a similar styling.
|
||||
- Copied over all the fixes for `button` and similar elements, as they were up-to-date.
|
||||
- Created proper variables for `button`-like elements, built element syling on CSS variables.
|
||||
- Tested CSS variables for button, should allow for easy customization and additional styles, meaning it will be a breeze to add all the extra stuff as soon as possible.
|
||||
- Bundled up `[disabled]` styling for all elements in `input_control` as this should now be the default behavior of the code.
|
||||
- Dealt with #114. It shouldn't be a problem anymore.
|
||||
- Added mixins for `button` elements in `input_control`. They should now be perfectly usable.
|
||||
- Removed `header` `display` fix as it was targeting IE 9-.
|
||||
- Implemented `header` and links/buttons in it, `logo` is still missing.
|
||||
- Implemented `.sticky` for all `navigation` elements that needed it.
|
||||
|
||||
## 20171108
|
||||
|
||||
- Started debugging the extremely problematic `header` `.button`s. Figured out that `line-height: 2.4375` can fix the issue, no clue why that is, but I am going to use it for a little while.
|
||||
- Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
|
||||
- Figured out the `line-height` thing for the afforementioned elements.
|
||||
- Styled `.logo` in `header`. The styling is now far simpler and easier to use.
|
||||
- Removed `display:block` fix from `nav` as it was targeting IE 9-.
|
||||
- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
|
||||
- Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell.
|
||||
- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).
|
||||
- `footer` `display:block` fix removed - IE 9-.
|
||||
- `footer` rebuilt, pretty similar to the last iteration, except for colors.
|
||||
|
||||
## 20171109
|
||||
|
||||
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
||||
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
||||
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
|
||||
|
||||
## 20171112
|
||||
|
||||
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
|
||||
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
|
||||
|
||||
## 20171113
|
||||
|
||||
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
|
||||
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
|
||||
- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).
|
||||
- Updated color palettes that should have better contrasts (slight deviation from the old ones, but this might change before release).
|
||||
- Added all necessary variants for `.button`-like elements.
|
||||
- Added custom styles necessary for `.card` elements.
|
||||
- After compilation of the completed modules, the size is `4.58KB`, whereas the size of the **Fermion** branch with the same things (meaning the switches and other ditched components were not included) was `4.56KB`. This is unbelievable and makes the **hugging cat** really happy.
|
||||
- Recompiled the `mini-default` flavor files. They should be mostly ready for release by now.
|
||||
|
||||
## 20171114
|
||||
|
||||
- Struggled for a couple of hours with the whole docs architecture, finally moved to a new customized build system.
|
||||
- Added the `getting-started` section to the documentation, this should now start to look like a real website.
|
||||
- Worked on documentation and custom tool, it should now support a lot of the data that is thrown at it.
|
||||
- Fixed a huge bug that I expected to blow up in my face eventually, where I had removed the `max-width` propert from `.col-` elements. Everything should be bug-free in the `grid` components now.
|
||||
|
||||
## 20171115
|
||||
|
||||
- Documented headings.
|
||||
- Documented code and quotations.
|
||||
- Documented lists.
|
||||
- Documented images.
|
||||
- Added `margin` to `figcaption` elements to reset the browser defaults.
|
||||
|
||||
## 20171116
|
||||
|
||||
- Updated `layout` to make sure everything is bug-free. The `grid` in particular is not very friendly lately.
|
||||
- Fixed a couple of bugs in `input_control` as well.
|
||||
- Improved the build script to actually render the `modifiers` section, it should be complete now, I think.
|
||||
- Documented `grid`. The whole old module has been merged into one long card with all the information readily available. Hopefully it's less complicated now.
|
||||
- Changed the color of `main` in the documentation to help the cards pop out a little bit more.
|
||||
|
||||
## 20171117
|
||||
|
||||
- Documented `card` and `card section` to complete the `layout` module's docs.
|
||||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
|
||||
## 20171118
|
||||
- Documented `button` elements and input grouping.
|
||||
- Documented `header`, `footer` and `nav`.
|
||||
|
||||
## 20171119
|
||||
|
||||
- Documented `drawer`.
|
||||
- Implemented search functionality, using `fuse`. It all works pretty well.
|
||||
- Added `index.html` generation code in the build file, this will allow me to not load a script for the versioning.
|
||||
- Polished menus with icons, updated menus.
|
||||
- Updated splash page with all the necessary thing and buttons.
|
||||
- Optimized all images to make the pages lighter.
|
||||
- Updated links to open in new tabs when they are external.
|
||||
- Generated new favicons.
|
||||
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.
|
||||
|
||||
# v3.0.0-alpha.2
|
||||
|
||||
## 20171120
|
||||
|
||||
- Updated `.drawer` documentation to include customization.
|
||||
- Recompiled default flavor just in case.
|
||||
- Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
|
||||
- Unleashed the first **Gluon** alpha unto the world!
|
||||
|
||||
## 20171204
|
||||
|
||||
- Started working on `contextual` module.
|
||||
- Removed the `margin` property from `mark` elements, it seemed particularly irrelevant, provided they are usually inlined inside text. This can be added manually now, but I don't think nobody will have a use for it.
|
||||
- Removed `border` styling from `mark` elements, it also seemed reasonably irrelevant. Easy to add, generic borders will help here, when I add them back in `utility`.
|
||||
- Slightly altered `inline-block` version of `mark` to match the styling of the rest of the elements.
|
||||
- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
|
||||
- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
|
||||
- Fed **hugging cat**.
|
||||
|
||||
## 20171208
|
||||
|
||||
- Added `tooltip` and `toast`. Their mixins were rarely ever used as far as I can tell, so they will not make into **Gluon**, at least for now. If the need arises, they can be easily added back in at a later date.
|
||||
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
|
||||
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
|
||||
- I am removing `-webkit-transform`, it seems unnecessary now.
|
||||
|
||||
## 20171211
|
||||
|
||||
- Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else.
|
||||
- Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them.
|
||||
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
|
||||
- Moved component-specific variable definitions in `contextual` under the related conditionals.
|
||||
- Documented `mark` elements.
|
||||
- Fixed a broken link in `index.html`.
|
||||
- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
|
||||
- Documented `.toast` messages.
|
||||
|
||||
## 20171217
|
||||
|
||||
- Documented `.tooltip`.
|
||||
|
||||
## 20171228
|
||||
|
||||
- Documented `.modal`.
|
||||
- Documented `.collapse`.
|
||||
|
||||
## 20171229
|
||||
|
||||
- Coded `progress` module. Everything is pretty much the same as before.
|
||||
- Renamed `.spinner-donut` to `.spinner`.
|
||||
- Added a default variant to `progress` and `.spinner`, so that we can have `.primary`, `.secondary` and `.tertiary`.
|
||||
- Added alternative color mixins for `progress` and `.spinner`.
|
||||
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
|
||||
- Updated flavor file with the `progress` module and mixed-in variants.
|
||||
|
||||
## 20171230
|
||||
|
||||
- Documented `progress` element.
|
||||
- Documented `spinner` component.
|
||||
|
||||
## 20180102
|
||||
|
||||
- Started working on `table` module. Tables are now scrollable by default.
|
||||
- Coded desktop view for `table`, no `@media` queries in there yet, but there will be more sooner rather than later.
|
||||
- Added mobile view for tables, fully functional, no problems, still missing `.horizontal` and `.striped` (also `.hoverable` ?) and variablization.
|
||||
|
||||
## 20180103
|
||||
|
||||
- Added `.horizontal` `table` elements, optimized for minimal size. Some variables are missing and unset but overall both normal and `.horizontal` tables should work properly now on desktop as well as on mobile.
|
||||
|
||||
## 20180108
|
||||
|
||||
- Updated tables, variables cleanup.
|
||||
- Added `.striped` and `.hoverable` `table` styles.
|
||||
- Documented `table` module.
|
||||
|
||||
## 20180115
|
||||
|
||||
- Updated menus to not include a dead `blog` link no more. Sorry, **hugging cat**!
|
||||
- Updated tag for `v3.0.0-alpha.2`.
|
||||
- Released the new alpha.
|
||||
|
||||
# v3.0.0-alpha.3
|
||||
|
||||
## 20180116
|
||||
|
||||
- Started working on `utility` module.
|
||||
- Moved all old mixins from `utility_mixins` to the base `utility` module.
|
||||
- Removed `close`, `breadcrumbs` and legacy utility helper classes.
|
||||
- Everything including `utility` module, but no icons is `6.75KB`, which is quite good, considering everything.
|
||||
|
||||
## 20180122
|
||||
|
||||
- Started implementing the `icon` module. Made some changes in the icon set (removed `x` and `menu`, added `phone` and `rss`).
|
||||
- Due to decisions on using `filter: invert(100)` for icon coloring, the minimum supported version of Firefox will now be `35` instead of `31`.
|
||||
- Added all icons.
|
||||
- Added `.inverse` and `.secondary` filters for icons.
|
||||
- Total size with icons is `8.17KB` gzipped.
|
||||
|
||||
## 20180123
|
||||
|
||||
- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
|
||||
- Documented `icon` module in its entirety and retested everything. It's all good.
|
||||
|
||||
## 20180129
|
||||
|
||||
- Documented visibility helpers.
|
||||
- Documented element decorators.
|
||||
- Documented responsive spacing and sizing modifiers.
|
||||
- Updated version info to `v3.0.0-alpha.3`, soon ready to be released as the final alpha.
|
||||
|
||||
## 20180201
|
||||
|
||||
- Prepared everything for `v3.0.0-alpha.3`.
|
||||
- Released the new alpha.
|
||||
|
||||
## 20180501
|
||||
|
||||
- Started working on the tool for flavors. Made an initial draft of all the needed variables.
|
||||
- Coded the base architecture behind the flavors page.
|
||||
- Coded the `core` module's inputs for the flavors page.
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span> Docs</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
@ -24,11 +24,203 @@
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><a href="#prebuilt-flavors" id="link-to-prebuilt-flavors">Prebuilt flavors</a><hr style="padding:0;"/><a href="#textual-content" id="link-to-textual-content">Textual content</a><a href="#color-palette" id="link-to-color-palette">Color palette</a><a href="#universal-styles" id="link-to-universal-styles">Universal styles</a><a href="#grid" id="link-to-grid">Grid</a><a href="#cards" id="link-to-cards">Cards</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#header" id="link-to-header">Header</a><a href="#navbar" id="link-to-navbar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#menu-drawer" id="link-to-menu-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modals" id="link-to-modals">Modal dialogs</a><a href="#collapse" id="link-to-collapse">Spoilers & accordions</a><a href="#progress" id="link-to-progress">Progress bars</a><a href="#donut-spinner" id="link-to-donut-spinner">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#utility" id="link-to-utility">Utilities</a></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid">
|
||||
<h2 class="section double-padded">Prebuilt flavors</h2>
|
||||
<div class="section"><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul></div>
|
||||
<h2 class="section double-padded">Prebuilt flavors</h2><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul>
|
||||
</div><br/><div id="build-your-own-flavor" class="card fluid">
|
||||
<h2 class="section double-padded">Build your own flavor</h2>
|
||||
<div class="section"><p></p></div>
|
||||
<h2 class="section double-padded">Build your own flavor</h2><div class="section">
|
||||
<h3>Core module</h3>
|
||||
<p>The <strong>Core</strong> module contains styling rules for common textual elements, headings, quotations and code, as well as rules for universal styling and color palettes. This module is always enabled, as many other modules and components depend on it.</p>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend id="textual-content">Textual content</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="baseRootFontSize">Base root font size (px):</label>
|
||||
<input type="number" id="baseRootFontSize" style="width:calc(100% - 0.5rem);" value="16" min="1"/>
|
||||
<p><small>Base font size for all text elements, in pixels</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="baseLineHeight">Base line height:</label>
|
||||
<input type="number" id="baseLineHeight" style="width:calc(100% - 0.5rem);" value="1.5" min="0.01" step="0.001"/>
|
||||
<p><small>Base line height for all text elements (unitless)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="boldFontWeight">Heading font weight:</label>
|
||||
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900"/>
|
||||
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingRatio">Heading ratio:</label>
|
||||
<input type="number" id="headingRatio" style="width:calc(100% - 0.5rem);" value="1.19" min="0.001" step="0.001"/>
|
||||
<p><small>Ratio for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingLineHeight">Heading line height:</label>
|
||||
<input type="number" id="headingLineHeight" style="width:calc(100% - 0.5rem);" value="1.2" min="0.001" step="0.001"/>
|
||||
<p><small>Line height for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="headingFontWeight">Heading font weight:</label>
|
||||
<input type="number" id="headingFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900"/>
|
||||
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subheadingFontSize">Subheading font size (em):</label>
|
||||
<input type="number" id="subheadingFontSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for subheadings, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subheadingTopMargin">Subheading top margin (rem):</label>
|
||||
<input type="number" id="subheadingTopMargin" style="width:calc(100% - 0.5rem);" value="-0.25" step="0.001"/>
|
||||
<p><small>Top margin for subheadings, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="smallFontSize">Small text font size (em):</label>
|
||||
<input type="number" id="smallFontSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for small text, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="horizontalRuleLineHeight">Horizontal rule line height:</label>
|
||||
<input type="number" id="horizontalRuleLineHeight" style="width:calc(100% - 0.5rem);" value="1.25" min="0.001" step="0.001"/>
|
||||
<p><small>Line height for headings</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="codeFontSize">Code font size (em):</label>
|
||||
<input type="number" id="codeFontSize" style="width:calc(100% - 0.5rem);" value="0.85" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for code elements, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="supTop">Superscript top position (em):</label>
|
||||
<input type="number" id="supTop" style="width:calc(100% - 0.5rem);" value="-0.5" step="0.001"/>
|
||||
<p><small>Top position for superscript, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="subBottom">Subscript bottom position (em):</label>
|
||||
<input type="number" id="subBottom" style="width:calc(100% - 0.5rem);" value="0.25" step="0.001"/>
|
||||
<p><small>Bottom position for subscript, relative to context</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteQuotationSize">Code font size (rem):</label>
|
||||
<input type="number" id="blockquoteQuotationSize" style="width:calc(100% - 0.5rem);" value="3" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for the quotation of blockquotes, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteCiteSize">Code font size (rem):</label>
|
||||
<input type="number" id="blockquoteCiteSize" style="width:calc(100% - 0.5rem);" value="0.75" min="0.001" step="0.001"/>
|
||||
<p><small>Font size for the citation of blockquotes, relative to root</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="color-palette">Color palette</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="foreColor">Foreground color:</label>
|
||||
<input type="text" id="foreColor" value="#111" autocomplete="off"/>
|
||||
<span id="foreColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Foreground color for most textual elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="backColor">Background color:</label>
|
||||
<input type="text" id="backColor" value="#f8f8f8" autocomplete="off"/>
|
||||
<span id="backColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f8f8f8; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Background color for document body</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="borderColor">Border color:</label>
|
||||
<input type="text" id="borderColor" value="#aaa" autocomplete="off"/>
|
||||
<span id="borderColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#aaa; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Border color for most elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryForeColor">Secondary foreground color:</label>
|
||||
<input type="text" id="secondaryForeColor" value="#444" autocomplete="off"/>
|
||||
<span id="secondaryForeColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#444; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary foreground color for certain textual elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryBackColor">Secondary background color:</label>
|
||||
<input type="text" id="secondaryBackColor" value="#f0f0f0" autocomplete="off"/>
|
||||
<span id="secondaryBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f0f0f0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary background color for certain elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="secondaryBorderColor">Secondary border color:</label>
|
||||
<input type="text" id="secondaryBorderColor" value="#ddd" autocomplete="off"/>
|
||||
<span id="backColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#ddd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Secondary border color for certain elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="blockquoteSidebarColor">Blockquote sidebar color:</label>
|
||||
<input type="text" id="blockquoteSidebarColor" value="#f57c00" autocomplete="off"/>
|
||||
<span id="blockquoteSidebarColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#f57c00; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Sidebar color for blockquote elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="preSidebarColor">Preformatted text sidebar color:</label>
|
||||
<input type="text" id="preSidebarColor" value="#1565c0" autocomplete="off"/>
|
||||
<span id="preSidebarColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#1565c0; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Sidebar color for preformatted text elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="aLinkColor">Link color:</label>
|
||||
<input type="text" id="aLinkColor" value="#0277bd" autocomplete="off"/>
|
||||
<span id="aLinkColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#0277bd; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Text color for hyperlink elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="aVisitedColor">Visited link color:</label>
|
||||
<input type="text" id="aVisitedColor" value="#01579b" autocomplete="off"/>
|
||||
<span id="aVisitedColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#01579b; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
|
||||
<p style="margin-top: -1rem"><small>Text color for visited hyperlink elements</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="universal-styles">Universal styles</legend>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalPadding">Universal padding (rem):</label>
|
||||
<input type="number" id="universalPadding" style="width:calc(100% - 0.5rem);" value="0.5" min="0.001" step="0.001"/>
|
||||
<p><small>Universal padding for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalMargin">Universal margin (rem):</label>
|
||||
<input type="number" id="universalMargin" style="width:calc(100% - 0.5rem);" value="0.5" step="0.001"/>
|
||||
<p><small>Universal margin for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalBorderRadius">Universal border radius (rem):</label>
|
||||
<input type="number" id="universalBorderRadius" style="width:calc(100% - 0.5rem);" value="0.125" min="0.001" step="0.001"/>
|
||||
<p><small>Universal border radius for most elements, relative to root</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="universalBoxShadow">Universal box shadow:</label>
|
||||
<select id="universalBoxShadow" style="width:calc(100% - 0.5rem);"> <option selected value="0">Disabled</option> <option value="1">Enabled</option> </select>
|
||||
<p><small>Universal box shadow for most elements</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="mobileBreakpoint">Mobile breakpoint (px):</label>
|
||||
<input type="number" id="mobileBreakpoint" style="width:calc(100% - 0.5rem);" value="0.125" min="0.001" step="0.001"/>
|
||||
<p><small>Breakpoint between mobile screen and desktops, in pixels</small></p>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="largeScreenBreakpoint">Large screen breakpoint (px):</label>
|
||||
<input type="number" id="largeScreenBreakpoint" style="width:calc(100% - 0.5rem);" value="0.125" min="0.001" step="0.001"/>
|
||||
<p><small>Breakpoint between desktops and large screens, in pixels</small></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
document.getElementById('foreColor').addEventListener('input', function(e){ updateColorPreview('foreColorPreview', e.target.value) });
|
||||
document.getElementById('backColor').addEventListener('input', function(e){ updateColorPreview('backColorPreview', e.target.value) });
|
||||
document.getElementById('borderColor').addEventListener('input', function(e){ updateColorPreview('borderColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryBackColor').addEventListener('input', function(e){ updateColorPreview('secondaryBackColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryForeColor').addEventListener('input', function(e){ updateColorPreview('secondaryForeColorPreview', e.target.value) });
|
||||
document.getElementById('secondaryBorderColor').addEventListener('input', function(e){ updateColorPreview('secondaryBorderColorPreview', e.target.value) });
|
||||
document.getElementById('blockquoteSidebarColor').addEventListener('input', function(e){ updateColorPreview('blockquoteSidebarColorPreview', e.target.value) });
|
||||
document.getElementById('preSidebarColor').addEventListener('input', function(e){ updateColorPreview('preSidebarColorPreview', e.target.value) });
|
||||
document.getElementById('aLinkColor').addEventListener('input', function(e){ updateColorPreview('aLinkColorPreview', e.target.value) });
|
||||
document.getElementById('aVisitedColor').addEventListener('input', function(e){ updateColorPreview('aVisitedColorPreview', e.target.value) });
|
||||
}
|
||||
function updateColorPreview(element, value) { document.getElementById(element).style.background = value }
|
||||
</script>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>.</p></footer></main>
|
||||
</div></div>
|
||||
</body></html>
|
||||
Loading…
x
Reference in New Issue
Block a user