v4.2.0

Getting Vanilla Framework

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

New in Vanilla v4.2.0

💣 Potentially breaking changes

In Vanilla 4.2 we reworked our logo section component. If used correctly, with correctly sized images it should be a seamless upgrade, but if you have used logo section with logos not correctly spaced by visual design team you may end up with broken look of oversized logos.

🚀 Features

• Logo section updates by @bartaz (#4852)
• Dark theme for forms by @bartaz (#4857)

🐛 Bug Fixes

• Fix chevron top on mobile by @lemacarl (#4853)

🔨 Maintenance

• Update Node.js to v20 by @renovate (#4855)
• Update all non-major dependencies by @renovate (#4854)

New Contributors

• @lemacarl made their first contribution in #4853

Full Changelog: v4.1.0...v4.2.0

v4.1.0

Getting Vanilla Framework

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

New in Vanilla v4.1.0

🚀 Features

• Add suru component by @bartaz (#4849)
• Dark tabs by @lyubomir-popov (#4817)
• Add responsive variant of 25/75 grid by @bartaz (#4846)
• Add display headings by @bartaz (#4840)

📝 Documentation

• Remove Vanilla 3 changes from "What's new" page by @bartaz (#4851)
• Add examples of hero sections by @bartaz (#4843)
• Fix license link by @bartaz (#4839)
• Move brochure sites example to separate category by @bartaz (#4836)
• Migration guide updates by @bartaz (#4830)
• Remove outdated info about alpha releases by @bartaz (#4835)

🔨 Maintenance

• Update border and font in chips by @ClementChaumel (#4850)
• Update breadcrumb's bottom margin by @ClementChaumel (#4842)
• Bump stylelint from 14.16.1 to 15.10.1 by @dependabot (#4825)
• Bump semver from 5.7.1 to 5.7.2 by @dependabot (#4827)
• Update dependency @canonical/cookie-policy to v3.5.0 by @renovate (#4829)

Full Changelog: v4.0.0...v4.1.0

v4.0.0

🍦 New in Vanilla 4.0

Vanilla 4.0 introduces elements of new style used for current rebranding of Canonical's brochure websites, including typography changes (utilising new variable Ubuntu font), wider grid width, some updated colours, and updates to any related components.

The most important changes include:

• updated typography of headings
• grid width increased to 80 rem
• some new components that help to build brochure sites in new style (horizontal rule, sections, new shorthand grid variants)

🚀 Migrating to Vanilla 4.0

We treat Vanilla 4.0 as an interim release that includes elements of new branding, but keep the support for old style of components as well to allow for easier and more granular migration on our biggest websites. Therefore, there are no significant breaking changes or removed components.

But because of quite significant visual changes introduced by updated typography and wider grid, it is recommended to properly QA templates and pages, especially if there are any custom styles built on top of Vanilla.

You can check our migration guide for more details.

🔗 Getting Vanilla Framework

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

📝 Change log

• Typography changes by @lyubomir-popov @ClementChaumel in #4734
• Align prefix for stepped list @ClementChaumel @bartaz in #4735
• Fix alignment of heading icon @bartaz in #4736
• Update small screens font sizes @lyubomir-popov in #4740
• Revert logo font size to match logo sizing by @bartaz in #4756
• chore(deps): update all non-major dependencies by @renovate in #4754
• Update rule-highlight pattern to use to appropriate class by @petesfrench in #4759
• Paper background by @bartaz in #4763
• Add paper colour variable by @bartaz in #4772
• Implement white strips for paper background by @bartaz in #4773
• Migration docs 4.0 by @bartaz in #4774
• Merged with latest Vanilla 3.15.1
• Update typography docs for Vanilla 4.0 by @bartaz in #4780
• Add utility to limit max width of text lists by @bartaz in #4781
• Update text colour to 000 by @bartaz in #4786
• Add teal accent colour by @bartaz in #4799
• Darker rule component by @bartaz in #4801
• Links on dark by @bartaz in #4805
• Remove rounded corners by @bartaz in #4810
• Ubuntu font 0.869 and old style numerals by @bartaz in #4812
• Update muted heading by @lyubomir-popov in #4807
• Change ticks in lists to grey by @ClementChaumel in #4792
• Use is-dark class name for consistency by @bartaz in #4819
• Make sure logo tag background is not configurable by @bartaz in #4821
• Update section component by @bartaz in #4823
• Merge Vanilla 4.0 feature branch by @bartaz in #4751

Full Changelog: v3.15.1...v4.0.0

v4.0.0-rc.1

💣 Breaking changes in Vanilla 4

This is a release candidate of Vanilla 4.0.0. On top of changes from previous alpha versions it fixes some minor issues and inconsistencies.

Migration guide

We also created a draft version of the migration guide that can be accessed on our demo server.

What's Changed

• Update muted heading by @lyubomir-popov in #4807
• Change ticks in lists to grey by @ClementChaumel in #4792
• Use is-dark class name for consistency by @bartaz in #4819
• Make sure logo tag backround is not configurable by @bartaz in #4821
• Update section component by @bartaz in #4823

Full Changelog: v4.0.0-alpha.3...v4.0.0-rc.1

v3.15.1

👋 The last release of Vanilla v3

With focus on new major release of Vanilla 4.0 this 3.15.1 is likely the last release of Vanilla v3 line. We may release some hot-fixes if any serious bugs are found, but no new features or maintenance updates are planned for v3 anymore.

Getting Vanilla Framework

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

New in Vanilla v3.15.1

🐛 Bug Fixes

• Reduce form input width - 10em to 8em by @Jim-Dillon (#4798)

🔨 Maintenance

• Breadcrumbs - chevrons to slashes by @Jim-Dillon (#4811)
• Use ps5 registry by @nottrobin (#4804)
• Migrate to Percy CLI by @bartaz (#4795)

New Contributors

• @Jim-Dillon made their first contribution in #4798

Full Changelog: v3.15.0...v3.15.1

v4.0.0-alpha.3

💣 Breaking changes in Vanilla 4

This is a third pre-release of Vanilla 4.0. On top of changes from previous versions it updates colours of text, accents and rule component, and adds some additional utilities.

Migration guide

We also created a draft version of the migration guide that can be accessed on our demo server.

What's Changed

• Merged with latest Vanilla 3.15.1
• Update typography docs for Vanilla 4.0 by @bartaz in #4780
• Add utility to limit max width of text lists by @bartaz in #4781
• Update text colour to 000 by @bartaz in #4786
• Add teal accent colour by @bartaz in #4799
• Darker rule component by @bartaz in #4801
• Links on dark by @bartaz in #4805
• Remove rounded corners by @bartaz in #4810
• Ubuntu font 0.869 and old style numerals by @bartaz in #4812

Full Changelog: v4.0.0-alpha.2...v4.0.0-alpha.3

v3.15.0

Getting Vanilla Framework

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

New in Vanilla v3.15.0

🚀 Features

• Add sliding nav on mobile by @ClementChaumel (#4767)

📝 Documentation

• Update rule-highlight pattern to use to appropriate class by @petesfrench (#4759)

🔨 Maintenance

• chore(deps): update dependency canonicalwebteam.discourse to v5.4.2 by @renovate (#4778)
• chore(deps): update dependency postcss-cli to v10 by @renovate (#4776)
• chore(deps): update all non-major dependencies by @renovate (#4775)
• Add paper colour variable by @bartaz (#4772)
• chore(deps): update all non-major dependencies by @renovate (#4754)

Full Changelog: v3.14.0...v3.15.0

v4.0.0-alpha.2

💣 Breaking changes in Vanilla 4

This is a second pre-release of Vanilla 4.0. On top of changes from previous version it adds support for new paper background colour via is-paper class and some related changes, such as introduction of white strip.

Migration guide

We also created a draft version of the migration guide that can be accessed on our demo server.

What's Changed

• chore(deps): update all non-major dependencies by @renovate in #4754
• Update rule-highlight pattern to use to appropriate class by @petesfrench in #4759
• Paper background by @bartaz in #4763
• Add paper colour variable by @bartaz in #4772
• Implement white strips for paper background by @bartaz in #4773
• Migration docs 4.0 by @bartaz in #4774

Full Changelog: v4.0.0-alpha.1...v4.0.0-alpha.2

v4.0.0-alpha.1

💣 Breaking changes in Vanilla 4

This is a first pre-release of Vanilla 4.0. It includes typography changes that affect size and font weight of headings, wider grid width and fixes to any related components.

Migration guide

At this point there should be no breaking changes on SCSS code side, but visual changes introduced by changed typography may require some additional attention so make sure to:

• properly review ALL of your pages/templates to make sure nothing looks broken, especially around new headings
• if you have any custom styles of headings or custom components that use headings make sure they look correct
• if you have anything that relies on grid max width (like a legacy global-nav bar on top of the page) make sure to use new value of $grid-max-width that is 80rem

What's Changed

• Typography changes by @lyubomir-popov @ClementChaumel in #4734
• Align prefix for stepped list @ClementChaumel @bartaz in #4735
• Fix alignment of heading icon @bartaz in #4736
• Update small screens font sizes @lyubomir-popov in #4740
• Revert logo font size to match logo sizing by @bartaz in #4756

Full Changelog: v3.14.0...v4.0.0-alpha.1

v3.14.0

Getting Vanilla Framework

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

New in Vanilla v3.14.0

🚀 Features

• Add sections and blocks components by @yurii-vasyliev (#4730)
• Add rule component by @andesol (#4731)
• Add common grid patterns by @andesol (#4727)
• Update deep strip paddings by @yurii-vasyliev (#4720)

🐛 Bug Fixes

• Fix grid offsets by @ClementChaumel (#4741)
• Fix split list items overflowing in the other column by @ClementChaumel (#4722)

📝 Documentation

• Remove outdated Suru strips from the website by @ClementChaumel (#4752)
• Demo of design sprint brochure site documentation by @bartaz (#4708)

🔨 Maintenance

• Remove border radius from images by @bartaz (#4750)
• Update dependency canonicalwebteam.discourse to v5.4.1 by @renovate (#4743)
• Update dependency yaml to v2 [SECURITY] by @renovate (#4746)
• Revert new vertical spacing classes by @yurii-vasyliev (#4733)
• Skip installing Chromium for production on jenkins by @bartaz (#4732)
• Update dependency canonicalwebteam.discourse to v5.4.0 by @renovate (#4726)
• Remove separator for the first item in the list (except if nested) by @ClementChaumel (#4723)
• Move all deps to devDeps by @yurii-vasyliev (#4725)

New Contributors

• @yurii-vasyliev made their first contribution in #4717

Full Changelog: v3.13.0...v3.14.0