SassDoc: o-footer-services

oFooterServices(opts, include-base-styles)

Outputs all features and styles available for o-footer-services.

Links

• "oFooterServices" mixin on Github

oOverlayContentClose

Overlay close button styles.

The output does not include a class definition, and should be wrapped in a selector.

Example

Output button styles

.my-close-button {
    @include oOverlayContentClose();
}

Links

• "oOverlayContentClose" mixin on Github

oTypographyGetScale(index, font)

Returns a single list on the scale

Returns

Links

• "oTypographyGetScale" function on Github

oTypographyMaxLineWidth(optimal-characters-per-line)

Returns a maximum line width based on the given scale

Returns

Links

• "oTypographyMaxLineWidth" function on Github

oTypographyGetFontFamily(type)

Get font family for o-typography type i.e "sans", "serif", or "display". Note: we do not recommend setting font-family this way. Instead use mixins oTypographySans, oTypographySerif, oTypographyDisplay without any arguments.

Returns

Links

• "oTypographyGetFontFamily" function on Github

oTypographyHeading(level)

Output styles for page headings.

Examples

Example #1

heading level 1 styles.

h1 {
	@include oTypographyHeading($level: 1);
}

Example #2

heading level 5 styles.

h5 {
	@include oTypographyHeading($level: 5);
}

Links

• "oTypographyHeading" mixin on Github

oTypographyBody

Body text styles

Links

• "oTypographyBody" mixin on Github

oTypographySub

Subscript text

Links

• "oTypographySub" mixin on Github

oTypographySuper

Superscript text

Links

• "oTypographySuper" mixin on Github

oTypographyLink(...)

Output link styles.

Examples

Example #1

the styles for a standard link.

.my-link {
	@include oTypographyLink();
}

Example #2

a custom, claret coloured link to go on the default background colour (paper for the core brand, white otherwise).

.my-claret-link {
	@include oTypographyLink($theme: (
		'base': 'claret',
		'hover': 'claret-30',
	));
}

Example #3

a custom, lemon coloured link to go on a slate background.

.my-inverse-link {
	@include oTypographyLink($theme: (
		'base': 'lemon',
		'hover': 'lemon-30',
		'context': 'slate',
	));
}

Links

• "oTypographyLink" mixin on Github

oTypographyList(type, include-base-styles)

Output styles for lists. Styles child li elements. Apply to a containing list element such as ul or ol. Does not output font styles, these are inherited (@see oTypographyBody).

Examples

Example #1

the styles for an unordered list.

.my-unordered-list {
	@include oTypographyList('unordered');
}

Example #2

the styles for an ordered and unordered list, sharing base list styles.

.my-list {
	@include oTypographyList();
}

.my-list--ordered {
	@include oTypographyList('ordered', $include-base-styles: false);
}

.my-list--unordered {
	@include oTypographyList('unordered', $include-base-styles: false);
}

Links

• "oTypographyList" mixin on Github

oTypographyFooter

Style for <footer> tags

Links

• "oTypographyFooter" mixin on Github

oTypographyCaption

Styles for photo or video credit/caption

Links

• "oTypographyCaption" mixin on Github