v2.0.0

Getting Vanilla Framework

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

New

Features

• Renamed the "code snippet" component "code copyable"
• Added a .has-icon class for buttons
• Converted tabs to use flex for consistent cross-browser rendering
• Added a fading background to tabs when they extend out of a container
• Added new greys to the default colour palette
• Optimised embedded SVG images in the Sass
• Increaded the size of the thumb image size
• Updated the sizes of social media icons
• Added a script for developers to analyse individual patterns with Parker
• Removed the min-width of tooltips
• Updated the max-width of typographic elements
• Added a "stacked" variant of headings with icons
• Restyled radio buttons and checkboxes, ensuring consistency
• Renamed the old pagination component to "article pagination" to hint at its use
• Added a prettier dependency with a pre-commit hook to enforce code quality
• Made extensive code quality updates following running prettier for the first time
• Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
• Reduced the font-weight of h2 and p-heading--two
• Updated button margin and padding to be scalible and in-line with the baseline grid
• Stepped lists change to the smaller layout when the navigation threshhold is met
• The vf-focus mixin no longer has an offset and increased the outline size
• Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
• Changed the abbr cursor style to "help"
• Removed Blink mac system font from the font stack
• Removed box-shadow from form elements
• Darkened the border color of checkboxes and radio buttons for increases accessibility
• Upped the grid max width base valie from 990 to 1200
• Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
• Added rules for typographic edge-cases which require special spacing
• Broke up the large _typography.scss file into smaller files
• Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
• Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
• Standardised the naming of spacing variables to use S/M/L naming where possible
• Updated u-vertically-center to also work on small viewports
• Added a max-width to label elements
• Increased the allowed number of media queries in the project to 50 in the parker configuration
• Add optional font-size increase on the 1680 breakpoint
• Added an optional image element to the pull quote pattern
• Adjusted the base font size so that it respects browser accessibility settings
• Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
• p-aside renamed p-table-of-contents to reflect its more specific use
• Updated several icon assets for improved quality and reduced filesize
• Updated p-accordion so that icons appear on the left rather than the right
• Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
• Inline code elements now have a grey highlight to help them stand out from other text
• Added renovate to the project to help keeping dependencies up-to-date
• Removed shelves grid and reimplemented the functionality with CSS grid
• Replaced the chevron icon used in various patterns with a more visually appealing version
• Introduced new variable to change the font-weight for bold fonts
• Positioned tooltips now only require a single class
• Stacked forms now follow the grid
• Explicitly set columns to display: block

Components and utilities

• Added new p-subnav pattern for drop-down menus in navigation
• Added new u-no-print to exclude web-only elements from printed pages
• Added a new pagination component
• Added fixed-width utility and expose it as class
• Added bordered row

Removed deprecated components

• Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
• Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
• Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
• Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
• --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
• p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
• u-float--right and u-float--left are now u-float-right and u-float-left
• p-link--strong removed with no need for replacement
• p-footer: this component can be replicated using other, more generic components
• p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
• $color-warning variable removed: replaced with $color-caution

Documentation

Content

• Added a sub-heading example
• Updated the colour palette page
• Added an example of a stacked heading with icons
• Documented pull-quote varients
• Updated stepped-list documentation
• Merged all "code" component documentation to allow easier comparison
• Changed the layout of the icons page
• Added new documentation for the updated typographic spacing
• Updated the tooltip example markup
• Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing
• Updated the breakpoint documentation and added more examples

Website

• Removed flask for page generation
• Added nginx configuration
• Updated the navigation to match the rest of the website
• Added Usabilla user feedback widget
• Updated the "report a bug" link
• Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
• Restyled the sidebar and the background to light grey
• Updated included Vanilla Framework version to 1.8.1
• Moved code examples into /docs
• Converted the site generator to Jekyll (at v3.8.4)
• Upgraded Husky config (previous version was deprecated)

Bug fixes

