SassDoc: o-editorial-typography

oEditorialTypography(opts)

Output oEditorialTypography features.

Examples

Example #1

all o-editorial-typography css classes.

@include oEditorialTypography();

Example #2

a granular selection of o-editorial-typography css classes. See the README for a full list of options.

@include oEditorialTypography((
	'body': true,
	'headings': (1, 2, 3),
	'lists': ('unordered'),
));

Links

• "oEditorialTypography" mixin on Github

oEditorialTypographyBody(opts)

Output editorial styles for body text.

Example

p {
	@include oEditorialTypographyBody();
}

Links

• "oEditorialTypographyBody" mixin on Github

oEditorialTypographyList(type, include-base-styles)

Output editorial 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 oEditorialTypographyBody).

Wraps an o-typography mixin so the two may diverge (@see oTypographyList)

Examples

Example #1

the styles for an unordered list.

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

Example #2

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

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

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

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

Links

• "oEditorialTypographyList" mixin on Github

oEditorialTypographyCaption

Output styles for captions, e.g. for photo or video credit/caption.

Links

• "oEditorialTypographyCaption" mixin on Github

oEditorialTypographyHeadline

Output styles for large headline text. This style has high visual prominence.

Alternatively, you may prefer to use the level one heading style.

Links

• "oEditorialTypographyHeadline" mixin on Github

oEditorialTypographyHeading(level, opts)

Output styles for editorial page heading copy.

Links

• "oEditorialTypographyHeading" mixin on Github

oEditorialTypographyStandfirst

Output styles for editorial standfirst.

Links

• "oEditorialTypographyStandfirst" mixin on Github

oEditorialTypographyByline

Output styles for the editorial byline.

Links

• "oEditorialTypographyByline" mixin on Github

oEditorialTypographyTimestamp

Output styles for a timestamp. Font family and size are inherited from the parent element so this mixin may be used in multiple contexts. For example timestamps in a comment section or a byline.

Links

• "oEditorialTypographyTimestamp" mixin on Github

oEditorialTypographyTag(type)

Output specific tag styles, such as author and topic tags, or styles for other tags of similar appearance. Font size is inherited from the parent element, for example if a tag is used within a byline it will be the same size as the byline text.

Example

a topic and author tag.

.my-topic-tag {
	@include oEditorialTypographyTag('topic');
}

.my-author-tag {
	@include oEditorialTypographyTag('author');
}

Links

• "oEditorialTypographyTag" mixin on Github

oEditorialTypographyDecorated(align, include-base-styles)

Output styles to decorate typography with a short, thick underline. Styles after pseudo element.

Examples

Example #1

a header.

.decorated-header {
	@include oEditorialTypographyDecorated();
}

Example #2

a centred header.

.centered-decorated-header {
	text-align: center;
	@include oEditorialTypographyDecorated($align: 'center');
}

Example #3

a centred and non-centred header without duplicating css.

.decorated-header {
	@include oEditorialTypographyDecorated();
}
.decorated-header--center {
	text-align: center;
	@include oEditorialTypographyDecorated($align: 'center', $include-base-styles: false);
}

Links

• "oEditorialTypographyDecorated" mixin on Github

o-editorial-typography-load-fonts

If true, include fonts from o-fonts.

Defaults to the value of $o-typography-load-fonts. If you are using o-typography and have already indicated not to load fonts, preferring to load fonts manually, this variable does not need to be set. If you are not using o-typography, set this to false to load fonts manually.

Links

• "o-editorial-typography-load-fonts" variable on Github