Colors

variables

$color-grayScale-0

$color-grayScale-0: #000000 !default;

Type

Color

$color-grayScale-1

$color-grayScale-1: #151515 !default;

Type

Color

$color-grayScale-2

$color-grayScale-2: #222222 !default;

Type

Color

$color-grayScale-3

$color-grayScale-3: #333333 !default;

Type

Color

$color-grayScale-4

$color-grayScale-4: #444444 !default;

Type

Color

$color-grayScale-5

$color-grayScale-5: #555555 !default;

Type

Color

$color-grayScale-6

$color-grayScale-6: #666666 !default;

Type

Color

$color-grayScale-7

$color-grayScale-7: #7a7a7a !default;

Type

Color

$color-grayScale-8

$color-grayScale-8: #888888 !default;

Type

Color

$color-grayScale-9

$color-grayScale-9: #9f9f9f !default;

Type

Color

$color-grayScale-a

$color-grayScale-a: #aaaaaa !default;

Type

Color

$color-grayScale-b

$color-grayScale-b: #bbbbbb !default;

Type

Color

$color-grayScale-c

$color-grayScale-c: #cccccc !default;

Type

Color

$color-grayScale-d

$color-grayScale-d: #dddddd !default;

Type

Color

$color-grayScale-e

$color-grayScale-e: #eeeeee !default;

Type

Color

$color-grayScale-f5

$color-grayScale-f5: #f5f5f5 !default;

Type

Color

$color-grayScale-f0

$color-grayScale-f0: #f0f0f0 !default;

Type

Color

$color-grayScale-f

$color-grayScale-f: #ffffff !default;

Type

Color

Containers

placeholders

%container-styles

Since 1.2.0

%container-styles { ... }

Description

This placeholder class controls the style of content containers across the entire theme. Use them if you want to mimic the behavior of the .content-container class in a custom page template. You may also add or override styles for all containers by repeating the placeholder in your Sass file and adjusting the CSS to your needs. Do not use this method to override styles which can be controlled by variables, such as padding and width.

Example

Tell your custom class to behave like a container.

.yourContainerClass {
	@extend %content-container;
}

Override the centered container style and float containers left instead.

%container-styles {
	float: left;
}

Requires

[variable] container-SM
[variable] container-MD
[variable] container-LG
[variable] grid-container-padding
[variable] grid-container-padding-largeScreen

Author

Ashley Kolodziej

variables

$grid-container-padding

Since 1.0

$grid-container-padding: 35px 20px 0 !default;

Description

Controls padding on containers for small screens.

Used by

[placeholder] container-styles

$grid-container-padding-largeScreen

Since 1.0

$grid-container-padding-largeScreen: 60px 20px 0 !default;

Description

Controls padding on containers for large screens.

Used by

[placeholder] container-styles

$grid-row-margin

Since 1.0

$grid-row-margin: 0 -20px !default;

Description

Controls padding on containers for large screens.

Used by

[placeholder] row-styles

$container-SM

Since 1.0

$container-SM: 750px !default;

Description

Controls width of content container beginning at the sm breakpoint.

Used by

[placeholder] container-styles

$container-MD

Since 1.0

$container-MD: 970px !default;

Description

Controls width of content container beginning at the md breakpoint.

Used by

[placeholder] container-styles

$container-LG

Since 1.0

$container-LG: 1170px !default;

Description

Controls width of content container beginning at the lg breakpoint.

Used by

[placeholder] container-styles

Grid

placeholders

%row-styles

Since 1.2.0

%row-styles { ... }

Description

This placeholder class controls the style of grid rows across the entire theme. When using regular grid classes, you should use this placeholder class to align the grid items properly.

Do not use this placeholder for margin classes. Use %col-margin-parent instead.

Your custom class can't have a width for this to work properly - it must be width: auto.

Example

Realign child grid items.

.gridContainer {
	@extend %row-styles;
}

Requires

[variable] grid-row-margin

Author

Ashley Kolodziej

%col

Since 1.0

%col { ... }

Description

Friendly placeholder classes for the grid. Use these in custom themes when you want grid functionality, but have more to add to a custom class. Available classes follow the pattern below.

Example

Create a box that is 1/4 the width of the parent container at all sizes.

