Skip to content

v1.7.0

Choose a tag to compare

View all tags
@Caleb-Ellis Caleb-Ellis released this 10 May 09:38
· 5208 commits to main since this release
v1.7.0
bc3afd3

Getting Vanilla Framework

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

New

Vanilla spacing has been completely revamped, which should help give pages a more harmonious design and provide a guideline for how components are built and sit together

  • Spacing variables are now separated into vertical spacing ($spv) and horizontal spacing ($sph)
  • They are separated into spacing within components ($spv-intra), and between components ($spv-inter)
  • These are then separated into different sizes: regular ($spv-intra), condensed ($spv-intra--condensed) and expanded ($spv-intra--expanded)
  • The generic spacing units are still available but the intent is to deprecate them eventually
  • Projects using Vanilla will likely have to remove/edit workarounds, for example utilities like u-no-margin and bespoke css
  • Visit the docs page on spacing for more info

Typography has been revamped to follow a modular scale with a base of 16/14 (~1.143).

  • The most obvious change is there are now four main headings, h1-h4, instead of five. Basically h4 and h5 have combined into a new, middle-ground h4.
  • This means that for projects using Vanilla, you will likely need to convert any h5's and .p-heading--fives to their h4 equivalent
  • Visit the docs page on typography for more info

Tables now have muted headings as opposed to a bold ones

There have been a number of changes to how the components are built.

  • Global placeholders have been introduced for common styles between components, for example the box-shadow for Card (highlighted), Modal, and Notification
  • Many borders, as well as the highlight bar in the Navigation, Tabs and Notification components are now pseudo-elements to keep spacing consistent

u-align utilities have been split out into u-align and u-align-text. The latter should be used for elements that have a left or right margin, for example typographic elements that have a max-width

Documentation

Added the following pages:

  • Functions for global Vanilla functions used across multiple components
  • Placeholders for global placeholder settings, for styles that are used across multiple components

Edited pages:

  • Spacing to account for the 1.7.0 changes
  • Breakpoints to include the new $breakpoint-heading-threshold, which determines when headings snap to mobile-size headings
  • Align to include the new u-align-text utility

Changed the name of "Global navigation" to "Navigation"

Bug fixes

The following bugs have been fixed since v1.7.0-beta-2.1:

  • <pre> blocks now have whitespace: pre-wrap so they wrap properly
  • Placeholders have been namespaces
  • Matrix components are more flexible with multiple paragraphs (either in <div class="p-matrix__desc> or multiple <p class="p-matrix__desc">)
  • Removed padding and margin from <code> blocks
  • Added !default to all settings so they can be edited properly before Vanilla is included in a project
Assets 2
Loading