Release v1.8.0 · canonical/vanilla-framework

Getting Vanilla Framework

h1 font weight has been changed from 300 to 100, which uses the Ubuntu Thin font. An example of it in use can be found at the Vanilla homepage.
Added the parker stylesheet analysis tool to the project's tests. It measures things like stylesheet size, top specificity, selectors per rule etc. Performance benchmarks and thresholds can be found here.
.p-switch pattern is now a checkbox (<input type="checkbox">) so it can be used without JS (see example). The old <button> version is now deprecated, to be removed in v2.0.
Each icon pattern is now its own mixin, meaning you can import icons individually instead of being forced to import all 32. They can also now be given an .is-light class to force them to take the light colour.
Simplified the u-baseline-grid utility to be a background, and added an example page.
The vf-highlight-bar function can now be used to add a 3px strip to the left/right of a container, as well as top/bottom.
Added a new Typographic spacing page, to easier track spacing changes with Percy.
Icons now encode the # in its colour by default. This means you no longer have to include the vf-url-friendly-color mixin for icons to work properly in Firefox.
Added JavaScript to the Code snippet example so it actuall copies to clipboard.
GitHub issue templates have been updated, and split into three (Report a bug, Propose a new pattern, Propose an amendment to an existing pattern). See the GitHub blog post about it.

The docs template has been completely overhauled! Changes include:
A new homepage with a stylish hero strip!
A new sidebar! It no longer expands/collapses, in favour of having all components exposed.
Two new pages! Building with Vanilla, which explains how to get set up with Vanilla for a few different build setups; and Customising Vanilla, which explains how you can alter Vanilla to suit your project's requirements.
The Typography page has been rewritten to more clearly explain the purpose of heading classes.

Updated the .npmignore file so that only the contents of the scss folder are published to npm.
Removed align-self: flex-start from img tags, which was making it very difficult to make flex layout changes.
Overflow in u-image-position container is now hidden.
Fixed a styling bug for empty .p-code-numbered code blocks.
Fixed inline images being cropped and having incorrect aspect ratio, and added a class name for imgs inside the pattern (p-inline-images__logo). Targetting img directly is now deprecated, to be removed in v2.0.
Fixed various broken links in the docs.
Fixed right-aligned <th> spacing.
Fixed padding in .p-tooltip.
Made media object spacing more flexible, so that the order of description/metadata does not break spacing.
Fixed a bug where the sticky footer component was making the header navigation break in small screen Firefox windows.
Fixed a bug where, in order to get icons to show as light, you HAD to have --dark as the last part of the class name. Now it can appear anywhere.