.yourClass {
	@extend %col-quarter;
}

Create a box that is 1/3 the width of the parent container at all sizes.

.yourClass {
	@extend %col-third;
}

Create a box that is 1/2 the width of the parent container at all sizes.

.yourClass {
	@extend %col-half;
}

Create a box that is 2/3 the width of the parent container at all sizes.

.yourClass {
	@extend %col-two-third;
}

Create a box that is 3/4 the width of the parent container at all sizes.

.yourClass {
	@extend %col-three-quarter;
}

Requires

[variable] grid-number-columns

Author

Ashley Kolodziej

variables

$grid-number-columns

Since 1.2.0

$grid-number-columns: 12 !default;

Description

Determines the number of columns in the grid. Must be divisible by both 3 and 4.

Used by

[placeholder] col

Author

Ashley Kolodziej

$grid-margin-width

Since 1.2.0

$grid-margin-width: 2.6 !default;

Description

Determines the width of margins on grid items if using $grid-margins.

Requires

[variable] grid-margins

Author

Ashley Kolodziej

$grid-breakpoints

Since 1.2.0

$grid-breakpoints: "xs", "sm", "md", "lg" !default;

Description

Choose which breakpoints you want to create grid classes for.

Small (sm) and medium (md) are required, everything else is optional.

Author

Ashley Kolodziej

$grid-margins

Since 1.2.0

$grid-margins: true !default;

Description

Whether or not to generate margin classes. Margin classes are a custom addition to our grid system that are meant to make it easier to create grid items that need to use both the padding and margin elements. Optional.

Used by

[variable] grid-margin-width

Author

Ashley Kolodziej

$grid-push

Since 1.2.0

$grid-push: true !default;

Description

Whether or not to generate push classes. See Bootstrap's ordering documentation for details on how these are used. Optional.

Author

Ashley Kolodziej

$grid-pull

Since 1.2.0

$grid-pull: true !default;

Description

Whether or not to generate pull classes. See Bootstrap's ordering documentation for details on how these are used. Optional.

Author

Ashley Kolodziej

$grid-offset

Since 1.2.0

$grid-offset: true !default;

Description

Whether or not to generate push classes. See Bootstrap's offset documentation for details on how these are used. Optional.

Author

Ashley Kolodziej

$grid-classes

Since 1.2.0

$grid-classes: true !default;

Description

Whether or not to print the numeric grid classes (.col-sm-5). Optional. Note that friendly classes (.col-quarter, .col-sm-quarter) will always print.

Author

Ashley Kolodziej

Helpers

placeholders

%equal-height-parent

Since 1.0

%equal-height-parent { ... }

Description

Equal Height Parent

Requires

[placeholder] equal-height-child

Used by

[placeholder] equal-height-child

Author

Ashley Kolodziej

%equal-height-child

Since 1.0

%equal-height-child { ... }

Description

Equal Height Child

Requires

[placeholder] equal-height-parent

Used by

[placeholder] equal-height-parent

TODO's

Change to mixin to allow breakpoint change

Author

Ashley Kolodziej

variables

[private] $zIndex-1

Since 1.0

$zIndex-1: 100;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-2

Since 1.0

$zIndex-2: 200;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-3

Since 1.0

$zIndex-3: 300;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-4

Since 1.0

$zIndex-4: 400;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-5

Since 1.0

$zIndex-5: 500;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-6

Since 1.0

$zIndex-6: 600;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-7

Since 1.0

$zIndex-7: 700;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-8

Since 1.0

$zIndex-8: 800;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-9

Since 1.0

$zIndex-9: 900;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. Based off of Medium's z-index scale.

[private] $zIndex-10

Since 1.0

$zIndex-10: 1000;

Description

Part of a z-index scale which relies on variables to ensure layers don't collide. This is the final variable in the scale and will always take priority. Based off of Medium's z-index scale.

Example

A mobile menu open state.

.primaryNav-open {
	z-index: $zIndex-10;
}

Media Queries

variables

$MQs

Since 1.0

$MQs: true !default;

Description

Whether or not to print media queries in the current partial. Use false to tell media queries not to print. Most useful for the IE stylesheet, or in a print stylesheet where you may only want to use mobile styling.

