diff --git a/README.md b/README.md index e115529..be9f6a9 100644 --- a/README.md +++ b/README.md @@ -108,8 +108,32 @@ $('body').flowtype({ }); ``` +## FlowType 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: + +```scss +$minimum: 500; +$maximum: 1200; +$minFont: 12; +$maxFont: 40; +$fontRatio: 30; +``` + +Then, simply `@include` the mixin into your project: + +```scss +body { + @include flowtype($minimum, $maximum, $minFont, $maxFont, $fontRatio); +} +``` + +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). -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. diff --git a/flowtype.scss b/flowtype.scss new file mode 100644 index 0000000..01616cb --- /dev/null +++ b/flowtype.scss @@ -0,0 +1,50 @@ +/* +* FlowType Sass Mixin 1.1 +*/ + +// Establish default settings/variables +// ==================================== +$minimum: 500; +$maximum: 1200; +$minFont: 12; +$maxFont: 40; +$fontRatio: 30; + +// Mixin start +// =========== +@mixin flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio) { + $fontSize: $maxFont; + $tempFontSize: $fontSize; + +// Output media query for minimum size +// =================================== + @media screen and (max-width: #{$minimum}px) { + font-size: #{$minFont}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; + } + +// Output media queries +// ==================== + @if $tempFontSize != $fontSize { + @media screen and (min-width: #{$i}px) { + font-size: #{$fontSize}px; + } + } + + $tempFontSize: $fontSize; + } +}