Adding custom styles

Adding custom styles

Custom styles can be added by overriding the selected theme's defaults.

When running bber build, a _settings.scss and an _overrides.scss file are created and added to _project/_stylesheets/<theme name>. The currently selected theme can be overridden by changing variables in the newly generated _settings.scss file and additional SCSS can be added to _overrides.scss.

_settings.scss

_settings.scss contains the theme's default variables which can be changed to customize some basic styles like font-family and text color. An example of an _settings.scss file would include:

$white: #fff    !default;
$black: #222    !default;
$grey: #eee     !default;
$info: #5050c5  !default;

_overrides.scss

_overrides.scss is a blank file where custom styles can be added to the project.

Customizing the default themes

The themes that come bundled with b-ber — b-ber-theme-serif and b-ber-theme-sans — include a number of useful SCSS variables and mixins for use in _settings.scss and _overrides.scss.

Some of the available mixins include:

• break for media queries
• font-face for including fonts
• n-lines and n-ems for vertical and horizontal spacing, respectively. The default b-ber themes use modular-scale for vertical rhythm.
• padding for controlling element padding in relation to the vertical rhythm.

Detailed information about each of the mixins and variables can be found on the serif page or in the source code.

Adding classes to directives and styles in _overrides.scss

Custom classes can be added to b-ber directives with the corrsponding styles placed in the _overrides.scss file.

Markdown

::: chapter:chapter-ID classes:"class-one class-two"

CSS in _overrides.scss

.class-one  {
// styles
}

.class-two  {
// styles
}

Customizing styles for specific builds

It may be necessary to include or omit some styles depending on the output format. Format-specific styles can be managed by wrapping SCSS in a conditional statement that tests the global $build variable against the current build type:

// _overrides.scss

@if $build == 'epub' {
    body {
        color: black;
    }
}
@if $build == 'reader' {
    body {
        color: purple;
    }
}
@if $build == 'web' {
    body {
        color: blue;
    }
}
@if $build == 'pdf' {
    body {
        color: blue;
    }
}

In the above example, the EPUB body font color would be black, the Reader body font color would be purple, and the Web body font color would be blue.