$XS

Since 1.0

$XS: 500px !default;

Description

The size at which styles using the xs breakpoint should start.

$SM

Since 1.0

$SM: 768px !default;

Description

The size at which styles using the sm breakpoint should start.

$MD

Since 1.0

$MD: 992px !default;

Description

The size at which styles using the md breakpoint should start.

$LG

Since 1.0

$LG: 1200px !default;

Description

The size at which styles using the lg breakpoint should start.

Typography - Base

variables

$fontFamily-base

Since 1.0

$fontFamily-base: "TiemposText", Georgia, serif !default;

Description

Sets the default font family used for <p>, <ul>, and other basic HTML tags throughout the site.

$fontFamily-sansSerif

Since 1.0

$fontFamily-sansSerif: "Benton", Helvetica, sans-serif !default;

Description

Sets your preferred sans-serif font family stack. Use in your custom CSS.

Example

Style some metadata.

.news-meta {
	font-family: $fontFamily-sansSerif;
}

$fontFamily-monospace

Since 1.0

$fontFamily-monospace: Consolas, "Liberation Mono", Courier, monospace !default;

Description

Sets your preferred monospace font family stack. Use in your custom CSS.

Example

Style something to look like code.

.code-example {
	font-family: $fontFamily-monospace;
}

$fontSize-base

Since 1.0

$fontSize-base: 18px !default;

Description

Sets the default font size used for the site. By default, this also sets the size for %font-medium.

$lineHeight-base

Since 1.0

$lineHeight-base: 1.6 !default;

Description

Sets the default line height used for the site.

By default, this also sets the size for %font-medium.

$fontMargin-base

Since 1.0

$fontMargin-base: 0 0 25px 0 !default;

Description

Sets the default margin used for the site.

By default, this also sets the size for %font-medium.

<h1> Styles

placeholders

%font-jumbo

Since 1.0

%font-jumbo { ... }

Description

A placeholder that controls <h1> tag styling. Useful for when you need the look of an <h1> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h1> tags and things that look like <h1> tags.

Example

Make a banner title (<h3 class="banner-title">) look like an <h1>.

.banner-title {
	@extend %font-jumbo;
}

Give all <h1> tags a special font and fall back to the regular heading font if it fails to load.

%font-jumbo {
	// Additional <h1> styles.
	font-family: "My Special Font", $fontFamily-heading;
}

Requires

[variable] fontMargin-jumbo
[variable] fontSize-jumbo
[variable] lineHeight-jumbo

variables

$fontSize-jumbo

Since 1.0

$fontSize-jumbo: 49px !default;

Description

Sets the font size used for the %font-jumbo class and placeholder.

Affects the <h1> tag.

Used by

[placeholder] font-jumbo

$lineHeight-jumbo

Since 1.0

$lineHeight-jumbo: 1.05 !default;

Description

Sets the line height used for the %font-jumbo class and placeholder.

Affects the <h1> tag.

Used by

[placeholder] font-jumbo

$fontMargin-jumbo

Since 1.0

$fontMargin-jumbo: 0 0 25px 0 !default;

Description

Sets the margin used for the %font-jumbo class and placeholder.

Affects the <h1> tag.

Used by

[placeholder] font-jumbo

<h2> Styles

placeholders

%font-largest

Since 1.0

%font-largest { ... }

Description

A placeholder that controls <h2> tag styling. Useful for when you need the look of an <h2> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h2> tags and things that look like <h2> tags.

Example

Make a banner title (<h3 class="banner-title">) look like an <h2>.

.banner-title {
	@extend %font-largest;
}

Set a special font weight on all <h2> tags.

%font-largest {
	// Additional <h2> styles.
	font-weight: 300;
}

Requires

[variable] fontMargin-largest
[variable] fontSize-largest
[variable] lineHeight-largest

variables

$fontSize-largest

Since 1.0

$fontSize-largest: 37px !default;

Description

Sets the font size used for the %font-largest class and placeholder.

Affects the <h2> tag.

Used by

[placeholder] font-largest

$lineHeight-largest

Since 1.0

$lineHeight-largest: 1.15 !default;

Description

Sets the line height used for the %font-largest class and placeholder.

Affects the <h2> tag.

Used by

