mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-21 21:15:13 +02:00
Implemented fluid typography
Flavors updated as needed, documentation for fluid typography added in the core module.
This commit is contained in:
Angelos Chalaris
@@ -102,7 +102,7 @@
|
||||
<ul>
|
||||
<li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
|
||||
<li>We set the colors to <code>background: #f8f8f8;</code> and <code>color: #212121;</code>.</li>
|
||||
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
|
||||
<li>We use a <code>font-size</code> of <code>16px</code> for the root element, scaling down to <code>14px</code> on smaller screens.</li>
|
||||
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -130,6 +130,26 @@
|
||||
<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>
|
||||
@@ -172,15 +192,15 @@
|
||||
</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-two">2</a></sup></td><td data-label="Sample value">true</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-two">2</a></sup></td><td data-label="Sample value">75%</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-two">2</a></sup></td><td data-label="Sample value">-4px</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>
|
||||
@@ -220,11 +240,11 @@
|
||||
</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-three">3</a></sup></td><td data-label="Sample value">#0288d1</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-three">3</a></sup></td><td data-label="Sample value">true</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>
|
||||
@@ -241,8 +261,9 @@
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<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>$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-three">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>
|
||||
<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>
|
||||
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -89,7 +89,7 @@
|
||||
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
|
||||
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
|
||||
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
|
||||
<li>The <code>font-size</code> is <code>16px</code> for the root element</li>
|
||||
<li>The <code>font-size</code> is between <code>14px</code> and <code>16px</code> for the root element</li>
|
||||
<li>The <code>line-height</code> is <code>1.5</code></li>
|
||||
<li>All HTML headings are pre-styled</li>
|
||||
<li>Styling provided for <code><small></code> elements inside headings</li>
|
||||
|
||||
@@ -1137,3 +1137,6 @@
|
||||
- `mini-nord` still uses `.alert`s instead of `.toast`s, maintainer should address after update, otherwise I will in the next patch or so.
|
||||
- `mini-sucroa` does not support it (or `.alert` for that matter), might be addressed with author later down the line, for now it's ok to not have either.
|
||||
- Changed order of `input_control` and `navigation` for all flavors and documentation pages.
|
||||
- Thoroughly tested fluid typography and updated the `core` module with the required variables and flags. This added a little bit of extra size to the framework, but it seems worthwhile as it scales a bit better on smaller screens, so that there is slightly more real estate for content.
|
||||
- Updated all flavors for fluid typography (basically only `default` and `dark` actually use it for now).
|
||||
- Updated `core` module documentation and customization documentation to explain fluid typography.
|
||||
|
||||
Reference in New Issue
Block a user