From 24b064f2731fc966ec34657696eca56bf7e43a90 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Wed, 16 Oct 2013 18:46:41 -0500 Subject: [PATCH 01/10] Added FlowType Sass mixin New FlowType Sass mixin. Brief usage documentation added to README --- README.md | 25 +++++++++++++++++++++ flowtype.scss | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 flowtype.scss diff --git a/README.md b/README.md index 3cc61d6..8bc3fbd 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,31 @@ $('body').flowtype({ }); ``` +## FlowType Sass Mixin ## + +FlowType is also available as a Sass Mixin. + +To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file: + +```sass +$maximum: 1000; +$minimum: 1; +$maxFont: 36; +$minFont: 12; +$fontRatio: 35; +$lineRatio: 1.45; +``` + +Then, simply `@include` the mixin into your project: + +```sass +.your-selector { + @include flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio); +} +``` + +The mixin will apply all necessary media queries to enable the FlowType functionality. + ## Brought to you by... ## This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus). diff --git a/flowtype.scss b/flowtype.scss new file mode 100644 index 0000000..d50d613 --- /dev/null +++ b/flowtype.scss @@ -0,0 +1,61 @@ +/* +* FlowType Sass Mixin 1.0 +*/ + +// Establish default settings/variables +// ==================================== +$maximum: 1000; +$minimum: 1; +$maxFont: 36; +$minFont: 12; +$fontRatio: 35; +$lineRatio: 1.45; + +// Mixin start +// =========== +@mixin flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio) { + $fontSize: $maxFont; + $lineHeight: $lineRatio; + + $tempFontSize: $fontSize; + $tempLineHeight: $lineHeight; + +// Output media query for minimum size +// =================================== + @media screen and (max-width: #{$minimum}px) { + $lineHeight: floor($minFont * $lineRatio); + + font-size: #{$minFont}px; + line-height: #{$lineHeight}px; + } + +// Do the magic math +// ================= + @for $i from $minimum through $maximum { + $fontBase: floor($i / $fontRatio); + + @if $fontBase > $maxFont { + $fontSize: $maxFont; + } + @else if $fontBase < $minFont { + $fontSize: $minFont; + } + @else { + $fontSize: $fontBase; + } + + $lineHeight: floor($fontSize * $lineRatio); + +// Output media queries +// ==================== + @if $tempLineHeight != $lineHeight or $tempFontSize != $fontSize { + @media screen and (min-width: #{$i}px) { + font-size: #{$fontSize}px; + line-height: #{$lineHeight}px; + } + } + + $tempLineHeight: $lineHeight; + $tempFontSize: $fontSize; + } +} \ No newline at end of file From 88bcfe03ecafb6c16bd1810249db4dcd6d594f79 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Tue, 29 Oct 2013 16:12:08 -0500 Subject: [PATCH 02/10] rearranged variables for readablitity --- flowtype.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/flowtype.scss b/flowtype.scss index d50d613..c5f6378 100644 --- a/flowtype.scss +++ b/flowtype.scss @@ -4,12 +4,12 @@ // Establish default settings/variables // ==================================== -$maximum: 1000; -$minimum: 1; -$maxFont: 36; -$minFont: 12; $fontRatio: 35; $lineRatio: 1.45; +$maxFont: 36; +$minFont: 12; +$maximum: 1000; +$minimum: 1; // Mixin start // =========== @@ -58,4 +58,4 @@ $lineRatio: 1.45; $tempLineHeight: $lineHeight; $tempFontSize: $fontSize; } -} \ No newline at end of file +} From 4a257393f9152ab506a6527990d857189c759b62 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Tue, 29 Oct 2013 16:12:56 -0500 Subject: [PATCH 03/10] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8bc3fbd..0344460 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ FlowType is also available as a Sass Mixin. To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file: -```sass +```scss $maximum: 1000; $minimum: 1; $maxFont: 36; @@ -123,7 +123,7 @@ $lineRatio: 1.45; Then, simply `@include` the mixin into your project: -```sass +```scss .your-selector { @include flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio); } @@ -135,4 +135,4 @@ The mixin will apply all necessary media queries to enable the FlowType function This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus). -FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission. \ No newline at end of file +FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission. From f39f1ca30915768f052003386f82ea2057021efb Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Tue, 29 Oct 2013 16:13:44 -0500 Subject: [PATCH 04/10] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0344460..ba7aca8 100644 --- a/README.md +++ b/README.md @@ -113,18 +113,18 @@ FlowType is also available as a Sass Mixin. To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file: ```scss -$maximum: 1000; -$minimum: 1; -$maxFont: 36; -$minFont: 12; $fontRatio: 35; $lineRatio: 1.45; +$maxFont: 36; +$minFont: 12; +$maximum: 1000; +$minimum: 1; ``` Then, simply `@include` the mixin into your project: ```scss -.your-selector { +body { @include flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio); } ``` From aa2b8189e5b3923d0d7bf0b8d3a6015b2c087ab5 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Tue, 29 Oct 2013 16:15:12 -0500 Subject: [PATCH 05/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ba7aca8..b7e5c6d 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ Then, simply `@include` the mixin into your project: ```scss body { - @include flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio); + @include flowtype($fontRatio, $lineRatio, $maxFont, $minFont, $maximum, $minimum); } ``` From 13546ea1bdc02b37a513fe050c51cfef67e804ae Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Tue, 29 Oct 2013 16:26:57 -0500 Subject: [PATCH 06/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b7e5c6d..f2c15d2 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,7 @@ $('body').flowtype({ ## FlowType Sass Mixin ## -FlowType is also available as a Sass Mixin. +FlowType is also available as a Sass Mixin. The mixin provides the FlowType functionality using only CSS. To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file: From 1164af9eeb514cad0c7e28174a40c874ad6d905d Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Thu, 27 Mar 2014 12:48:43 -0500 Subject: [PATCH 07/10] v1.1 Update Removed support for line-height and updated documentation --- flowtype.scss | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/flowtype.scss b/flowtype.scss index c5f6378..a473c46 100644 --- a/flowtype.scss +++ b/flowtype.scss @@ -1,32 +1,25 @@ /* -* FlowType Sass Mixin 1.0 +* FlowType Sass Mixin 1.1 */ // Establish default settings/variables // ==================================== -$fontRatio: 35; -$lineRatio: 1.45; -$maxFont: 36; -$minFont: 12; $maximum: 1000; $minimum: 1; +$maxFont: 36; +$minFont: 12; +$fontRatio: 35; // Mixin start // =========== -@mixin flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio, $lineRatio) { +@mixin flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio) { $fontSize: $maxFont; - $lineHeight: $lineRatio; - $tempFontSize: $fontSize; - $tempLineHeight: $lineHeight; // Output media query for minimum size // =================================== @media screen and (max-width: #{$minimum}px) { - $lineHeight: floor($minFont * $lineRatio); - - font-size: #{$minFont}px; - line-height: #{$lineHeight}px; + font-size: #{$minFont}px; } // Do the magic math @@ -44,18 +37,14 @@ $minimum: 1; $fontSize: $fontBase; } - $lineHeight: floor($fontSize * $lineRatio); - // Output media queries // ==================== - @if $tempLineHeight != $lineHeight or $tempFontSize != $fontSize { + @if $tempFontSize != $fontSize { @media screen and (min-width: #{$i}px) { - font-size: #{$fontSize}px; - line-height: #{$lineHeight}px; + font-size: #{$fontSize}px; } } - - $tempLineHeight: $lineHeight; + $tempFontSize: $fontSize; } } From 8a6ac28f194fb395f6e6025ed84517e8c9498a22 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Thu, 27 Mar 2014 13:10:00 -0500 Subject: [PATCH 08/10] Updated docs for v1.1 of Sass mixin --- README.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d0d24b7..8461dde 100644 --- a/README.md +++ b/README.md @@ -115,19 +115,18 @@ FlowType is also available as a Sass Mixin. The mixin provides the FlowType func To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file: ```scss -$fontRatio: 35; -$lineRatio: 1.45; -$maxFont: 36; +$minimum: 500; +$maximum: 1200; $minFont: 12; -$maximum: 1000; -$minimum: 1; +$maxFont: 40; +$fontRatio: 30; ``` Then, simply `@include` the mixin into your project: ```scss body { - @include flowtype($fontRatio, $lineRatio, $maxFont, $minFont, $maximum, $minimum); + @include flowtype($fontRatio, $maxFont, $minFont, $maximum, $minimum); } ``` From 9fcea9f6f6852c3f25420b694f7c98a2abf50532 Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Thu, 27 Mar 2014 13:10:49 -0500 Subject: [PATCH 09/10] v1.1 Update (2) changed default settings --- flowtype.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/flowtype.scss b/flowtype.scss index a473c46..01616cb 100644 --- a/flowtype.scss +++ b/flowtype.scss @@ -4,11 +4,11 @@ // Establish default settings/variables // ==================================== -$maximum: 1000; -$minimum: 1; -$maxFont: 36; +$minimum: 500; +$maximum: 1200; $minFont: 12; -$fontRatio: 35; +$maxFont: 40; +$fontRatio: 30; // Mixin start // =========== From 2c7b1c3a46070a2fb7e38f8dab323471841163ba Mon Sep 17 00:00:00 2001 From: Brian Phillips Date: Thu, 27 Mar 2014 13:12:41 -0500 Subject: [PATCH 10/10] Updated docs for v1.1 of Sass mixin Minor doc fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8461dde..be9f6a9 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ Then, simply `@include` the mixin into your project: ```scss body { - @include flowtype($fontRatio, $maxFont, $minFont, $maximum, $minimum); + @include flowtype($minimum, $maximum, $minFont, $maxFont, $fontRatio); } ```