[placeholder] font-largest

$fontMargin-largest

Since 1.0

$fontMargin-largest: 0 0 27px 0 !default;

Description

Sets the margin used for the %font-largest class and placeholder.

Affects the <h2> tag.

Used by

[placeholder] font-largest

<h3> Styles

placeholders

%font-larger

Since 1.0

%font-larger { ... }

Description

A placeholder that controls <h3> tag styling. Useful for when you need the look of an <h3> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h3> tags and things that look like <h3> tags.

Example

Make a <h2 class="myCustomClass"> look like an <h3>.

.myCustomClass {
	@extend %font-larger;
}

Set a special font weight on all <h3> tags.

%font-larger {
	// Additional <h3> styles.
	font-weight: 300;
}

Requires

[variable] fontMargin-larger
[variable] fontSize-larger
[variable] lineHeight-larger

variables

$fontSize-larger

Since 1.0

$fontSize-larger: 28px !default;

Description

Sets the font size used for the %font-larger class and placeholder.

Affects the <h3> tag.

Used by

[placeholder] font-larger

$lineHeight-larger

Since 1.0

$lineHeight-larger: 1.25 !default;

Description

Sets the line height used for the %font-larger class and placeholder.

Affects the <h3> tag.

Used by

[placeholder] font-larger

$fontMargin-larger

Since 1.0

$fontMargin-larger: $fontMargin-base !default;

Description

Sets the margin used for the %font-larger class and placeholder.

Affects the <h3> tag.

Used by

[placeholder] font-larger

<h4> Styles

placeholders

%font-large

Since 1.0

%font-large { ... }

Description

A placeholder that controls <h4> tag styling. Useful for when you need the look of an <h4> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h4> tags and things that look like <h4> tags.

Example

Make a <h2 class="myCustomClass"> look like an <h4>.

.myCustomClass {
	@extend %font-large;
}

Set a special font weight on all <h4> tags.

%font-large {
	// Additional <h4> styles.
	font-weight: 300;
}

Requires

[variable] fontMargin-large
[variable] fontSize-large
[variable] lineHeight-large

variables

$fontSize-large

Since 1.0

$fontSize-large: 21px !default;

Description

Sets the font size used for the %font-large class and placeholder.

Affects the <h4> tag.

Used by

[placeholder] font-large

$lineHeight-large

Since 1.0

$lineHeight-large: 1.3 !default;

Description

Sets the line height used for the %font-large class and placeholder.

Affects the <h4> tag.

Used by

[placeholder] font-large

$fontMargin-large

Since 1.0

$fontMargin-large: $fontMargin-base !default;

Description

Sets the margin used for the %font-large class and placeholder.

Affects the <h4> tag.

Used by

[placeholder] font-large

<h5> Styles

placeholders

%font-medium

Since 1.0

%font-medium { ... }

Description

A placeholder that controls <h5> tag styling. Useful for when you need the look of an <h5> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h5> tags and things that look like <h5> tags.

Example

Make a <h2 class="myCustomClass"> look like an <h5>.

.myCustomClass {
	@extend %font-medium;
}

Set a special font weight on all <h5> tags.

%font-medium {
	// Additional <h5> styles.
	font-weight: 300;
}

Requires

[variable] fontMargin-medium
[variable] fontSize-medium
[variable] lineHeight-medium

variables

$fontSize-medium

Since 1.0

$fontSize-medium: $fontSize-base !default;

Description

Sets the font size used for the %font-medium class and placeholder.

Affects the <h5> tag. By default, will use the same base font size as the site.

Used by

[placeholder] font-medium

$lineHeight-medium

Since 1.0

$lineHeight-medium: 1.4 !default;

Description

Sets the line height used for the %font-medium class and placeholder.

Affects the <h5> tag. By default, will use the same base line height as the site.

Used by

[placeholder] font-medium

$fontMargin-medium

Since 1.0

$fontMargin-medium: $fontMargin-base !default;

Description

Sets the margin used for the %font-medium class and placeholder.

Affects the <h5> tag. By default, will use the same base margin as the site.

Used by

[placeholder] font-medium

<h6> Styles

placeholders

%font-small

Since 1.0

%font-small { ... }

Description

