mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-05 21:37:23 +02:00
Inputs for the core module flavor controls
This commit is contained in:
Angelos Chalaris
@@ -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>
|
<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>
|
<span> Github</span></a>
|
||||||
<a class="button col-sm col-md" href="#">
|
<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>
|
<span> Docs</span></a>
|
||||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||||
</header>
|
</header>
|
||||||
@@ -235,8 +235,7 @@ var customizationLinks = [buildLink(custFragments[0]), '<hr style="padding:0;"/>
|
|||||||
|
|
||||||
function buildCustomizationFragment(fragment){
|
function buildCustomizationFragment(fragment){
|
||||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||||
<h2 class="section double-padded">${fragment.title}</h2>
|
<h2 class="section double-padded">${fragment.title}</h2>${fragment.content}
|
||||||
<div class="section">${fragment.content}</div>
|
|
||||||
</div>`;
|
</div>`;
|
||||||
return fragmentHtml;
|
return fragmentHtml;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,201 @@ var version = require('../vinf').version;
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
id: 'build-your-own-flavor',
|
id: 'build-your-own-flavor',
|
||||||
title: '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: [
|
sections: [
|
||||||
{id: 'textual-content', title: 'Textual content'},
|
{id: 'textual-content', title: 'Textual content'},
|
||||||
{id: 'color-palette', title: 'Color palette'},
|
{id: 'color-palette', title: 'Color palette'},
|
||||||
|
|||||||
@@ -309,3 +309,9 @@
|
|||||||
|
|
||||||
- Prepared everything for `v3.0.0-alpha.3`.
|
- Prepared everything for `v3.0.0-alpha.3`.
|
||||||
- Released the new alpha.
|
- 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>
|
<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>
|
<span> Github</span></a>
|
||||||
<a class="button col-sm col-md" href="#">
|
<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>
|
<span> Docs</span></a>
|
||||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||||
</header>
|
</header>
|
||||||
@@ -24,11 +24,203 @@
|
|||||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
<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>
|
<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">
|
<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>
|
<h2 class="section double-padded">Prebuilt flavors</h2><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul>
|
||||||
<div class="section"><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul></div>
|
|
||||||
</div><br/><div id="build-your-own-flavor" class="card fluid">
|
</div><br/><div id="build-your-own-flavor" class="card fluid">
|
||||||
<h2 class="section double-padded">Build your own flavor</h2>
|
<h2 class="section double-padded">Build your own flavor</h2><div class="section">
|
||||||
<div class="section"><p></p></div>
|
<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><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>
|
</div></div>
|
||||||
</body></html>
|
</body></html>
|
||||||
Reference in New Issue
Block a user