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. Add the core theme styles

Create an entry-point SCSS file for the 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:

module.exports = {
    name: 'b-ber-theme-custom',               // Required, must be a unique name
    entry: './application.scss',    // A relative or absolute path to the main SCSS file
    fonts: [                        // An array of the fonts used in the theme or an empty array
        'my-font.otf',
        'my-font.ttf',
    ]
    images: [                       // An array of the images used in the theme or an empty array
        '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
  ...