• Widened the styling of input type="number" elements to allow for 4 digits
• Updated the accordion toggle to open/close the accordion
• fieldset styling updated to match the design spec and made their bottom margin scalable
• Removed unnecessary roles from example markup
• Active buttons now have a discerable hover state
• Update the colours for button hover states
• Removed redundant [scope="row"] and [scope="col"] in examples
• Fixed the positioning of the "copy to clipboard" button on code snippets
• Corrected the positioning of the close button in notifications
• Updated the slider pattern to use rems rather than ems in spacing
• Fixed strip border issues by positioning them reletively implementing a pseudo-border
• Fixed visibility of hover state on navigation items when the background colour is dark
• Fixed icon positioning for browser consistency
• Stopped reset buttons in forms being hidden by default
• Fixed the specificity of p-card selectors
• Made sure that the base typographic rules appear early in the CSS
• Refactored the navigation pattern to fix bugs with different background colours
• Fixed drift to basline grid on longer pages due to rounding errors
• Changed pre and code whitespace to scroll sideways rather than wrapping
• Added a background colour to the root html element to avoid reliance on browser defaults
• Added form validation feedback to select inputs
• Aligned tickboxes and radio buttons with the baseline grid
• Stepped-detailed list: fix alignment to rows
• u-min-margin--bottom: ensure it keeps text on baseline grid
• Fixed tick position in lists
• Convert p-card margin to padding so it pushes border down
• Fixed p-strip selector so class order doesn't matter
• Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)
• Removed conflicting map names

Code maintenance

• Pinned dependencies for dev requirements
• Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components
• Refactor's placeholder structure, removing mixins
• Moved %u-fixed-width-container into its own file

Development tooling

• Update to the latest version of the [run script ](https://canonical-web-and-design.github.io/practices/pro...

v2.0.0-beta.1

Getting Vanilla Framework

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

New

All the updates included in the previous 2.0.0 pre-releases plus the following:

Code maintenance

• Refactor's placeholder structure, removing mixins
• Moved %u-fixed-width-container into its own file

v2.0.0-beta

Getting Vanilla Framework

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

New

All the updates included in the previous 2.0.0-alpha* releases plus the following:

Documentation

• Fixed the heading-icon examples which were previously not included correctly
• Fixed the title of the grid bordered example
• Updated the breakpoint documentation and added more examples

Code maintenance

• Pinned dependencies for dev requirements
• Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components

v2.0.0-alpha.2

Getting Vanilla Framework

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

This release includes the changes included in 2.0.0-alpha.1 with the following additional changes:

New

Components and utilities

• Positioned tooltips now only require a single class
• Stacked forms now follow the grid
• Explicitly set columns to display: block

Documentation

• Better explain how to create empty columns

Development tooling

• Update to the latest version of the run script , for building the project and running documentation

2.0.0-alpha.1

Getting Vanilla Framework

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

This release includes the changes included in 2.0.0-alpha with the following additional changes:

New

Features

• Introduced new variable to change the font-weight for bold fonts

Components and utilities

• Added fixed-width utility and expose it as class
• Added bordered row

Documentation

Website

• Upgraded Husky config (previous version was deprecated)

Bug fixes

• Stepped-detailed list: fix alignment to rows
• u-min-margin--bottom: ensure it keeps text on baseline grid
• Fixed tick position in lists
• Convert p-card margin to padding so it pushes border down
• Fixed p-strip selector so class order doesn't matter
• Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)

2.0.0-alpha

Getting Vanilla Framework

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

New

Features

• Renamed the "code snippet" component "code copyable"
• Added a .has-icon class for buttons
• Converted tabs to use flex for consistent cross-browser rendering
• Added a fading background to tabs when they extend out of a container
• Added new greys to the default colour palette
• Optimised embedded SVG images in the Sass
• Increaded the size of the thumb image size
• Updated the sizes of social media icons
• Added a script for developers to analyse individual patterns with Parker
• Removed the min-width of tooltips
• Updated the max-width of typographic elements
• Added a "stacked" variant of headings with icons
• Restyled radio buttons and checkboxes, ensuring consistency
• Renamed the old pagination component to "article pagination" to hint at its use
• Added a prettier dependency with a pre-commit hook to enforce code quality
• Made extensive code quality updates following running prettier for the first time
• Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
• Reduced the font-weight of h2 and p-heading--two
• Updated button margin and padding to be scalible and in-line with the baseline grid
• Stepped lists change to the smaller layout when the navigation threshhold is met
• The vf-focus mixin no longer has an offset and increased the outline size
• Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
• Changed the abbr cursor style to "help"
• Removed Blink mac system font from the font stack
• Removed box-shadow from form elements
• Darkened the border color of checkboxes and radio buttons for increases accessibility
• Upped the grid max width base valie from 990 to 1200
• Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
• Added rules for typographic edge-cases which require special spacing
• Broke up the large _typography.scss file into smaller files
• Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
• Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
• Standardised the naming of spacing variables to use S/M/L naming where possible
• Updated u-vertically-center to also work on small viewports
• Added a max-width to label elements
• Increased the allowed number of media queries in the project to 50 in the parker configuration
• Add optional font-size increase on the 1680 breakpoint
• Added an optional image element to the pull quote pattern
• Adjusted the base font size so that it respects browser accessibility settings
• Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
• p-aside renamed p-table-of-contents to reflect its more specific use
• Updated several icon assets for improved quality and reduced filesize
• Updated p-accordion so that icons appear on the left rather than the right
• Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
• Inline code elements now have a grey highlight to help them stand out from other text
• Added renovate to the project to help keeping dependencies up-to-date
• Removed shelves grid and reimplemented the functionality with CSS grid
• Replaced the chevron icon used in various patterns with a more visually appealing version

