0afb5277ad
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
526 lines
40 KiB
HTML
526 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="../mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Core</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, core ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content=".../page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-centered { text-align: center; } .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
|
|
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } }
|
|
td:first-child, td:last-child { font-family: monospace, monospace; }
|
|
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core.html#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
|
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="core-title">
|
|
<div class="col-sm-12">
|
|
<h1>Core</h1>
|
|
<p style="text-align:justify">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p><br />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p style="text-align:justify">Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The <strong>core</strong> module utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in <strong>core</strong> deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align:justify">To customize the <strong>core</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="typography-headings">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Typography & headings</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>core</strong> module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.</p><br/>
|
|
<table class="striped" style="width: 100%;">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text and foregound color</td><td data-label="Sample value">#212121</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Body background color</td><td data-label="Sample value">#f5f5f5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$base-font-family</td><td data-label="Type">Font family</td>
|
|
<td data-label="Description">Default font stack for all elements</td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$base-root-font-size</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
|
<td data-label="Description">Root font size</td><td data-label="Sample value">16px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$apply-defaults-to-all</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Applies default font sizing be to all elements<sup><a href="#typo-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$base-font-size</td><td data-label="Type">Font size (<code>em</code> or <code>rem</code> only)</td>
|
|
<td data-label="Description">Default font sizing for all elements<sup><a href="#typo-note-one">1</a></sup></td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$base-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Default line height for all elements</td><td data-label="Sample value">1.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$use-fluid-typography</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables scaling of the font size for the root elements<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$fluid-type-start-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">Breakpoint where fluid typography scaling starts<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$fluid-type-end-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">Breakpoint where fluid typography scaling ends<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$fluid-type-small-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
|
<td data-label="Description">Smallest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$fluid-type-large-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
|
<td data-label="Description">Largest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$body-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for the body</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h1-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h1></code> elements</td><td data-label="Sample value">2em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h2-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h2></code> elements</td><td data-label="Sample value">1.5em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h3-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h3></code> elements</td><td data-label="Sample value">1.25em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h4-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h4></code> elements</td><td data-label="Sample value">1.1em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h5-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h5></code> elements</td><td data-label="Sample value">1em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$h6-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
|
<td data-label="Description">Font size for <code><h6></code> elements</td><td data-label="Sample value">0.85em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$heading-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Default line height for heading elements</td><td data-label="Sample value">1.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$heading-font-weight</td><td data-label="Type">Font weight</td>
|
|
<td data-label="Description">Default font weight for heading elements</td><td data-label="Sample value">500</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$heading-smalltext-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Font color for <code><small></code> elements inside headings</td><td data-label="Sample value">#424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$make-heading-smalltext-block</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Makes <code><small></code> elements inside headings display below them<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$heading-smalltext-b-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
|
<td data-label="Description">Font size for <code><small></code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">75%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$heading-smalltext-b-top-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Top margin for <code><small></code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">-4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$paragraph-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><p></code> elements</td><td data-label="Sample value">1px 8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$bold-font-weight</td><td data-label="Type">Font weight</td>
|
|
<td data-label="Description">Font weight for <code><b></code> and <code><strong></code> elements</td><td data-label="Sample value">700</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$small-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
|
<td data-label="Description">Font size for <code><small></code> elements</td><td data-label="Sample value">75%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$sup-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
|
<td data-label="Description">Font size for <code><sup></code> elements</td><td data-label="Sample value">75%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$sup-top</td><td data-label="Type">Position top</td>
|
|
<td data-label="Description">Position top for <code><sup></code> elements</td><td data-label="Sample value">-8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$sub-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
|
<td data-label="Description">Font size for <code><sub></code> elements</td><td data-label="Sample value">75%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$sub-bottom</td><td data-label="Type">Position bottom</td>
|
|
<td data-label="Description">Position bottom for <code><sub></code> elements</td><td data-label="Sample value">-4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$link-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for links (unvisited)</td><td data-label="Sample value">#0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$link-visited-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for links (visited)</td><td data-label="Sample value">#01579b</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$link-hover-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for links (on hover)<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">#0288d1</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$apply-link-hover-fade</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Applies fading to links on hover<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$link-font-weight</td><td data-label="Type">Font weight</td>
|
|
<td data-label="Description">Font weight for links</td><td data-label="Sample value">500</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$apply-link-underline</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Applies underlining to links on hover</td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="typo-note-one">The value of <code>$base-font-size</code> will only be applied if <code>$apply-defaults-to-all</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="typo-note-two">The values of <code>$fluid-type-start-breakpoint</code>, <code>$fluid-type-end-breakpoint</code>, <code>$fluid-type-small-type</code> and <code>$fluid-type-large-type</code> will only be applied if <code>$use-fluid-typography</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="typo-note-three">The values of <code>$heading-smalltext-b-font-size</code> and <code>$heading-smalltext-b-top-margin</code> will only be applied if <code>$make-heading-smalltext-block</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="typo-note-four">The value of <code>$link-hover-fore-color</code> will only be applied if <code>$apply-link-hover-fade</code> is set to <code class="fore-secondary">false</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="common-elements">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Common elements & fixes</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>core</strong> module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.</p><br/>
|
|
<table style="width: 100%;" class="striped">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$list-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><ul></code> and <code><ol></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$list-left-padding</td><td data-label="Type">Padding left</td>
|
|
<td data-label="Description">Left padding for <code><ul></code> and <code><ol></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$horizontal-rule-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Line height for <code><hr></code> elements</td><td data-label="Sample value">1.25em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$horizontal-rule-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><hr></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$horizontal-rule-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><hr></code> elements<sup><a href="#other-note-one">1</a></sup></td><td data-label="Sample value">1px solid #757575</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$horizontal-rule-fancy-style</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Applies gradient styling to <code><hr></code> elements<sup><a href="#other-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$horizontal-rule-fancy-gradient</td><td data-label="Type">Gradient</td>
|
|
<td data-label="Description">Gradient styling for <code><hr></code> elements<sup><a href="#other-note-two">2</a></sup></td><td data-label="Sample value">to right, #616161, #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><blockquote></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><blockquote></code> elements</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><blockquote></code> elements</td><td data-label="Sample value">8px 10px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><blockquote></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><blockquote></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><blockquote></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><blockquote></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-sidebar-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Style for the sidebar of <code><blockquote></code> elements</td><td data-label="Sample value">3px solid #616161</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-cite-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size for citations in <code><blockquote></code> elements</td><td data-label="Sample value">0.85em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-cite-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for citations in <code><blockquote></code> elements</td><td data-label="Sample value">#616161</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-cite-left-position</td><td data-label="Type">Position left</td>
|
|
<td data-label="Description">Position left for citations in <code><blockquote></code> elements</td><td data-label="Sample value">10px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$blockquote-cite-bottom-position</td><td data-label="Type">Position bottom</td>
|
|
<td data-label="Description">Position bottom for citations in <code><blockquote></code> elements</td><td data-label="Sample value">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$use-default-code-fonts</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Use default fonts for code elements<sup><a href="#other-note-three">3</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-font-family</td><td data-label="Type">Font family</td>
|
|
<td data-label="Description">Font for code elements<sup><a href="#other-note-three">3</a></sup></td><td data-label="Sample value">monospace</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><code></code> elements</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><code></code> elements</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><code></code> elements</td><td data-label="Sample value">#e0e0e0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><code></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><code></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$code-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><code></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><pte></code> elements</td><td data-label="Sample value">12px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><pte></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><pre></code> elements</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><pre></code> elements</td><td data-label="Sample value">#e0e0e0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><pre></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><pre></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><pre></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$add-pre-element-sidebar</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Adds a sidebar to <code><pre></code> elements<sup><a href="#other-note-four">4</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$pre-element-sidebar-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Style of the sidebar for <code><pre></code> elements<sup><a href="#other-note-four">4</a></sup></td><td data-label="Sample value">3px solid #1565c0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><kbd></code> elements</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><kbd></code> elements</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><kbd></code> elements</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><kbd></code> elements</td><td data-label="Sample value">1px solid #212121</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><kbd></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$kbd-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><kbd></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$style-samp-element</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Applies styling to <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">#2196f3</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$samp-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$include-dfn-fix</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Includes a display fix for <code><dfn></code> elements for Android 4.3</td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$figcaption-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
|
<td data-label="Description">Font size for <code><figcaption></code> elements</td><td data-label="Sample value">80%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$figcaption-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><figcaption></code> elements</td><td data-label="Sample value">#424242</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="other-note-one">The value of <code>$horizontal-rule-border-style</code> will only be applied if <code>$horizontal-rule-fancy-style</code> is set to <code class="fore-secondary">false</code>.</li>
|
|
<li id="other-note-two">The value of <code>$horizontal-rule-fancy-gradient</code> will only be applied if <code>$horizontal-rule-fancy-style</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="other-note-three">The value of <code>$code-font-family</code> will only be applied if <code>$use-default-code-fonts</code> is set to <code class="fore-secondary">false</code>.</li>
|
|
<li id="other-note-four">The value of <code>$pre-element-sidebar-style</code> will only be applied if <code>$add-pre-element-sidebar</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="other-note-five">The values of all the variables that refer to <code><samp></code> elements will only be applied if <code>$style-samp-element</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|