Serif

Theme: b-ber-theme-serif

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.

Variables

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

Variable	Default	Explanation
$debug	false	Add a debug grid to the XHTML files to verify vertical rhythm
$text-indent	true	Should new paragraphs should be indented. Does not indent paragraphs following headers.
$vertical-space	false	Should there be space vertical space between each paragraph
$font-size-base	1em	Must be in ems. This is the base font size of the text, meaning that paragraphs will all be this font size
$line-height-base	1.3	Must be a float value.
$font-scale	minor-second	The meter of vertical rhythm, based on modular-scale
*-image-height	4/5	The number of lines that a small image in the flow of the text should take up

Mixins

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

break

Add media queries.

Input (SCSS)

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

Output

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

Parameters

mobile, tablet, desktop

Font-face

Short-hand for CSS @font-face declaration.

Input (SCSS)

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

Output (CSS)

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

Parameters

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

one-line, two-lines, ...

Add vertical space.

Input (SCSS)

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

Output (CSS)

section {
    padding-top: 1.3em;
}

Parameters

A single integer, which 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

Internally, this creates a list which would appear as the following:

$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 we pass 0 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 also take a single argument for the base size:

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

one-em, two-ems, ...

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

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

Input (SCSS)

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

Output (CSS)

section {
    padding-left: 2em;
}

padding

A short-hand for assigning an elements margin or padding.

Input (SCSS)

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

Output (CSS)

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

Parameters

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 do the calculations against.