README.md in sane-scale-0.5.1 vs README.md in sane-scale-0.6

- old
+ new

@@ -60,59 +60,52 @@ Similarly, you can also apply an adjustment to line-height on a font-by-font basis by specifying a `line-height-adjustment`. -### Define your constraints +### Build font scales -Provide constraints for your font scales via a SASS map in the following format: +From a few constraints, `ss-build-typography` builds a modular scale for each specified media query. ```scss -$font-scales: ( +$typography: ss-build-typography(( - // Phone sizes. - "default": ( - "base-font-size": 18px, - "base-line-height": 1.5, - "max-font-size": 28px, - "max-line-height": 1.35, - "round-under": 0px + // Define your font scales and their constraints. + "scales": ( + // Phone sizes. + "default": ( + "base-font-size": 16px, + "base-line-height": 1.5, + "max-font-size": 28px, + "max-line-height": 1.35 + ), + + // Tablet sizes and larger. + "tablet": ( + "media-query": "screen and (min-width: 768px)", + "base-font-size": 18px, + "base-line-height": 1.6, + "max-font-size": 42px, + "max-line-height": 1.25 + ) ), - // Tablet sizes and larger. - "tablet": ( - "media-query": "screen and (min-width: 600px)", - "base-font-size": 16px, - "base-line-height": 1.6, - "max-font-size": 42px, - "max-line-height": 1.25, - "round-under": 0px - ) -); + // Other than the base, how many sizes do you need? + "numb-smaller-sizes": 1, + "numb-larger-sizes": 4 +)); ``` -For each scale, you'll need to specify a font-size and line-height for both the base size and the max size. Additional font-sizes and line-heights will be interpolated from these constraints. +For each scale, you'll need to specify font-size and line-height for both a base size and a max size. Additional font-sizes and line-heights will be interpolated from these constraints. -A `media-query` property should also be set for each, exluding the default scale. Feel free to name the other scales whatever you like. +A `media-query` property should also be set for each, exluding the "default" scale. Feel free to name the other scales whatever you like. -If you need a bit of typographic guidance, [Responsive Typography: The Basics](https://ia.net/know-how/responsive-typography-the-basics "Responsive Typography: The Basics") by Information Architects is an excellent read. - - - -### Build your font scales - -All that's left to do is to define the sizes you need and build the scale itself: - -```scss -$numb-smaller-sizes: 1; -$numb-larger-sizes: 4; - -$typography: ss-build-typography($font-scales, $numb-smaller-sizes, $numb-larger-sizes); -``` That's it! Note that `$typography` is a key variable. This map will be used by the following mixins to lookup and apply sizes. +If you need a bit of typographic guidance, [Responsive Typography: The Basics](https://ia.net/know-how/responsive-typography-the-basics "Responsive Typography: The Basics") by Information Architects is an excellent read. + ### Apply responsize sizing Use `@include ss-set-responsive-font-size($font, $size)` to apply a responsive size. The sizes available to you are based on your parameters: * 0 is your base size. * 1, 2, 3... are your increasingly larger sizes. @@ -143,5 +136,27 @@ @include ss-set-font-size($font-verdana, 1, "tablet"); } ``` Here we just styled our h4 to have the size 1 for only the tablet breakpoint. With `ss-set-responsive-font-size()` the corresponding sizes for each other breakpoint would have also been applied. + + +### Working with uppercase + +If you'd like to set something in all caps and have it align to your font scales, include an `uppercase-adjustment` when defining fonts: + +```scss +$font-verdana: ( + "family": unquote("Verdana, sans-serif"), + "font-size-adjustment": 0.89, + "line-height-adjustment": 0.94, + "uppercase-adjustment": 0.85 +); +`` + +Apply the uppercase style like so: +```scss +.h4 { + @include ss-set-responsive-font-size($font-verdana, 1, $uppercase: true); +} +``` +