Users can modify any of the settings in _project/serif/_settings.scss, and additional styling should take place in the _project/serif/_overrides.scss file.

This page covers instructions on using the variables and mixins made available by the b-ber-theme-serif theme.

The following list is not exhaustive and only covers the non-standard variables listed the _settings.scss file only.

The following list is not exhaustive and only shows the most commonly used mixins.

This mixin allows for the inclusion of media queries in the SCSS.

@include break('mobile') {
    p {
        color: blue;
    }
}

@media only screen and (min-width: 320px) and (max-width: 680px) {
    p {
        color: blue;
    }
}

mobile, tablet, desktop

This mixin can be used for CSS @font-face declaration.

@include font-face('MyFont', 'my-font', ('otf'));

@font-face {
    font-family: "MyFont";
    src: url("../fonts/my-font.otf");
    font-weight: 400;
    font-style: normal;
}

<font-name>, <file-name>, <formats>, <font-weight>, <font-style>

This mixin adds vertical space between elements.

section {
    padding-top: one-line(0);
}

section {
    padding-top: 1.3em;
}

This single integer represents the base size used to calculate the resulting measurement. For example, the following is in the _settings.scss:

$font-size-base: 1em;
$line-height-base: 1.3;

$font-scale: 'minor-second'; // A ratio to calculate steps in font-size

This generates a list which would appear in the following sizes:

$font-sizes: (
    2: 1.138em      // The next step on our font scale
    1: 1.067        // The next step on our font scale
    0: 1em,         // Our base font size that we defined in $font-size-base
    -1: 0.937em     // The previous step using our selected ratio
);

When 0 is passed into one-line it calculates the line-height for $font-sizes(0), or 1em:

1em * 1.3 = 1.3em

Using one-line(1) makes the same calculation using the next step in the scale, which would be 1.067.

There is no upper or lower limit to the sizes that can be entered:

section {
    padding-top: one-line(1000);
}

For simplicity the following mixins are also available, which take a single argument for the base size:

• two-lines()
• three-lines()
• four-lines()
• five-lines()

This mixin is simlilar to the n-lines mixin but used for horizontal space. There are also the following methods available:

• two-ems()
• three-ems()
• four-ems()
• five-ems()

section {
    padding-left: two-ems(0);
}

section {
    padding-left: 2em;
}

This mixin can be used for defining an element's margin or padding.

section {
    padding: @include padding(1, 1, 1, 1, 0) ;
}

section {
    padding: 1em 1.3em 1em 1.3em;
}

This is the same as CSS padding/margin declarations (top, right, bottom, left), with an extra number as the last parameter for the font-size base to make the calculations.