Permalink
e5ccda4 Mar 15, 2018
1 contributor

Users who have contributed to this file

239 lines (197 sloc) 5.04 KB
/* stylelint-disable selector-class-pattern */
@import '@cmsgov/design-system-support/src/settings/index';
/*
Typography
The design system doesn't style base HTML typography elements (like `h1`, `h2`, `p`, etc) in order to avoid conflicting with any existing site styles. You should instead use one of the base typography classes below to apply styling:
- `ds-display`
- `ds-title`
- `ds-h{level}` where `level` is a number between `1` and `6`
- `ds-text` and `ds-text--lead`
Note: The only base HTML element the design system applies styling to is the `<a>` element. To prevent this, you can override the `$ds-include-base-html-rulesets` Sass variable and set it to `false`.
Markup:
<h1 class="ds-display">Display</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-title">Title</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h1">Heading 1</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h2">Heading 2</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h3">Heading 3</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h4">Heading 4</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h5">Heading 5</h1>
<p class="ds-text ds-u-measure--wide ds-u-color--muted">
{{ lorem-l }}
</p>
<h1 class="ds-h6">Heading 6</h1>
<p class="ds-text--lead ds-u-measure--wide">
<strong>Lead text.</strong> {{lorem-l}}
</p>
<p class="ds-text ds-u-measure--wide">
<strong>Body text.</strong> {{ lorem-l }}
</p>
Style guide: style.typography
*/
@if $ds-include-base-html-rulesets {
// <a> is the only base HTML element in the design system that
// has a style declaration. In all other cases, styles are applied using a
// namespaced class name. This selector isn't scoped under .ds-base, since that
// would cause the selector's specificity to be higher than most other component
// selectors (i.e. ds-c-button), necessitating overly specific selectors anytime
// a developer wanted to change an anchor's color property.
a {
color: $color-primary;
&:hover,
&:focus {
color: $color-primary-darker;
}
&:active {
color: $color-primary-darkest;
}
}
}
// Titles and headings
.ds-display,
.ds-title,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
line-height: $heading-line-height;
margin: 0;
}
// Bold title and headings
.ds-display,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4 {
font-weight: $font-bold;
}
// Headings
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
margin-bottom: 0.5em;
margin-top: 1.5em;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.ds-display {
font-size: $h1-font-size;
@media (min-width: $width-sm) {
font-size: $title-font-size;
}
@media (min-width: $width-md) {
font-size: $display-font-size;
}
}
.ds-title {
font-size: $h1-font-size;
font-weight: $font-normal;
@media (min-width: $width-md) {
font-size: $title-font-size;
}
}
.ds-h1 {
font-size: $h1-mobile-font-size;
font-weight: $font-normal;
@media (min-width: $width-md) {
font-size: $h1-font-size;
}
}
.ds-h2 {
font-size: $h2-font-size;
}
.ds-h3 {
font-size: $h3-font-size;
}
.ds-h4 {
font-size: $h4-font-size;
}
.ds-h5 {
font-size: $h5-font-size;
font-weight: $font-bold;
}
.ds-h6 {
color: $color-muted;
font-size: $h6-font-size;
font-weight: $font-normal;
}
.ds-base--inverse .ds-h6 {
color: $color-muted-inverse;
}
.ds-text,
.ds-text--lead {
line-height: $base-line-height;
margin-bottom: 1em;
margin-top: 1em;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.ds-text {
font-size: $base-font-size;
}
.ds-text--lead {
font-size: $lead-font-size;
}
/*
Responsive typography
The `ds-display`, `ds-title`, and `ds-h1` classes are responsive by default.
To apply responsive typography elsewhere, use the [font size utility class](/utilites/font-size#responsive).
Since the base typography margins and line height is measured in `em` units,
they'll automatically adjust as you change the font size.
_Resize your browser to see each breakpoint in action:_
Markup:
<article class="ds-base--inverse ds-u-padding--2">
<h1 class="ds-display ds-u-margin-y--1">Display</h1>
<h2 class="ds-title ds-u-margin-y--1">Title</h1>
<h3 class="ds-h1 ds-u-margin-y--1">Heading 1</h1>
<h4 class="ds-h2 ds-u-margin-y--1 ds-u-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2">Responsive utility classes</h4>
</div>
Style guide: style.typography.responsive
*/
/*
Customizing type sizes
The following Sass variables can be overridden to change the type sizes:
- `$small-font-size`
- `$base-font-size`
- `$lead-font-size`
- `$h6-font-size`
- `$h5-font-size`
- `$h4-font-size`
- `$h3-font-size`
- `$h2-font-size`
- `$h1-font-size`
- `$h1-mobile-font-size`
- `$title-font-size`
- `$display-font-size`
Style guide: style.typography.variables
*/