Browse Source

Disabled fluid typography

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.
Angelos Chalaris 8 years ago
parent
commit
0c9eef3309

+ 1 - 14
dist/mini-dark.css

@@ -9,20 +9,7 @@
 	Browsers resets and base typography.
 	Browsers resets and base typography.
 */
 */
 html {
 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, * {
 html, * {

File diff suppressed because it is too large
+ 0 - 0
dist/mini-dark.min.css


+ 1 - 14
dist/mini-default.css

@@ -9,20 +9,7 @@
 	Browsers resets and base typography.
 	Browsers resets and base typography.
 */
 */
 html {
 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, * {
 html, * {

File diff suppressed because it is too large
+ 0 - 0
dist/mini-default.min.css


+ 1 - 1
docs/core.html

@@ -102,7 +102,7 @@
 		                <ul>
 		                <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 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 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>
 		                  <li>We set <code>line-height</code> to <code>1.5</code>.</li>
 		                </ul>
 		                </ul>
 		              </div>
 		              </div>

+ 1 - 1
docs/quick_reference.html

@@ -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>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>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 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>The <code>line-height</code> is <code>1.5</code></li>
                   <li>All HTML headings are pre-styled</li>
                   <li>All HTML headings are pre-styled</li>
                   <li>Styling provided for <code>&lt;small&gt;</code> elements inside headings</li>
                   <li>Styling provided for <code>&lt;small&gt;</code> elements inside headings</li>

+ 1 - 0
docs/v2/DEVLOG.md

@@ -1141,3 +1141,4 @@
 - Updated all flavors for fluid typography (basically only `default` and `dark` actually use it for now).
 - 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.
 - 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.
 - 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.

+ 1 - 5
src/flavors/mini-dark.scss

@@ -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-root-font-size:		16px;											// Root font sizing for all elements [1]
 $base-font-size:				1rem;											// Default font sizing for all elements [2]
 $base-font-size:				1rem;											// Default font sizing for all elements [2]
 $base-line-height:			1.5;											// Default line height for all elements.
 $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
 $body-margin:						0;												// Margin for the body
 $apply-defaults-to-all:	true;											// Should default values be applied to all elements? (`true` or `false`) [3]
 $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
 $h1-font-size:					2rem;											// Font size of h1

+ 1 - 5
src/flavors/mini-default.scss

@@ -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-root-font-size:		16px;											// Root font sizing for all elements [1]
 $base-font-size:				1rem;											// Default font sizing for all elements [2]
 $base-font-size:				1rem;											// Default font sizing for all elements [2]
 $base-line-height:			1.5;											// Default line height for all elements.
 $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
 $body-margin:						0;												// Margin for the body
 $apply-defaults-to-all:	true;											// Should default values be applied to all elements? (`true` or `false`) [3]
 $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
 $h1-font-size:					2rem;											// Font size of h1

+ 4 - 4
src/mini/_core.scss

@@ -3,11 +3,11 @@
 */
 */
 $apply-defaults-to-all: 			true !default;				// Should default values be applied to all elements? (`true`/`false`).
 $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!
 $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-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.
 $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`).
 $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`).
 $horizontal-rule-fancy-style: false !default;				// Should a fancy styling be applied for the <hr> element (`true`/`false`).

Some files were not shown because too many files changed in this diff