Themes

b-ber comes packaged with two themes, serif and sans. A user can activate a theme on the command line using the bber theme command.

When a theme is activated, it does three things:

1. Updates the config.yml file with the new theme name
2. Copy over any assets in the theme directory (sprites, fonts, etc) to the appropritate top-level directory
3. Create a _settings.scss and _overrides.scss in the _project/_stylesheets/<theme-name> directory

If _settings.scss or _overrides.scss already exist in the _project/_stylesheets/<theme-name> directory, b-ber will not overwrite them.

Features

Syntax Highlighting

b-ber parses code blocks using highlight.js, and the default b-ber themes (serif and sans) come packaged with highlight.js CSS files. The default code highlighting theme is tomorrow, and cannot currently be changed by user settings.

When creating custom themes, it's necessary to include styles for syntax highlighting in the theme's SCSS.

Setting the Theme

b-ber Comes with a serif and sans-serif theme. Change them using the theme command on the CLI.

$ bber theme list
  b-ber info The following themes are available:
    ○ serif
    ○ sans
    ✓ tc

$ bber theme set sans
  b-ber info Updated theme to sans

Using the _settings.scss File

The _settings.scss file contains a list of variables for adjusting the appearance of the theme.

// _settings.scss
$white: #fff    !default;
$black: #222    !default;
$grey: #eee     !default;
$info: #5050c5  !default;

Update the variables to customize the theme.

Using the _overrides.scss File

b-ber guarantees that the styles _overrides.scss will be the last entries to the bundled application.css that is injected into the XHTML. Add any custom overrides here.

// _overrides.scss
$white: #eee;