Refactor to simplify supporting new CSS props; add support for variable character width & letter-spacing

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     "prettier" // ensures .prettierrc is honored
   ],
   "env": {
-    "browser": true // lets ESLint know `window` and `document` are defined
+    "browser": true, // lets ESLint know `window` and `document` are defined
+    "node": true // allows `module` to be used for gruntfile.js
   }
 }

README.md

@@ -1,13 +1,19 @@
 # Textblock
 
-A javascript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.
+A javascript tool for adjusting font size, leading, and more to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.
 
-The script calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width:
+Based on your settings for the minimum and maximum widths of a flexible container, the script interpolates settings at the container's current width for:
 
-- minimum/maximum font size
-- minimum/maximum line height
-- minimum/maximum container width
-- minimum/maximum grades (variable fonts only)
+- **font-size**
+- **line-height**
+- **letter-spacing**
+
+For [variable fonts][vf], the script can also adjust:
+
+- **font-weight** (to simulate grades — micro-variations in weight to set smaller sizes slightly bolder — for variable fonts with a `weight` variation axis)
+- **font-stretch** (for variable fonts with a `width` variation axis)
+
+[vf]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
 
 ## To initialize, add the element to be resized (required)
 
@@ -19,22 +25,25 @@ Textblock([{
 
 ## Parameters
 
-- **`target`** (required  ): The element that should be resized `".your‑class"`, `"#some-id p"`
-- **`minWidth`**: default `320`
-- **`maxWidth`**: default `960`
+- **`target`** (required): The element that should be resized `".your‑class"`, `"#some-id p"`
+- **`container`**: The container width to measure. Defaults to `"parent"` and can alternately be set to `"self"`.
+- **`minWidth`**: The container's minimum width in `px`. Defaults to `320`.
+- **`maxWidth`**: The container's maximum width in `px`. Defaults to `960`.
 - **`minWidthFontSize`**: default `1.0`
 - **`maxWidthFontSize`**: default `1.8`
+- **`fontSizeUnits`**: default `em`
+- **`minWidthFontStretch`**: e.g. `80` (percentage values only)
+- **`maxWidthFontStretch`**: e.g. `100` (percentage values only)
+- **`minWidthFontWeight`**: e.g. `450`
+- **`maxWidthFontWeight`**: e.g. `400`
+- **`minWidthLetterSpacing`**: e.g. `.125`
+- **`maxWidthLetterSpacing`**: e.g. `.25`
+- **`letterSpacingUnits`**: default `em`
 - **`minWidthLineHeight`**: default `1.33` (unitless values only)
 - **`maxWidthLineHeight`**: default `1.25` (unitless values only)
-- **`minWidthVariableGrade`**: A variable font weight for the small size, for example `450`
-- **`maxWidthVariableGrade`**: A variable font weight for the large size, i.e. `400`
-- **`container`**: The container width to measure. Defaults to `"parent"` and can alternately be set to `"self"`.
-- **`units`**: default `em`
 
 For a better sense of context, set your root em to `10px` with `html { font-size: 62.5%; }`. This makes your em units base 10 so `2.4em` = `24px`. But any number will do because once you start adjusting the min/max numbers, the experience is more visual than calculated. And if you prefer a more scientific approach, Textblock gives you the control you need for setting systems like modular scales.
 
-If you’re using variable fonts, the `minWidthVariableGrade` / `maxWidthVariableGrade` parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).
-
 ## Example Including Extra Parameters
 
 ```
@@ -46,8 +55,8 @@ Textblock([{
  maxWidthFontSize: 2.6,
  minWidthLineHeight: 1.33,
  maxWidthLineHeight: 1.25,
- minWidthVariableGrade: 366,
- maxWidthVariableGrade: 300,
+ minWidthFontWeight: 366,
+ maxWidthFontWeight: 300,
  container: "self",
  units: "rem"
 }]);
@@ -66,8 +75,8 @@ Textblock([
   target: ".another-class",
   minWidthFontSize: 2.4,
   maxWidthFontSize: 3.6,
-  minWidthVariableGrade: 450,
-  maxWidthVariableGrade: 400,
+  minWidthFontWeight: 450,
+  maxWidthFontWeight: 400,
   container: "self"
  }
 ]);

gruntfile.js

@@ -1,25 +1,32 @@
 module.exports = function(grunt) {
-
   // Project configuration.
   grunt.initConfig({
-
     pkg: grunt.file.readJSON('package.json'),
 
     uglify: {
       options: {
-        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+        banner: '/*! <%= pkg.name %> <%= pkg.version %> */'
       },
       textblock: {
+        options: {
+          mangle: {
+            properties: {
+              // compress object properties...
+              reserved: ['Textblock', 'units'] // ...but not these ones...
+            }
+          },
+          reserveDOMProperties: true // ...or any used by the browser
+        },
         files: {
           'textblock.min.js': ['src/textblock.js']
         }
       }
     },
 
-    watch:{
+    watch: {
       scripts: {
-        files:['src/demo.html', 'src/demo.css', 'src/textblock.js'],
-        tasks:['uglify:textblock'],
+        files: ['src/textblock.js'],
+        tasks: ['uglify:textblock']
       }
     }
   });
@@ -31,5 +38,4 @@ module.exports = function(grunt) {
   // Defaults
   // grunt.registerTask('default', ['postcss:dist','uncss:dist']);
   grunt.registerTask('default', ['uglify:textblock']);
-
 };