Components and utilities

• Added new p-subnav pattern for drop-down menus in navigation
• Added new u-no-print to exclude web-only elements from printed pages
• Added a new pagination component

Removed deprecated components

• Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
• Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
• Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
• Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
• --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
• p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
• u-float--right and u-float--left are now u-float-right and u-float-left
• p-link--strong removed with no need for replacement
• p-footer: this component can be replicated using other, more generic components
• p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
• $color-warning variable removed: replaced with $color-caution

Documentation

Content

• Added a sub-heading example
• Updated the colour palette page
• Added an example of a stacked heading with icons
• Documented pull-quote varients
• Updated stepped-list documentation
• Merged all "code" component documentation to allow easier comparison
• Changed the layout of the icons page
• Added new documentation for the updated typographic spacing
• Updated the tooltip example markup
• Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing

Website

• Removed flask for page generation
• Added nginx configuration
• Updated the navigation to match the rest of the website
• Added Usabilla user feedback widget
• Updated the "report a bug" link
• Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
• Restyled the sidebar and the background to light grey
• Updated included Vanilla Framework version to 1.8.1
• Moved code examples into /docs
• Converted the site generator to Jekyll (at v3.8.4)

Bug fixes

• Widened the styling of input type="number" elements to allow for 4 digits
• Updated the accordion toggle to open/close the accordion
• fieldset styling updated to match the design spec and made their bottom margin scalable
• Removed unnecessary roles from example markup
• Active buttons now have a discerable hover state
• Update the colours for button hover states
• Removed redundant [scope="row"] and [scope="col"] in examples
• Fixed the positioning of the "copy to clipboard" button on code snippets
• Corrected the positioning of the close button in notifications
• Updated the slider pattern to use rems rather than ems in spacing
• Fixed strip border issues by positioning them reletively implementing a pseudo-border
• Fixed visibility of hover state on navigation items when the background colour is dark
• Fixed icon positioning for browser consistency
• Stopped reset buttons in forms being hidden by default
• Fixed the specificity of p-card selectors
• Made sure that the base typographic rules appear early in the CSS
• Refactored the navigation pattern to fix bugs with different background colours
• Fixed drift to basline grid on longer pages due to rounding errors
• Changed pre and code whitespace to scroll sideways rather than wrapping
• Added a background colour to the root html element to avoid reliance on browser defaults
• Added form validation feedback to select inputs
• Aligned tickboxes and radio buttons with the baseline grid

v1.8.1

Getting Vanilla Framework

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

Bug fixes

• Fixed a bug where scss variables in .p-slider were not interpolated correctly, making them improperly rendered in MS browsers

Documentation

• Added .u-baseline-grid utility page to the docs

v1.8.0

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.

v1.7.1

Getting Vanilla Framework

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

New

• .p-button--neutral is now 10% darker so it can be used in conjunction with p-strip--light
• Reduced .p-pull-quote size to be h4 instead of h3
• Updated the vf-highlight-bar function to be able to choose color, position, and whether it will sit above borders. It is used in Navigation (active state), Tabs (hover + active state) and Notification.
• Added $color-navigation-active-bar and $color-tabs-active-bar to color settings
• Namespaced utility placeholders
  • %clearfix is now %vf-clearfix
  • %u-hide-text is now %vf-hide-text

Documentation

• Fixed Contextual menu examples to close when clicked outside
• Fixed Table expanding button text to switch from "Show" and "Hide"

Bug fixes

• Fixed component interdependencies so that each component is encapsulated (except from base, which is required). This means that the following can now be included without relying on any other non-base components:
  • vf-p-switch
  • vf-p-icons
  • vf-p-lists
  • vf-p-inline-images
  • vf-p-card
  • vf-p-modal
  • vf-p-contextual-menu
  • vf-p-navigation
  • vf-p-tabs
  • vf-p-notification
• <select>s have been given padding right, so the chevron no longer overlaps text
• Fixed <button> spacing when placed inside <p> tags

v1.7.0

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

• See example

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

• See the docs page for more info

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