--- title: 'Vanilla: theme wrapping' description: If you’ve been following our Vanilla framework series of blog posts you’ll be aware of why we needed this new framework and have a little insight into how we’ve set about using it. With this post we’ll be delving a little further into how we include and customise the framework for our Ubuntu family of […] url: https://canonical.com/blog/vanilla-theme-wrapping?format=md --- 1. [Blog](https://canonical.com/blog) 2. Article --- [Graham Bancroft](https://canonical.com/blog/author/gbancroft-canonical "More about Graham Bancroft") 23 November 2015 # Vanilla: theme wrapping [Design](https://canonical.com/blog/tag/design) --- Share the article If you’ve been following our [Vanilla framework series of blog posts](https://canonical.com/?s=vanilla) you’ll be aware of why we needed this new framework and have a little insight into how we’ve set about using it. With this post we’ll be delving a little further into how we include and customise the framework for our Ubuntu family of websites. Let’s get started with how Vanilla fits into a site’s structure with an introduction to the concept of Vanilla theming. [Robin](http://design.canonical.com/author/nottrobin/) [touched on how to use the framework](http://design.canonical.com/2015/08/vanilla-creating-a-modular-sass-library/#how-to-use) in his recent post [‘Vanilla: Creating a modular Sass library’](https://canonical.com/2015/08/vanilla-creating-a-modular-sass-library/), to recap, *in case you didn’t get that far*, here’s how you get started. In this example, we’ll start by installing Vanilla directly into your project. We’ll add [the latest version of `vanilla-framework`](http://ubuntudesign.github.io/vanilla-framework/) to your project’s [`package.json`](https://docs.npmjs.com/files/package.json) as follows: or, if you don’t have a [package.json](https://docs.npmjs.com/files/package.json "Find out more about what this file does and why you might need it") file go ahead and run the following: Once you have Vanilla installed, your project will have a new folder called ‘node\_modules’. An example of your code structure could be: Some of our larger sites, such as [www.ubuntu.com](http://ubuntu.com), are served using [Django](https://www.djangoproject.com) and we like to keep the folder structure as close to a standard setup as possible, therefore, all our static files are kept in a static folder. To include Vanilla and all its essence (see what I did there?) you need to add the following to your site’s main scss file: When you compile styles.scss it will include the framework into the compiled CSS. But what if I want to change the default colours? I hear you ask. Well, if you have a look in the `vanilla-framework/scss/` folder you’ll see a file entitled `_global-settings.scss`, in this file you’ll discover the default theme settings such as brand colour and the maximum width of your site, this needs to be imported above the framework. However, if you are likely to use these styles on more than one site, you might want to consider building your own theme. ## Building a theme To take [www.ubuntu.com](http://ubuntu.com) as an example, where we are using ubuntu-vanilla-theme, the file structure looks like this: Both the theme and framework are in nested folders called `node_modules` as Vanilla framework is a dependence of the theme. You’ll see in the `ubuntu-vanilla-theme/scss` folder there’s a file called \_theme.scss, a theme specific `_global-settings.scss` file and a modules folder where any overrides of the `vanilla-framework` will live. Here is an example of what \_theme.scss could look like: There’s a fair bit going on here but basically what we’re doing is pulling in our theme specific `_global-settings.scss` file with overrides and any new variables we may want to include, above the framework imports so any overrides we add will take effect. Now you can add new modules by creating files in `/modules/`, then add an `@import` and `@include` in your `_theme.scss` file. You’ll also see that there is a `build.scss` file, this imports the theme file and includes the ubuntu-vanilla-theme mixin. We use [Gulp](http://gulpjs.com/) as our build system to automate common tasks in the development of our websites. Coming up next in our Vanilla flavoured posts, [Karl](https://canonical.com/blog/”http:/design.canonical.com/author/deadlight/”) will be showing you how to build a theme. [Get in touch Interested in running Ubuntu in your organization?](https://ubuntu.com/about/contact-us/form) ## Sign up for our newsletter Get the latest Canonical news and updates in your inbox. Work email: \*I agree to receive information about Canonical's products and services. By submitting this form, I confirm that I have read and agree to [Canonical's Privacy Policy](https://canonical.com/legal/dataprivacy). Sign up ## Share on --- ## Related posts [### Challenges designers face in open source (and how to fix them)](https://canonical.com/blog/challenges-designers-face-in-open-source-and-how-to-fix-them) Open source powers up to 90% of modern software, yet many projects lack usability. Canonical’s Design team surveyed 115 cross-functional professionals to uncover the 4 core... [Kola Ojoodide](https://canonical.com/blog/author/kola-ojoodide) 26 June 2026 [### Why web engineering is great](https://canonical.com/blog/why-web-engineering-is-great) Hi, I’m Johann! I’m an engineering manager in Canonical’s web team. For the larger part of my 15 years of work experience as engineer, I’ve been working in web development.... [Johann Wolf](https://canonical.com/blog/author/johannwolf) 27 April 2026 [### Canonical’s recipe for High Performance Computing](https://canonical.com/blog/canonicals-recipe-for-high-performance-computing) In essence, High Performance Computing (HPC) is quite simple. Speed and scale. In practice, the concept is quite complex and hard to achieve. It is not dissimilar to what... [Igor Ljubuncic](https://canonical.com/blog/author/igorljubuncic) 24 January 2024 [### Web team – hack week 2023](https://canonical.com/blog/web-team-hack-week-2023) Today, around 96% of software projects utilize open source in some way. The web team here at Canonical is passionate about Open source. We lead with an open-by-default approach... [Anthony Dillon](https://canonical.com/blog/author/ya-bo-ng) 25 October 2023