Skip to content

v1.8.0
Compare
Choose a tag to compare
@Caleb-Ellis Caleb-Ellis released this 16 Jul 13:04
v1.8.0
cd9413a

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://docs.vanillaframework.io

New

  • 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.

Documentation

  • 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.

Bug fixes

  • 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.
Assets 2