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