scales-base-typography - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

bower.json

 {
   "name": "scales-base-typography",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "homepage": "https://github.com/ScalesCSS/base-typography",
@@ -5,0 +5,0 @@ "author": "Dave Gillhespy",

package.json

 {
   "name": "scales-base-typography",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Base typographic styles for Scales CSS",
@@ -5,0 +5,0 @@ "main": "_typography.scss",

README.md

@@ -16,3 +16,3 @@ # Base Typography for Scales
 
-Scales provides default typography for headings, text elements, lede paragraphs, and code blocks.
+Scales provides default typography for headings, text elements, lede paragraphs, and code blocks. It also has utility classes for headings and to control measure and truncation.
 
@@ -36,7 +36,27 @@ ### Lede Paragraph
 
+### Measure
+Measure is the length of a line of text. For maximum readability, this should optimally be set between 45 and 75 characters. With multiple columns of text the measure should be narrower, between 40 and 50 characters.
+
+```
+<p class="measure">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+
+<p class="measure--narrow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+```
+
+### Truncation
+This allows you to cut text off if it exceeds the width of the viewport and adds an ellipsis. This works even better when combined with [overrides-size](https://github.com/ScalesCSS/overrides-size) to control where it cuts off by applying a width to the container.
+
+```
+<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+```
+
 ## Available Classes
 
 * `.lede` or `.lead`
+* `.measure`
+* `.measure--narrow`
+* `.truncate`
 
 ### Heading Utility Classes
+
 * `.h1`
@@ -58,7 +78,12 @@ * `.h2`
 * `$base-text-color`
+* `$heading-color`
+* `$text-margins`
+* `$heading-margins`
+* `$measure`
+* `$narrow-measure`
 * `$code-block-padding`
+* `$code-block-margins`
 * `$code-block-bg-color`
 * `$code-block-text-color`
-* `$sans-serif-font-stack` - available as option for $base-font-stack and $heading-font-stack
-* `$serif-font-stack` - available as option for $base-font-stack and $heading-font-stack
+* `$pre-wordwrap` - Set to true to make text in a code block wrap to new lines when it reaches the bounds of the container.
 * `$monospaced-font-stack`
@@ -65,0 +90,0 @@ * `$base-font-stack`

No alert changes

Improved metrics

Total package byte prevSize

13719

increased by34.07%

Number of lines in readme file

113

increased by28.41%

No dependency changes