sky-toolkit-core - npm Package Compare versions

Comparing version 2.20.0 to 2.22.0

CHANGELOG.md

		@@ -7,2 +7,15 @@ # Changelog

		## 2.22.0

		### Features

		* [Settings] New `$global-widths` variable to customise the number of width
		utilities.
		* [Utilities] Expand our default widths to `.u-width-×/6`s.

		### Enhancements

		* Cleaner inline documentation.


		## 2.20.0
		@@ -9,0 +22,0 @@

docs/settings/globals.md

		@@ -39,2 +39,12 @@ ---

		## Utilities

		Exposed in [sky-toolkit-core/utilities/widths](../../utilities/_widths.scss).

		\| Variable \| Value \|
		\|--------------------------------\|---------------\|
		\| `$global-widths` \| Default \|

		---

		## Border
		@@ -41,0 +51,0 @@

docs/utilities/widths.md

		@@ -17,2 +17,9 @@ ---

		At Sky we design to a 12-column grid, however that's [not a one-size-fits-all
		solution](https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/).

		When it comes to writing your layout, select one with the number of columns you
		really need. For example, there’s no point in using a 12-column grid if your
		layout only needs 3 or 4 columns.

		By default, Toolkit surfaces the following width utilities from [Supercell](https://github.com/sky-uk/supercell#usage):
		@@ -27,3 +34,20 @@
		\| Fifths \| `.u-width-1/5`, `.u-width-2/5`, `.u-width-3/5`, `.u-width-4/5` \|
		\| Sixths \| `.u-width-1/6`, `.u-width-2/6`, `.u-width-3/6`, `.u-width-4/6`,\|
		\| \| `.u-width-5/6` \|

		The above values meet the vast majority of our use-cases, and are are completely
		customisable. Override `$global-widths` to meet your project's preference:

		```scss
		// This would only generate `.u-width-×/12`s
		$global-widths: 12;
		@import "sky-toolkit-core/all";

		// or

		// This would generate all fractions up to `.u-width-×/12`s
		$global-widths: 1 2 3 4 5 6 7 8 9 10 11 12;
		@import "sky-toolkit-core/all";
		```

		These utilities aren't tied exclusively to
		@@ -30,0 +54,0 @@ [Layout](https://github.com/sky-uk/supercell#usage); they can be applied

package.json

		{
		"name": "sky-toolkit-core",
		"version": "2.20.0",
		"version": "2.22.0",
		"description": "The core of Sky's CSS Toolkit",
		@@ -5,0 +5,0 @@ "main": "index.js",

_all.scss