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

Disabled fluid typography

Browse source 
Fluid typography is now disabled by default, as it needs more work and parts of it are not entirely to my liking. The feature is still available for those who want it.
This commit is contained in:
Angelos Chalaris 2017-05-11 22:13:27 +03:00
parent f9e94474ee
commit 0c9eef3309
10 changed files with 13 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
dist/mini-dark.css vendored
View file

@ -9,20 +9,7 @@
Browsers resets and base typography.
*/
html {
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;
}
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,20 +9,7 @@
Browsers resets and base typography.
*/
html {
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;
}
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, scaling down to <code>14px</code> on smaller screens.</li>
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
</ul>
</div>

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 between <code>14px</code> and <code>16px</code> for the root element</li>
<li>The <code>font-size</code> for the root element is <code>16px</code></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>

1
docs/v2/DEVLOG.md
View file

@ -1141,3 +1141,4 @@
- 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.
- Fixed the `header` element bug that didn't allow them to work well with the `.row` class for responsive layouts. They should now display as expected.
- Disabled fluid typography by default, it needs more testing and the `14px` font in smaller screens doesn't sit well with me. The feature is still there for those who want it.

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

@ -16,11 +16,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: 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.
$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

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

@ -16,11 +16,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: 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.
$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

8
src/mini/_core.scss
View file

@ -3,11 +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.
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 1600px !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.
$fluid-type-large-type: 18px !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`).