General

variables

font-size--base

$font-size--base: 1rem;

Description

The base font size, which should translate to 16 pixels via the root em size.

font-size--large

$font-size--large: (1.125 * $font-size--base);

Description

Large reading text is usually defined as 18.66px. I’m defining it as 18px.

font-weight--light

$font-weight--light: 300;

Description

The weight 300 maps to light in the Muli font.

font-weight--bold

$font-weight--bold: 700;

Description

The weight 700 maps to bold, which is common, in the Muli font.

font-color--base

$font-color--base: #222;

Description

Use a slightly lighter than black color for the font color base.

font-families--prime

$font-families--prime: 'Muli', sans-serif;

Description

The prime, or main, font families used for display and reading text.

grid--column-width

$grid--column-width: 60px;

Description

The width of a single column, sans gutter.

grid--gutter-width

$grid--gutter-width: ($grid--column-width / 3);

Description

The width of a single gutter, which is a third of a column, or 20 pixels.

Used by

grid--unit

$grid--unit: ($grid--column-width + $grid--gutter-width);

Description

A grid unit is the addition of a column and a gutter. In this case, a grid unit is 80 pixels.

grid--leading

$grid--leading: 22px;

Description

Set the leading of the grid to the line-height of the Muli font — 22 pixels.

width--phone-breakpoint

$width--phone-breakpoint: (5 * $grid--unit);

Description

The phone breakpoint is 5 grid units, or 400 pixels.

Used by

width--tablet-breakpoint

$width--tablet-breakpoint: (9 * $grid--unit);

Description

The tablet breakpoint is 9 grid units, or 720 pixels.

Used by

width--desktop-breakpoint

$width--desktop-breakpoint: (12 * $grid--unit);

Description

The desktop breakpoint is 12 grid units, or 960 pixels.

Used by

height--desktop-nav

$height--desktop-nav: (3.875 * $grid--leading);

Description

Height of desktop nav.

color--logo-column

$color--logo-column: rgb(241, 122, 172);

Description

The color of the column in the logo.

mixins

phone-based-css

@mixin phone-based-css() { ... }

Description

Use 419px as the maximum width breakpoint for the phone.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include phone-based-css {
   max-width: $width--phone-breakpoint;
}

Requires

Author

  • Roy Vanegas

mobile-based-css

@mixin mobile-based-css() { ... }

Description

Set the maximum bound of a mobile device to 739px.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include mobile-based-css {
   width: $width--phone-breakpoint;
}

Requires

Author

  • Roy Vanegas

desktop-based-css

@mixin desktop-based-css() { ... }

Description

Set the bounds of the desktop between 740px and 979px.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include desktop-based-css {
   width: $width--tablet-breakpoint;
}

Requires

Author

  • Roy Vanegas

csss