diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..f276f7c --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,8 @@ +## MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..0b2446c --- /dev/null +++ b/README.md @@ -0,0 +1,422 @@ +# Tailwind Utopia +A TailwindCSS plugin to generate interpolated fluid typographic and spacing scales as created by the generator [utopia.fyi](https://utopia.fyi). + +If you haven't already, visit [utopia.fyi](https://utopia.fyi) and familiarise yourself with the concepts. +* [Designing with fluid type scales](https://utopia.fyi/blog/designing-with-fluid-type-scales/) +* [CSS only fluid scales](https://utopia.fyi/blog/css-modular-scales/) +* [Designing with fluid space palette](https://utopia.fyi/blog/designing-with-a-fluid-space-palette) +* [Painting with fluid space palette](https://utopia.fyi/blog/painting-with-a-fluid-space-palette) + +This plugin essentailly recreates the calculators from utopia.fyi within your tailwind config. +* [Fluid type calculator](https://utopia.fyi/type/calculator) +* [Fluid space calculator](https://utopia.fyi/space/calculator) + +## Installation +`npm install --save-dev cwsdigital/tailwind-utopia` + +## Getting Started +Require the plugin in your `tailwind.config.js` file and reference it in the plugins section. +``` +const utopia = require('tailwind-utopia') + +module.exports = { + theme: { + ... + }, + plugins: [ + utopia + ] +} +``` + +Out of the box this will generate both a fluid type scale and a fluid space scale with the same defaults as the Utopia calculators: +* A type scale with 2 negative steps and 5 positive steps from a 20px base size at the minumum screen size of 320px up to a 24px base size at the maximum screen size of 1140px, with the modular scale being 1.2 (minor third) at the minimum screen size and 1.25 (major third) at the maximum screen size. +* A fluid spacing scale with t-shirt sizes from 3xs up to 3xl, and utilities + for each space-value pair in the scale + +### Typographic Scale +the default utility classes genearted are as follows. +``` +.fl:text-step--2 +.fl:text-step--1 +.fl:text-step-0 +.fl:text-step-1 +.fl:text-step-2 +.fl:text-step-3 +.fl:text-step-4 +.fl:text-step-5 +``` + +### Spacing Scale +Out of the box this will generate a utility class for each entry in +the scale for most all of the Tailwind entries that utilise the spacing scale. +#### Default Scale +``` +{ + '3xs': 0.25, + '2xs': 0.5, + 'xs': 0.75, + 's': 1, + 'm': 1.5, + 'l': 2, + 'xl': 3, + '2xl': 4, + '3xl': 6, +} +``` +#### Attributes +``` +{ + margin: { + 'm': ['margin'], + 'mt': ['margin-top'], + 'mr': ['margin-right'], + 'mb': ['margin-bottom'], + 'ml': ['margin-left'], + 'mx': ['margin-left', 'margin-right'], + 'my': ['margin-top', 'margin-bottom'], + }, + padding: { + 'p': ['padding'], + 'pt': ['padding-top'], + 'pr': ['padding-right'], + 'pb': ['padding-bottom'], + 'pl': ['padding-left'], + 'px': ['padding-left', 'padding-right'], + 'py': ['padding-top', 'padding-bottom'], + }, + space: { + 'space-x': ['margin-left', 'margin-right'], + 'space-y': ['margin-top', 'margin-bottom'], + }, + gap: { + 'gap': ['gap'], + 'gap-y': ['row-gap'], + 'gap-x': ['column-gap'], + }, + width: { + 'w': ['width'], + }, + height: { + 'h': ['height'], + }, +} +``` +The plugin will also generate utilities for contiguous pais in the scale. i.e. +'2xs-xs', 'xs-s', 's-m' and so on for the whole scale. + +Each size on the scale is also added as a CSS custom property onto the `:root` +selector (to enable you to use the spacings elsewhere in your styles). + +Example default output: +``` +:root { + --fs-xs: calc(...); + --fs-s: calc(...); + ... + --fs-xs-s: calc(...); + ... +} + +.fl\:ml-xs { + margin-left: var(--fs-xs); +} +.fl\mr-xs { ... } +... +.fl\my-xs-s { ... } +...etc +``` + +## Customising your scales +The plugin is a standard Tailwind plugin, with its defaults set using a theme object. So all the defaults can be extended or overriden within the `theme` and `extend` entries within your Tailwind config file. + +Below is the default theme used by the plugin: +``` +utopia: { + minScreen: '320px', + minSize: 21, + minScale: 1.2, + maxScreen: '1140px', + maxSize: 24, + maxScale: 1.25, + textSizes: [ + 'step--2', + 'step--1', + 'step-0', + 'step-1', + 'step-2', + 'step-3', + 'step-4', + 'step-5', + ], + spacingSizes: { + '3xs': 0.25, + '2xs': 0.5, + 'xs': 0.75, + 's': 1, + 'm': 1.5, + 'l': 2, + 'xl': 3, + '2xl': 4, + '3xl': 6, + }, + spacingPairs: {}, + spacingCustomPairs: [], +} + +``` +* **minScreen**: the screen size the scale starts at (unitless integer or px) +* **minSize**: the base font size at the minScreen size (unitless integer) +* **minScale**: the modular scale to use for type sizes at minScreen size + (decimal) +* **maxScreen**: the screen size at which the scale stops increasing (unitless integer or px) +* **maxSize**: the base font size a the maxScreen size (unitless integer) +* **maxScale**: the modular scale to use at the maxScreen size (decimal) +* **textSizes**: your text size class names +* **spacingsizes**: spacing scale class names and associated multiplier +* **spacingPairs**: only generate specified pairs +* **spacingCustomPairs**: non-contiguous spacing pairs to generate utilities for + +It is possible to disable the generation of all spacing scale pairs (see configuration +below). If you do this you can provide only the pairs you would like to +generate classes for using the `spacingPairs:` theme entry. + +You can also generate wider spacings by providing custom pairings. This is for +genrating scaling between non-contiguous scale entries. e.g. 's-xl', 'lg-2xl' + +**NB**: The `spacingPairs:` entry is an object, so can only have one key for each size. +The `spacingCustomPairs:` needs to be able to handle multiple pairs with the same +starting key e.g. 's-lg' and 's-2xl', so should be provided as an array of +objects. +``` +pairs: { + s: 'md', + lg: 'xl' +}, +customPairs: [ + { s: 'md' }, + { s: 'lg' }, + { lg: '2xl' } +] +``` + +You can reference other parts of your theme config if deisred (e.g. for using entries from your screens config). An example customisation could look as follows: +``` +{ + theme: { + utopia: theme => ({ + minScreen: theme('screens.sm'), + maxScreen: theme('screens.xl'), + maxScale: 1.5, + textSizes: [ + 'xs', + 'sm', + 'base', + 'lg', + 'xl', + '2xl', + '3xl', + ], + + }), + }, + extend: { + utopia: { + spacingSizes: { + '4xl': 8 + }, + } + } +} +``` +**NB:** Due to the way extend works and the way the classes are calculated (order matters!), if you wish to add a negative step to your typographic scale you'll need to add the whole textSizes array into the theme, rather than use extend. + + +## Configuration Options +The plugin has the following options to configure the style of classes generated and how they are generated. + +
Option | Default | +
---|---|
useClamp | false | +
prefix | 'fl:' | +
baseTextSize | 'step-0' | +
generateSpacing | true | +
generateAllSpacingPairs | true | +