A placeholder that controls <h6> tag styling. Useful for when you need the look of an <h6> but can't use the markup due to semantics or not being able to change what you get.

You can also use override this placeholder to create global changes to all <h6> tags and things that look like <h6> tags.

Example

Make a <h2 class="myCustomClass"> look like an <h6>.

.myCustomClass {
	@extend %font-small;
}

Set a special font weight on all <h6> tags.

%font-small {
	// Additional <h6> styles.
	font-weight: 300;
}

Requires

[variable] fontMargin-small
[variable] fontSize-small
[variable] lineHeight-small

variables

$fontSize-small

Since 1.0

$fontSize-small: 16px !default;

Description

Sets the font size used for the %font-small class and placeholder.

Affects the <h6> tag.

Used by

[placeholder] font-small

$lineHeight-small

Since 1.0

$lineHeight-small: 1.5 !default;

Description

Sets the line height used for the %font-small class and placeholder.

Affects the <h6> tag.

Used by

[placeholder] font-small

$fontMargin-small

Since 1.0

$fontMargin-small: $fontMargin-base !default;

Description

Sets the margin used for the %font-small class and placeholder.

Affects the <h6> tag.

Used by

[placeholder] font-small

Typography - Other

placeholders

%font-smaller

Since 1.0

%font-smaller { ... }

Description

This placeholder doesn't affect anything by default, but has some use when you need styles that should be smaller than an <h6>.

Example

Set styles for the .meta class.

.meta {
	@extend %font-smaller;
}

Set additional typography styles that look good at this size.

%font-smaller {
	// Additional %font-smaller styles.
	text-transform: uppercase;
	letter-spacing: .05em;
}

Requires

[variable] fontMargin-smaller
[variable] fontSize-smaller
[variable] lineHeight-smaller

%font-smallest

Since 1.0

%font-smallest { ... }

Description

This placeholder doesn't affect anything by default, but has some use when you need styles that should be smaller than an <h6>.

Example

Set styles for the .category class.

.category {
	@extend %font-smallest;
}

Set additional typography styles that look good at this size.

%font-smallest {
	// Additional %font-smallest styles.
	font-style: italic;
}

Requires

[variable] fontMargin-smallest
[variable] fontSize-smallest
[variable] lineHeight-smallest

%font-micro

Since 1.0

%font-micro { ... }

Description

This placeholder doesn't affect anything by default, but has some use when you need styles that should be smaller than an <h6>.

Example

Set styles for the .hint class.

.hint {
	@extend %font-micro;
}

Set additional typography styles that look good at this size.

%font-micro {
	// Additional %font-micro styles.
	text-transform: uppercase;
}

Requires

[variable] fontMargin-micro
[variable] fontSize-micro
[variable] lineHeight-micro

variables

$fontSize-micro

Since 1.0

$fontSize-micro: 11px !default;

Description

Sets the font size used for the %font-micro class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-micro

$fontSize-smallest

Since 1.0

$fontSize-smallest: 12px !default;

Description

Sets the font size used for the %font-smallest class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smallest

$fontSize-smaller

Since 1.0

$fontSize-smaller: 14px !default;

Description

Sets the font size used for the %font-smaller class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smaller

$lineHeight-micro

Since 1.0

$lineHeight-micro: $lineHeight-base !default;

Description

Sets the line height used for the %font-micro class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-micro

$lineHeight-smallest

Since 1.0

$lineHeight-smallest: $lineHeight-base !default;

Description

Sets the line height used for the %font-smallest class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smallest

$lineHeight-smaller

Since 1.0

$lineHeight-smaller: $lineHeight-base !default;

Description

Sets the line height used for the %font-smaller class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smaller

$fontMargin-micro

Since 1.0

$fontMargin-micro: $fontMargin-base !default;

Description

Sets the margin used for the %font-micro class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-micro

$fontMargin-smallest

Since 1.0

$fontMargin-smallest: $fontMargin-base !default;

Description

Sets the margin used for the %font-smallest class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smallest

$fontMargin-smaller

Since 1.0

$fontMargin-smaller: $fontMargin-base !default;

Description

Sets the margin used for the %font-smaller class and placeholder.

Does not affect any HTML tag by default.

Used by

[placeholder] font-smaller