From 052c41fa88c596615f63f776ba972f62d8364b17 Mon Sep 17 00:00:00 2001 From: Cleecanth Date: Tue, 7 Jan 2014 14:25:30 -0600 Subject: [PATCH 1/4] Added Modular Scale Option Using the principles from Tim Brown's "More Meaningful Typography", users can now set automatic heading sizes. - Added exponent function to remove compass dependency. - Added Modular Scale function. - Added loop for automatic heading creation. --- .gitignore | 2 ++ typecsset.scss | 69 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2ec13d9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +style/typecsset.css diff --git a/typecsset.scss b/typecsset.scss index be9e9dc..91c8e34 100644 --- a/typecsset.scss +++ b/typecsset.scss @@ -34,6 +34,18 @@ $typecsset-h6-size: 18px !default; // Would you like indented (rather than spaced) paragraph delimiting? $typecsset-indented-paragraphs: false !default; +// Would you like to automatically scale your Heading sizes? +// (This can provide a more elegant typographic rhythm) +$typecsset-auto-scale: false !default; + +// Set the ratio by which your type should grow. +// Accepts two numbers, representing a ratio, typically associated with +// music intervals. +// Common intervals: Perfect fourth (4,3)[default], Perfect Fifth (3,2), +// Perfect Octave (2,1), Major Third (5,4), Major Sixth (5,3). +// The Golden Ratio is (1.618,1). +$typecsset-ratio: 4,3 !default; + // Would you like to show a baseline grid? This is handy during development. $typecsset-show-baseline: false !default; @@ -41,8 +53,8 @@ $typecsset-show-baseline: false !default; // library depends. $typecsset-magic-number: $typecsset-base-line-height; $typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-font-size; - - +$typecsset-modular-scale: nth($typecsset-ratio, 1)/nth($typecsset-ratio, 2); +$typecsset-headings: 6,5,4,3,2,1; @@ -86,9 +98,29 @@ $typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-fo @return $number / ($number * 0 + 1); } +// Exponent function used for modular scaling of type (removes Compass dependancy) +@function exponent($base, $exponent){ + $value: $base; + @if $exponent > 1{ + @for $i from 2 through $exponent{ + $value: $value * $base; + } + } + @if $exponent < 1{ + @for $i from 0 through -$exponent{ + $value: $value / $base; + } + } + @return ($value); +} +// Modular scale function to scale type up or down. Can be used externally +// by using modular-scale([scale number]);. +$stripped-base-font-size: typecsset-strip-units($typecsset-base-font-size); - +@function modular-scale($i){ + @return exponent($typecsset-modular-scale, $i)*($stripped-base-font-size)*1px; +} /*------------------------------------*\ #SHARED @@ -109,9 +141,6 @@ $typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-fo } - - - /*------------------------------------*\ #BASE \*------------------------------------*/ @@ -129,6 +158,8 @@ $typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-fo */ } + + html { font-size: $typecsset-base-font-size / 16px + em; /* [1] */ line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */ @@ -154,6 +185,30 @@ body { /*------------------------------------*\ #HEADINGS \*------------------------------------*/ +/** + * 1. If you've chosen to automatically scale your type, we set that up here. + * 2. Using heading numbers[6-1], we create a loop. + * 3. Use the current scale number to exponentially scale up our base-font-size. + * 4. Invert the current value of the loop($i) for an more traditionally ordered + * output (h1,h2,h3,h4,h5,h6). + * 5. Use our new modular values for input into typecsset mixins to generate our + * desired, modularly-scaled css. + */ + +@if $typecsset-auto-scale == true { /* [1] */ + @each $i in $typecsset-headings{ /* [2] */ + $font-size: modular-scale($i); /* [3] */ + $current-heading: nth($typecsset-headings,$i); /* [4] */ + h#{$current-heading} { + @extend %typecsset-vertical-rhythm; + @include typecsset-font-size($font-size); /* [5] */ + }; + $i: $i + 1; + }; + +} +@else{ + h1 { @extend %typecsset-vertical-rhythm; @include typecsset-font-size($typecsset-h1-size); @@ -183,7 +238,7 @@ h6 { @extend %typecsset-vertical-rhythm; @include typecsset-font-size($typecsset-h6-size); } - +} From a925e37695d08593c7bf4fc09015e265b223f322 Mon Sep 17 00:00:00 2001 From: Cleecanth Date: Tue, 7 Jan 2014 14:40:55 -0600 Subject: [PATCH 2/4] Added description for automatic scaling --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 62baaed..386ecc8 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,15 @@ order to maintain a consistent and harmonious vertical rhythm. These settings, predictably, contain the desired font sizes for your headings one-through-six. Again, they are set in pixels because the library will pick -them up and convert them into rems later on. +them up and convert them into rems later on. For automatic settings, see below. + +### `$typecsset-auto-scale` + +This is a boolean toggle to allow your headings to be automatically scaled based on a modular scale. This is based on the principles outlined by [Tim Brown's aricle, "More Meaningful Typography"](http://alistapart.com/article/more-meaningful-typography). + +### `$typecsset-ratio` + +If you set '$typecsset-auto-scale' to 'true', you can also set the ratio at which your headings scale. The value of this must be a list of two numbers (typically based on [musical intervals](http://en.wikipedia.org/wiki/Interval_(music))). The default is 4,3 (a perfect fourth). See [Tim's aricle](http://alistapart.com/article/more-meaningful-typography) for some more useful intervals. ### `$typecsset-indented-paragraphs` From f9cb6895305afb1baa2583f0156bdd81b7279d34 Mon Sep 17 00:00:00 2001 From: Cleecanth Date: Thu, 9 Jan 2014 12:54:59 -0600 Subject: [PATCH 3/4] Added modular scale mixin Exposed the modular scale to users via a mixin, using the syntax: typecsset(x, property), and made typecsset-ratio more versatile. - Added function to allow floats in typecsset-ratio . -Added function to ensure typecsset-ratio is >= 1. -Added documentation for new mixin and additional typecsset-ratio functionality to README. --- README.md | 42 ++++++++++++++++++++++++++++++++++++++---- typecsset.scss | 44 +++++++++++++++++++++++++++++++++++--------- 2 files changed, 73 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 386ecc8..389cbab 100644 --- a/README.md +++ b/README.md @@ -63,15 +63,15 @@ This is the base line height you would like your project to take. Again, define this in pixels: Typecsset will convert it into a unitless value for you. This `$typecsset-base-line-height` value is the most important one in the whole -library—it defines and underpins your whole vertical rhythm. Everything +library - it defines and underpins your whole vertical rhythm. Everything (`margins`, `line-height`s, etc.) will be based upon units of this number in order to maintain a consistent and harmonious vertical rhythm. -### `$typecsset-h[1–6]-size` +### `$typecsset-h[1-6]-size` These settings, predictably, contain the desired font sizes for your headings one-through-six. Again, they are set in pixels because the library will pick -them up and convert them into rems later on. For automatic settings, see below. +them up and convert them into rems later on. *For automatic settings, see below.* ### `$typecsset-auto-scale` @@ -79,7 +79,9 @@ This is a boolean toggle to allow your headings to be automatically scaled based ### `$typecsset-ratio` -If you set '$typecsset-auto-scale' to 'true', you can also set the ratio at which your headings scale. The value of this must be a list of two numbers (typically based on [musical intervals](http://en.wikipedia.org/wiki/Interval_(music))). The default is 4,3 (a perfect fourth). See [Tim's aricle](http://alistapart.com/article/more-meaningful-typography) for some more useful intervals. +If you set `$typecsset-auto-scale = true`, you can also set the ratio at which your headings scale. The value of this can either be a list of two numbers (typically based on [musical intervals](http://en.wikipedia.org/wiki/Interval_(music\)) ) or a float(1.33). The default is 4,3 (a perfect fourth). See [Tim's aricle](http://alistapart.com/article/more-meaningful-typography) for some more useful intervals. + +*Note: 3,4 and 4,3 would result in the same scale. This is because Musical intervals are sometimes written in either order and a sub 1 scale would be fairly useless.* ### `$typecsset-indented-paragraphs` @@ -206,3 +208,35 @@ background-image: url(http://basehold.it/i/#{$typecsset-baseline-size}); /* [3] [...] ``` + +### `typecsset-scale()` + +This mixin takes a value and a property as in input and gives you a pixel and rem value based on your modular scale. The first value represents from where on your scale you want to pull. + +**Input:** + +```scss +$typecsset-base-font-size: 16px; +$typecsset-base-line-height: 24px; +$typecsset-auto-scale: true; +$typecsset-ratio: 4,3; + +[...] + +.foo { + @include typecsset-scale(1, margin-left); +} +``` + +**Output:** + +```css +.foo { + margin-left: 21.3333px; + margin-left: 1.3333rem; +} +``` + +As an added bonus, you can go down your scale as well by using negative numbers. + +*Note: If font-size is used, line-height will also be included* \ No newline at end of file diff --git a/typecsset.scss b/typecsset.scss index 91c8e34..5edd7a6 100644 --- a/typecsset.scss +++ b/typecsset.scss @@ -40,7 +40,7 @@ $typecsset-auto-scale: false !default; // Set the ratio by which your type should grow. // Accepts two numbers, representing a ratio, typically associated with -// music intervals. +// music intervals. You may also use floats (1.33). // Common intervals: Perfect fourth (4,3)[default], Perfect Fifth (3,2), // Perfect Octave (2,1), Major Third (5,4), Major Sixth (5,3). // The Golden Ratio is (1.618,1). @@ -53,9 +53,19 @@ $typecsset-show-baseline: false !default; // library depends. $typecsset-magic-number: $typecsset-base-line-height; $typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-font-size; -$typecsset-modular-scale: nth($typecsset-ratio, 1)/nth($typecsset-ratio, 2); $typecsset-headings: 6,5,4,3,2,1; - +$typecsset-modular-scale: 0; + +//Checking for floats in $typecsset-ratio +@if length($typecsset-ratio) == 2{ + @if nth($typecsset-ratio,1) < nth($typecsset-ratio,2){ + $typecsset-modular-scale: nth($typecsset-ratio, 2)/nth($typecsset-ratio, 1); + }@else{ + $typecsset-modular-scale: nth($typecsset-ratio, 1)/nth($typecsset-ratio, 2); + } +} @else { + $typecsset-modular-scale: $typecsset-ratio; +} //------------------------------------\\ @@ -114,14 +124,29 @@ $typecsset-headings: 6,5,4,3,2,1; @return ($value); } -// Modular scale function to scale type up or down. Can be used externally -// by using modular-scale([scale number]);. +// Modular scale function to scale type up or down. +// But first, we need strip base-type-size of its units. $stripped-base-font-size: typecsset-strip-units($typecsset-base-font-size); - @function modular-scale($i){ @return exponent($typecsset-modular-scale, $i)*($stripped-base-font-size)*1px; } +// This mixin can be used externally +// by using @include modular-scale([scale number, property]);. +@mixin typecsset-scale($i, $property){ + @if $typecsset-auto-scale == false{ + @warn "Please set $typecsset-auto-scale to true or else typecsset-scale is fairly meaningless."; + } + @if $property == "font-size"{ + $font-size: modular-scale($i); + @include typecsset-font-size($font-size); + } + @else{ + $m-scale: modular-scale($i); + #{$property}: $m-scale; + #{$property}: ($m-scale / $typecsset-base-font-size) * 1rem; + } +} /*------------------------------------*\ #SHARED \*------------------------------------*/ @@ -185,6 +210,8 @@ body { /*------------------------------------*\ #HEADINGS \*------------------------------------*/ + +@if $typecsset-auto-scale == true { /* [1] */ /** * 1. If you've chosen to automatically scale your type, we set that up here. * 2. Using heading numbers[6-1], we create a loop. @@ -194,14 +221,13 @@ body { * 5. Use our new modular values for input into typecsset mixins to generate our * desired, modularly-scaled css. */ - -@if $typecsset-auto-scale == true { /* [1] */ @each $i in $typecsset-headings{ /* [2] */ $font-size: modular-scale($i); /* [3] */ $current-heading: nth($typecsset-headings,$i); /* [4] */ + /* [5] */ h#{$current-heading} { @extend %typecsset-vertical-rhythm; - @include typecsset-font-size($font-size); /* [5] */ + @include typecsset-font-size($font-size); }; $i: $i + 1; }; From 6ee8b3f24cfb8a5afbbba7fc9e7bca3dd1f56f46 Mon Sep 17 00:00:00 2001 From: Cleecanth Date: Mon, 3 Feb 2014 17:05:34 -0600 Subject: [PATCH 4/4] Added extra comment for modular scale --- typecsset.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/typecsset.scss b/typecsset.scss index 5edd7a6..085cd3b 100644 --- a/typecsset.scss +++ b/typecsset.scss @@ -58,6 +58,7 @@ $typecsset-modular-scale: 0; //Checking for floats in $typecsset-ratio @if length($typecsset-ratio) == 2{ +// Making sure we don't have a ratio below 1. @if nth($typecsset-ratio,1) < nth($typecsset-ratio,2){ $typecsset-modular-scale: nth($typecsset-ratio, 2)/nth($typecsset-ratio, 1); }@else{