Added sm and xs classes

craigrileyuk · Jan 5, 2022 · 15a178b · 15a178b
1 parent 204ec3e
commit 15a178b
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Based on the fluid typography theory devised by [Mike Riethmuller](https://madeb
 
 - Set breakpoints for when your type should start and stop scaling
 - Dual scaling system gives you the ability to set your desired scale for your lower breakpoint and for your higher breakpoint
-- Provides base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl and 9xl font-sizes
+- Provides xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl and 9xl font-sizes
 
 ## Installation
 
@@ -19,16 +19,15 @@ yarn add tailwind-fluid-typography
 ```js
 // tailwind.config.js
 module.exports = {
-    theme: {
-        fluidTypography: {}
-    },
-    plugins: [
-        require('tailwind-fluid-typography')
-    ]
-}
+  theme: {
+    fluidTypography: {},
+  },
+  plugins: [require("tailwind-fluid-typography")],
+};
 ```
 
 ## Usage
+
 ```html
 <h1 class="fluid-4xl">Fluid Typography @ 4XL</h1>
 <h2 class="fluid-3xl">Fluid Typography @ 3XL</h2>
@@ -37,20 +36,22 @@ module.exports = {
 <h5 class="fluid-lg">Fluid Typography @ LG</h5>
 <h6 class="md:fluid-lg">Fluid Typography @ LG</h6>
 <p class="fluid-base">Fluid Typography</p>
+<p class="fluid-sm">Fluid Typography @ SM</p>
+<small class="fluid-xs">Fluid Typography @ XS</small>
 ```
 
 ## Customisation
 
 To customise the plugin settings, you can pass the following properties as part of a `fluidTypography` property on `theme`:
 
-| Name          | Type   | Default | Description |
-| ------------- | ------ | ------- | ----------- |
-| remSize       | Number | 16      | The px size to assume for 1rem |
+| Name          | Type   | Default | Description                                       |
+| ------------- | ------ | ------- | ------------------------------------------------- |
+| remSize       | Number | 16      | The px size to assume for 1rem                    |
 | minScreenSize | Number | 320     | The screen size (in px) at which to begin scaling |
-| maxScreenSize | Number | 1920    | The screen size (in px) at which to stop scaling |
-| minTypeScale  | Number | 1.2     | The scaling factor to use at minScreenSize |
-| maxTypeScale  | Number | 1.333   | The scaling factor to use at maxScreenSize |
-| lineHeight    | Number | 1.35    | The line-height to use for heading classes |
+| maxScreenSize | Number | 1920    | The screen size (in px) at which to stop scaling  |
+| minTypeScale  | Number | 1.2     | The scaling factor to use at minScreenSize        |
+| maxTypeScale  | Number | 1.333   | The scaling factor to use at maxScreenSize        |
+| lineHeight    | Number | 1.35    | The line-height to use for heading classes        |
 
 For example:
 

diff --git a/index.js b/index.js
@@ -2,118 +2,132 @@ const plugin = require("tailwindcss/plugin");
 
 // React Demo: https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft
 
-function generateFluidRule(power, { minTypeScale, maxTypeScale, minScreenSize, maxScreenSize, remSize }) {
-	const minFontSize = Math.pow(minTypeScale, power);
-	const maxFontSize = Math.pow(maxTypeScale, power);
-	// Transform the screen sizes from px values to expected rem values
-	const minScreenSizeRem = minScreenSize / remSize;
-	const maxScreenSizeRem = maxScreenSize / remSize;
-	// Quick function to round calculations to a locked number of decimal places
-	const r = (v) => v.toFixed(4);
+function generateFluidRule(
+  power,
+  { minTypeScale, maxTypeScale, minScreenSize, maxScreenSize, remSize }
+) {
+  const minFontSize = Math.pow(minTypeScale, power);
+  const maxFontSize = Math.pow(maxTypeScale, power);
+  // Transform the screen sizes from px values to expected rem values
+  const minScreenSizeRem = minScreenSize / remSize;
+  const maxScreenSizeRem = maxScreenSize / remSize;
+  // Quick function to round calculations to a locked number of decimal places
+  const r = (v) => v.toFixed(4);
 
-	const slope = (maxFontSize - minFontSize) / (maxScreenSizeRem - minScreenSizeRem);
-	let interpolation = minFontSize - slope * minScreenSizeRem;
-	let sign = "+";
-	if (interpolation < 0) {
-		sign = "-";
-		interpolation = Math.abs(interpolation);
-	}
+  const slope =
+    (maxFontSize - minFontSize) / (maxScreenSizeRem - minScreenSizeRem);
+  let interpolation = minFontSize - slope * minScreenSizeRem;
+  let sign = "+";
+  if (interpolation < 0) {
+    sign = "-";
+    interpolation = Math.abs(interpolation);
+  }
 
-	// Return the formatted CSS value for the font-size
-	return `clamp(${r(minFontSize)}rem, calc(${r(slope * 100)}vw ${sign} ${r(interpolation)}rem), ${r(
-		maxFontSize
-	)}rem)`;
+  // Return the formatted CSS value for the font-size
+  return `clamp(${r(minFontSize)}rem, calc(${r(slope * 100)}vw ${sign} ${r(
+    interpolation
+  )}rem), ${r(maxFontSize)}rem)`;
 }
 
 const fluidTypography = function ({ addUtilities, theme }) {
-	const fluidConfig = {};
-	/**
-	 * Suggested px value of rem. Since all browsers use 16, this is the default
-	 */
-	fluidConfig.remSize = theme("fluidTypography.remSize", 16);
-	/**
-	 * This controls the scale at which the font sizes will increase at the lowest bounds (e.g. on mobile devices)
-	 */
-	fluidConfig.minTypeScale = theme("fluidTypography.minTypeScale", 1.2);
-	/**
-	 * This controls the scale at which the font sizes will increase at the highest bounds (e.g. on desktop computers)
-	 */
-	fluidConfig.maxTypeScale = theme("fluidTypography.maxTypeScale", 1.333);
-	/**
-	 * The px size of the screen at which you want the font-size to stop decreasing
-	 */
-	fluidConfig.minScreenSize = theme("fluidTypography.minScreenSize", 320);
-	/**
-	 * The px size of the screen at which you want the font-size to stop increasing
-	 */
-	fluidConfig.maxScreenSize = theme("fluidTypography.maxScreenSize", 1920);
-	/**
-	 * The relative line-height of the headings
-	 */
-	fluidConfig.lineHeight = theme("fluidTypography.lineHeight", 1.35);
+  const fluidConfig = {};
+  /**
+   * Suggested px value of rem. Since all browsers use 16, this is the default
+   */
+  fluidConfig.remSize = theme("fluidTypography.remSize", 16);
+  /**
+   * This controls the scale at which the font sizes will increase at the lowest bounds (e.g. on mobile devices)
+   */
+  fluidConfig.minTypeScale = theme("fluidTypography.minTypeScale", 1.2);
+  /**
+   * This controls the scale at which the font sizes will increase at the highest bounds (e.g. on desktop computers)
+   */
+  fluidConfig.maxTypeScale = theme("fluidTypography.maxTypeScale", 1.333);
+  /**
+   * The px size of the screen at which you want the font-size to stop decreasing
+   */
+  fluidConfig.minScreenSize = theme("fluidTypography.minScreenSize", 320);
+  /**
+   * The px size of the screen at which you want the font-size to stop increasing
+   */
+  fluidConfig.maxScreenSize = theme("fluidTypography.maxScreenSize", 1920);
+  /**
+   * The relative line-height of the headings
+   */
+  fluidConfig.lineHeight = theme("fluidTypography.lineHeight", 1.35);
 
-	// letterSpacing sizes based on https://vuetifyjs.com/en/styles/text-and-typography/#typography
-	const rules = {
-		".fluid-base": {
-			fontSize: "1rem",
-			lineHeight: 1.4,
-			letterSpacing: 0.5,
-		},
-		".fluid-lg": {
-			fontSize: generateFluidRule(1, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "0.009375em",
-		},
-		".fluid-xl": {
-			fontSize: generateFluidRule(2, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "0.0125em",
-		},
-		".fluid-2xl": {
-			fontSize: generateFluidRule(3, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "normal",
-		},
+  // letterSpacing sizes based on https://vuetifyjs.com/en/styles/text-and-typography/#typography
+  const rules = {
+    ".fluid-xs": {
+      fontSize: generateFluidRule(-2, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: 0.2,
+    },
+    ".fluid-sm": {
+      fontSize: generateFluidRule(-1, fluidConfig),
+      lineHeight: 1.5,
+      letterSpacing: 0.2,
+    },
+    ".fluid-base": {
+      fontSize: "1rem",
+      lineHeight: 1.4,
+      letterSpacing: 0.5,
+    },
+    ".fluid-lg": {
+      fontSize: generateFluidRule(1, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "0.009375em",
+    },
+    ".fluid-xl": {
+      fontSize: generateFluidRule(2, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "0.0125em",
+    },
+    ".fluid-2xl": {
+      fontSize: generateFluidRule(3, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "normal",
+    },
 
-		".fluid-3xl": {
-			fontSize: generateFluidRule(4, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "0.0073529412em",
-		},
+    ".fluid-3xl": {
+      fontSize: generateFluidRule(4, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "0.0073529412em",
+    },
 
-		".fluid-4xl": {
-			fontSize: generateFluidRule(5, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "normal",
-		},
-		".fluid-5xl": {
-			fontSize: generateFluidRule(6, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "-0.0083333333em",
-		},
-		".fluid-6xl": {
-			fontSize: generateFluidRule(7, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "-0.015625em",
-		},
-		".fluid-7xl": {
-			fontSize: generateFluidRule(8, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "-0.0234375em",
-		},
-		".fluid-8xl": {
-			fontSize: generateFluidRule(9, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "-0.03125em",
-		},
-		".fluid-9xl": {
-			fontSize: generateFluidRule(10, fluidConfig),
-			lineHeight: fluidConfig.lineHeight,
-			letterSpacing: "-0.04em",
-		},
-	};
+    ".fluid-4xl": {
+      fontSize: generateFluidRule(5, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "normal",
+    },
+    ".fluid-5xl": {
+      fontSize: generateFluidRule(6, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "-0.0083333333em",
+    },
+    ".fluid-6xl": {
+      fontSize: generateFluidRule(7, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "-0.015625em",
+    },
+    ".fluid-7xl": {
+      fontSize: generateFluidRule(8, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "-0.0234375em",
+    },
+    ".fluid-8xl": {
+      fontSize: generateFluidRule(9, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "-0.03125em",
+    },
+    ".fluid-9xl": {
+      fontSize: generateFluidRule(10, fluidConfig),
+      lineHeight: fluidConfig.lineHeight,
+      letterSpacing: "-0.04em",
+    },
+  };
 
-	addUtilities(rules);
+  addUtilities(rules);
 };
 
 module.exports = plugin(fluidTypography);
diff --git a/package.json b/package.json
@@ -1,33 +1,33 @@
 {
-	"name": "tailwind-fluid-typography",
-	"version": "1.0.0",
-	"description": "Fluid typography plugin for the tailwindcss framework",
-	"main": "index.js",
-	"contributors": [
-		"Craig Riley"
-	],
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/craigrileyuk/tailwind-fluid-typography.git"
-	},
-	"keywords": [
-		"tailwind",
-		"tailwindcss",
-		"plugin",
-		"tailwindcss-plugin",
-		"typography",
-		"fluid",
-		"responsive"
-	],
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/craigrileyuk/tailwind-fluid-typography/issues"
-	},
-	"homepage": "https://github.com/craigrileyuk/tailwind-fluid-typography#readme",
-	"peerDependencies": {
-		"tailwindcss": ">=1.2.0"
-	}
+  "name": "tailwind-fluid-typography",
+  "version": "1.1.0",
+  "description": "Fluid typography plugin for the tailwindcss framework",
+  "main": "index.js",
+  "contributors": [
+    "Craig Riley"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/craigrileyuk/tailwind-fluid-typography.git"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "plugin",
+    "tailwindcss-plugin",
+    "typography",
+    "fluid",
+    "responsive"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/craigrileyuk/tailwind-fluid-typography/issues"
+  },
+  "homepage": "https://github.com/craigrileyuk/tailwind-fluid-typography#readme",
+  "peerDependencies": {
+    "tailwindcss": ">=1.2.0"
+  }
 }