0ct0pu5/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implemented fluid typography

Browse source 
Flavors updated as needed, documentation for fluid typography added in the core module.
This commit is contained in:
Angelos Chalaris 2017-05-11 14:52:31 +03:00
parent 8b007dd20e
commit d8e6925f77
15 changed files with 107 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
dist/mini-dark.css vendored
View file

@ -9,7 +9,20 @@
Browsers resets and base typography.
*/
html {
font-size: 16px;
font-size: 14px;
}
@media screen and (min-width: 256px) {
html {
font-size: 16px;
font-size: calc(14px + 2 * ((100vw - 256px) / 512));
}
}
@media screen and (min-width: 768px) {
html {
font-size: 16px;
}
}
html, * {

2
dist/mini-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

15
dist/mini-default.css vendored
View file

@ -9,7 +9,20 @@
Browsers resets and base typography.
*/
html {
font-size: 16px;
font-size: 14px;
}
@media screen and (min-width: 256px) {
html {
font-size: 16px;
font-size: calc(14px + 2 * ((100vw - 256px) / 512));
}
}
@media screen and (min-width: 768px) {
html {
font-size: 16px;
}
}
html, * {

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

File diff suppressed because one or more lines are too long

2
docs/core.html
View file

@ -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>

35
docs/customization/core.html
View file

@ -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>&lt;small&gt;</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>&lt;small&gt;</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>&lt;small&gt;</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>&lt;small&gt;</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>&lt;small&gt;</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>&lt;small&gt;</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
View file

File diff suppressed because one or more lines are too long

2
docs/quick_reference.html
View file

@ -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>&lt;small&gt;</code> elements inside headings</li>

3
docs/v2/DEVLOG.md
View file

@ -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.

5
src/flavors/mini-dark.scss
View file

@ -16,6 +16,11 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: true; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 256px; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 768px; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px; // Smallest root font size for fluid typography.
$fluid-type-large-type: 16px; // Largest root font size for fluid typography.
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1

5
src/flavors/mini-default.scss
View file

@ -16,6 +16,11 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: true; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 256px; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 768px; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px; // Smallest root font size for fluid typography.
$fluid-type-large-type: 16px; // Largest root font size for fluid typography.
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1

1
src/flavors/mini-lite.scss
View file

@ -18,6 +18,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1

1
src/flavors/mini-nord.scss
View file

@ -17,6 +17,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2em; // Font size of h1

1
src/flavors/mini-sucroa.scss
View file

@ -18,6 +18,7 @@ $base-font-family: 'Libre Baskerville', serif; // Default font stack for all e
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.7; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2.2em; // Font size of h1

33
src/mini/_core.scss
View file

@ -3,6 +3,11 @@
*/
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
$use-fluid-typography: true !default; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 256px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 768px !default; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography.
$fluid-type-large-type: 16px !default; // Largest root font size for fluid typography.
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
$make-heading-smalltext-block:false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
@ -10,10 +15,32 @@ $add-pre-element-sidebar: false !default; // Should a fancy sidebar be adde
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
html {
font-size: $base-root-font-size; // Set root's font sizing.
// Base typography rules
@if $use-fluid-typography {
// Calculation of local variables (unitless values needed for the calculation of fluid typography)
$_fluid-type-unitless-size-change: ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
$_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
html {
font-size: #{$fluid-type-small-type};
}
@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
html {
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
}
}
@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
html {
font-size: #{$fluid-type-large-type};
}
}
}
@else {
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
}
@if $apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};