Customization

This guide will help you customize your Vermeer project.

Color scheme#

Use a custom color scheme.

1. In config/_default/params.toml, set vermeer.colorScheme to Custom:

   [vermeer]
     colorScheme = "Custom" # Brooklyn, Custom, Default, Emerson, Franklin, Inverted, Kennedy, Morgan, Paisley, Quinn, Seraphina, Skylar, Wilde, or Zoey

2. Update assets/scss/color-schemes/_custom.scss

   // Custom color scheme
   $contrast:    #ecece9;
   $contrast-2:  #ecece999;
   $contrast-3:  #ecece920;
   $base:        #131316;
   $gradient:    $base;

Font(s)#

Use a custom font.

If you’d like to use the Montserrat font for example:

1. Select font(s)

   Visit google-webfonts-helper, select Monserrat, charset latin, styles regular and 500.

2. Add CSS

   Copy CSS for modern browsers — use folder prefix /fonts/montserrat/ — and paste in assets/scss/common/_custom.scss:

   // Put your custom SCSS code here
   
   /* montserrat-regular - latin */
   @font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
     src: url('/fonts/montserrat/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   }
   /* montserrat-500 - latin */
   @font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 500;
     src: url('/fonts/montserrat/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   }

3. Add font(s)

   Download files, extract, and paste fonts in /static/fonts/montserrat/.

4. Override SCSS variables

   Copy the variables you’d like to override from themes/vermeer/assets/scss/common/_variables-overrides.scss and paste to assets/scss/common/_variables-custom.scss. Make your changes in the latter:

   // Put your custom SCSS variables here
   
   // stylelint-disable value-keyword-case
   $font-family-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   // stylelint-enable value-keyword-case
   
   $headings-font-family: $font-family-sans-serif;

5. Preload font(s)

   Preload the font(s) — to avoid Cumulative Layout Shift. Create the file layouts/partials/head/resource-hints.html and add:

   <link rel="preload" href="{{ "fonts/montserrat/montserrat-v26-latin-regular.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="{{ "fonts/montserrat/montserrat-v26-latin-500.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>

(S)CSS#

Use custom (S)CSS

1. Override SCSS variables

   Copy the variables you’d like to override from themes/vermeer/assets/scss/common/_variables-overrides.scss and paste to assets/scss/common/_variables-custom.scss. Make your changes in the latter.

2. Add custom (S)CSS

   You can put custom (S)CSS in assets/scss/common/_custom.scss

JavaScript#

Use custom JavaScript (JS).

1. Add custom JavaScript

   You can put custom JavaScript in assets/js/custom.js

Homepage#

Use a custom Homepage

1. Edit homepage layout.

   Copy themes/vermeer/layouts/index.html and paste as layouts/index.html. Make your changes in the latter.

2. Update (S)CSS

   Add custom (S)CSS.

404 page#

Use a custom 404 page.

1. Edit 404 page layout.

   Copy themes/vermeer/layouts/404.html and paste as layouts/404.html. Make your changes in the latter.

2. Update (S)CSS

   Add custom (S)CSS.