Here you will find information on customising Vanilla to suit your project.
To override the default settings you must do so before you include Vanilla in your main Sass file. It is good practice to include custom styles in a separate settings file. A list of configurable settings can be found in the Related settings section.
// Override default Vanilla settings in your main Sass file
$breakpoint-navigation-threshold: 900px;
$color-accent: #7cf0ee;
$font-base-family: 'Merriweather';
$grid-max-width: 1440px;
// ...or include it from a separate settings file in the same folder
@import 'settings';
// Import Vanilla framework
@import 'vanilla-framework';
// Include all of Vanilla Framework
@include vanilla;
Your project may not warrant including all of Vanilla, in which case you can include components modularly. We recommend including vf-base as many components depend on the base styling. As a bare minimum, you need to include vf-b-placeholders, as many patterns extend these placeholders and will generate errors if they are missing. Below is an example of how to include Vanilla components on an as-needed basis:
// Import Vanilla framework
@import 'vanilla-framework';
// Include base Vanilla styles
@include vf-base;
// Include the components you want
@include vf-p-buttons;
@include vf-p-forms;
@include vf-p-links;