Vanilla masterclasses

The Vanilla framework is used on the vast majority, if not all, of Canonical’s websites, and helps us to achieve a consistent look and feel across each of them using a large set of well defined components and patterns.

We have put together a few masterclasses (with more to come) that serve as an introduction the project, and a guide to using and contributing to it.

Vanilla 101


In “Vanilla 101”, we give a general introduction to Vanilla (what it currently is, how docs are structured, how different elements of Vanilla like components, layouts, utilities are used, etc).

Hopefully, this will give us a good foundation for subsequent, more detailed masterclasses.

Introduction to Vanilla codebase


In this masterclass we give a more detailed look at the Vanilla codebase to show how the website and SCSS framework is built. We hope this will help give a better understanding of how Vanilla is built and the conventions in use throughout the project.

Best practices for using Vanilla in your project


In this masterclass, we talk about how to include Vanilla in your project, and particularly how to include only the parts of Vanilla you need. We also demonstrate how to customise Vanilla by redefining variables, extending existing patterns, and using Vanilla’s building blocks to build entirely new patterns (if a new pattern is absolutely necessary).

Internals of a pattern


In this masterclass we have a more detailed look into how code of a component is structured, and we will build a simple example component to demonstrate how to add it to Vanilla, how to build variants, examples, etc.

Spacing pt. 1 - baseline grid


This first session about Vanilla spacing will focus on the baseline grid and why it is useful, types of alignment on a baseline grid, vertical rhythm.

Documenting changes to Vanilla


In this class, we detail how to document the changes and updates we make to Vanilla, which can seem like quite an involved process.