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 and only covers the non-standard variables listed the _settings.scss file only.

Variable	Default	Explanation
$debug	false	This adds a debug grid to the XHTML files to verify vertical rhythm.
$text-indent	true	This determines whether paragraphs be indented. This does not apply to paragraphs that follow headers, which are not indented.
$vertical-space	false	This establishes whether there should be vertical space between paragraphs.
$font-size-base	1em	This establishes the base font size of the text and must be set in ems.
$line-height-base	1.3	This establishes the base line-height and must be set as a float value.
$font-scale	minor-second	This established the meter of the vertical rhythm, which is based on a modular-scale.
*-image-height	4/5	This establishes the number of lines that a thubmail will occupy in the flow of the text.

Mixins

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

break

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

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

This mixin can be used 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, ...

This mixin adds vertical space between elements.

Input (SCSS)

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

Output (CSS)

section {
    padding-top: 1.3em;
}

Parameters

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()

one-em, two-ems, ...

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()

Input (SCSS)

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

Output (CSS)

section {
    padding-left: 2em;
}

padding

This mixin can be used for defining an element's 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 make the calculations.