Creating custom themes

Creating custom themes

Themes are written in SCSS. Currently there is no support for alternative CSS pre- or post-processers.

Adding custom themes is a four step process. There is also code below that can be used as a template for developing new themes.

1. Create the _settings.scss file
2. Add the core theme SCSS, as well as any fonts and images that the theme uses
3. Create an index.js with a list of the theme's assets
4. Add your theme to the themes directory

A completed theme's structure will look something like this:

b-ber-theme-custom
  ├── _settings.scss
  ├── application.scss
  ├── fonts
  │   └── my-font.otf
  │   └── my-font.ttf
  ├── images
  │   └── my-image.jpg
  ├── index.js

Note: All b-ber theme names must be prefixed with b-ber-theme, i.e., b-ber-theme-custom, b-ber-theme-example.

1. Create _settings.scss

List all the variables and mixins that you want to be made available to the end-user.

// _settings.scss

$black: #222;
$white: #fff;

2. Create application.scss

Create an entry-point SCSS file and add the core theme styles. You can import other files or libraries as you like and b-ber will include these during compilation.

// application.scss

@import 'settings';

body {
    font-size: 1em;
}

3. Create index.js

index.js must list all of the assets that your theme is using. The entry property must be the path to application.scss.

You can copy, paste, and modify the code below for your own index.js file:

// index.js

const path = require('path')

module.exports = {
    // Required, must be a unique name
    name: 'b-ber-theme-custom',        

    // An absolute path to the main SCSS file
    entry: path.resolve('themes', 'b-ber-theme-custom', 'application.scss'),

    // An array of the fonts used in the theme or an empty array
    fonts: ['my-font.otf', 'my-font.ttf'],

    // An array of the images used in the theme or an empty array
    images: ['my-image.jpg']
}

4. Include your Theme in the themes Directory

Add the new theme to the b-ber project's themes directory.

my-project
  ├── _project
  ├── themes
  │   └── b-ber-theme-custom
  │       ├── _settings.scss
  │       ├── application.scss
  │       ├── fonts
  │       │   ├── my-font.otf
  │       │   └── my-font.ttf
  │       ├── images
  │       │   └── my-image.jpg
  │       └── index.js
  ...