Documentation

This documentation, like the framework itself, is a work in progress. Expect additions, edits and even some subtractions as the framework continues to evolve in the coming months.

Element styles are applied directly to an element, while object, component and utility styles are applied by adding classes to the elements in the markup. These classes are prefixed with the dcf- namespace to avoid code collisions with third-party or custom styles. Please prefix your own custom styles with a namespace unique to your organization.

General

Breakpoints

It’s foolish to define breakpoints that attempt to target the resolutions of popular devices and screen sizes. Those resolutions are constantly changing as manufacturers compete to pack more pixels into screens. Screen size matters little on desktop as a user can resize a browser window to a seemingly infinite combination of heights and widths. Instead, this framework’s device-agnostic breakpoints map to values in its modular scale.

The framework’s breakpoints are shown with their corresponding em and pixel values rounded to two decimal points.
Breakpoint Em Value Pixel Value
sm 42.09 673.48
md 56.12 897.97
lg 74.83 1197.3
xl 99.77 1596.4

Modular Scale

Rather than eyeball it and choose arbitrary numbers for things like font-size, padding and margin, the framework utilizes a modular scale, resulting in a more visually consistent and harmonious composition. The scale consists of a primary and secondary strand of values that are calculated with the perfect fourth (1.333) ratio. These proportions align well with common media formats—16:9 and 4:3.

The framework modular scale is shown in em and pixel values rounded to two decimal points. The primary strand values are shown in bold.
Em Value Pixel Value
.18 2.85
.2 3.2
.24 3.8
.27 4.27
.32 5.07
.36 5.7
.42 6.75
.47 7.6
.56 9
.63 10.13
.75 12
.84 13.5
1 16
1.13 18
1.33 21.33
1.5 24
1.77 28.45
2 32
2.37 37.9
2.67 42.67
3.16 50.51
3.56 56.88
4.21 67.34
4.74 75.85
5.62 89.9
6.32 101.13
7.49 119.87
8.43 134.85
9.99 159.82
11.24 179.8
13.32 213.1
14.98 293.73
17.76 284.12
19.98 319.63
23.68 378.83
26.64 426.18
31.57 505.12
35.52 568.25
42.09 673.48
47.35 757.67
56.12 897.97
63.14 1010.22
74.83 1197.3
84.18 1346.95
99.78 1596.4
112.25 1795.95
133.03 2128.52
149.66 2394.58
177.38 2838.03

Elements

Web browsers provide default styles for HTML elements. Some elements in the framework retain those browser defaults, but most have a minimal amount of opinionated styling applied to them.

Browser Defaults

Use the <del> tag for text that is meant to be treated as deleted text.

Use the <s> tag for text that is meant to be treated as no longer accurate or no longer relevant.

Use the <ins> tag for text that is meant to be treated as an addition to the document.

Use the <u> tag for underlined text.

Use the <strong> tag for text with strong importance.

Use the <b> tag or the .dcf-bold class for bold text without conveying any extra importance.

Use the <em> tag to stress text of linguistic import, the way you would emphasize pronunciation if the same text was spoken.

Use the <i> tag or the .dcf-italic class to italicize text without conveying any extra importance.

Use the <time> tag along with the datetime content attribute to display dates and time:

<time datetime="2018-07-01">July 1</time> – <time datetime="2018-07-02">2</time>

Abbreviations

<abbr>
Abbreviations should be spelled out on first occurrence, then abbreviated using the <abbr> element on subsequent occurrences.

VHS is an abbreviation for Video Home System.

This example uses the .dcf-txt-sm class to slightly reduce the font-size.

Addresses

<address>
The address element should be used for physical or digital contact information for a person, people or an organization.
University of Digital Campus
1234 Main Street
Anytown, NE 65432

Anchors

<a>
Use to link to other content.

This is an anchor link. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Blockquotes

<blockquote>
The blockquote element mostly retains browser default styling, but like paragraphs and list items, its measure is restricted to prevent unnecessarily long lines, aiding readability.
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

Related: Quotes (Elements), Blockquotes (Components)

Buttons

<button>
<input type="button">
<input type="submit">
Baseline button styles to reset display, padding, font-size, line-height, and text alignment.

Related: Button Groups (Components), Buttons (Components), Forms (Components), Input Groups With Buttons (Components)

Code

<code>
Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.
<pre>
Wrap multiple lines of code with <pre>. Use the .dcf-pre component class to retain code styling.
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Nulla vitae elit libero, a pharetra augue.</p>
<var>
These are variables:
y = mx + b
<kbd>
This is user input:
To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,
<samp>
This is sample output:
This text is meant to be treated as sample output from a computer program.

Related: Code (Components)

Figures

<figure>
The browser default margins have been removed from the figures.
A placeholder image with a 16:9 aspect ratio
A <figure> with one image and a <figcaption>.
A placeholder image with a 4:3 aspect ratio A placeholder image with a 4:3 aspect ratio A placeholder image with a 4:3 aspect ratio
A <figure> with multiple images and a <figcaption>.

Related: Figures (Components)

Forms

<form>
<fieldset>
<legend>
<label>
<input>
<select>
<option>
<textarea>
Styles applied directly to form elements are intentionally kept to a minimum.
Sample Form Content
Checkboxes
Radio buttons

Related: Buttons (Elements), Buttons (Components), Forms (Components), Input Groups (Components)

Headings

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Headings should be selected to accurately convey content hierarchy, not to resize text for the aesthetic needs of the page layout. Instead, use utility classes to increase or decrease a heading's font-size.

h1. Heading 2.37em

h2. Heading 2em

h3. Heading 1.77em

h4. Heading 1.5em

h5. Heading 1.33em
h6. Heading 1.13em

Related: Headings (Components), Font Size (Utilities)

Images

<img>
Ensure that accurate descriptions of the image content are included in the alt attribute of each image for accessibility.
A placeholder image with a 16:9 aspect ratio
A placeholder image with a 16:9 aspect ratio.
A placeholder image with a 4:3 aspect ratio
A placeholder image with a 4:3 aspect ratio
A placeholder image with a 1:1 aspect ratio
A placeholder image with a 1:1 aspect ratio

Related: Aspect Ratios (Utilities), Object-Fit (Utilities)

Lists

Description Lists

<dl>
The description list (once known as the definition list) is used to mark up groups of terms and descriptions.
Term 1
Description 1
Term 2
Description 1 for Term 2
Description 2 for Term 2
Term 3
Term 4
Term 5
Description for Terms 3, 4 and 5

Ordered Lists

<ol>
The ordered list prepends each list item with a sequential number.
  1. This is the most important thing.
  2. This is the second most important thing.
  3. This is the third most important thing.
  4. This is the fourth most important thing.
  5. This is the least important thing.

Unordered Lists

<ul>
The unordered list prepends each list item with a bullet.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  • Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.
  • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Maecenas faucibus mollis interdum.
  • Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Related: Lists (Objects), Pagination (Components)

Marks

<mark>
Use the mark element to highlight text.

Paragraphs

<p>
Use the paragraph element to mark up—you guessed it—paragraphs:

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Quotes

<q>
Smart or curly quotes are applied to inline quotes—no need to add your own.

Related: Blockquotes (Elements), Blockquotes (Components)

Small

<small>
The small element is intended for inline text meant to be treated as fine print. It does not change the font-size. Add a font-size utility class (like .dcf-txt-xs) to the small element to reduce its font-size.

Related: Font Size (Utilities)

Subscripts & Superscripts

<sub>
Subscripts reduce the font-size and place copy slightly below the baseline, like H2O.
<sup>
Superscripts reduce the font-size and elevate the copy slightly above the cap line, like 22 = 4.

Tables

<table>
<caption>
<thead>
<tbody>
<tr>
<th>
<td>
Table borders are collapsed and the background is made transparent.
This is a table caption.
Table heading Table heading Table heading Table heading
Table cell 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table cell 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Table cell 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Related: Tables (Components)

Objects

Wrapper

.dcf-wrapper
The wrapper object applies left and right padding to the page to provide adequate whitespace.
.dcf-wrapper
Ensure that the wrapper object is added to the <main> element to prevent content from colliding with the left and right edges of the browser viewport by default.

Related: Bleed (Objects)

Bleed

.dcf-bleed
The bleed object forces content to extend beyond the confines of the wrapper object, filling the browser viewport.
.dcf-bleed
.dcf-wrapper
The wrapper object can be nested inside the bleed object to reapply the page padding.

Related: Wrapper (Objects)

Grids

The Digital Campus Framework uses CSS Grid for grid-based layout and, using feature queries, provides a Flexbox-based fallback for browsers that don't support CSS Grid.

.dcf-grid
The grid object lays out child elements in a grid of twelve columns. Why twelve? Twelve is divisible by two, three, four and six, making it ideal for dividing a grid into halves, thirds, fourths and sixths.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
The .dcf-grid will take any number of child elements and place each in one of the available twelve columns. Additional classes to define column widths and column- and row-gap help to make the grid more useful.

For the rest of the grid examples, we will apply column- and row-gap classes which are documented in Utilities.

Grid-related object classes can be appended with the framework's responsive suffixes (@sm, @md, @lg and @xl) to apply styles at the respective breakpoints.

.dcf-col-100%
Apply to a grid child element to define its column width as the full width of the grid.
.dcf-col-100%
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-50%-start
Apply to a grid child element to define its column width as one-half of the grid and locate it on the left side, at the start of the grid's tracks.
.dcf-col-50%-start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-50%-end
Apply to a grid child element to define its column width as one-half of the grid and locate it on the right side, at the end of the grid's tracks.
1
.dcf-col-50%-end
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-33%-start
Apply to a grid child element to define its column width as one-third of the grid and locate it on the left side, at the start of the grid's tracks.
.dcf-col-33%-start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-33%-end
Apply to a grid child element to define its column width as one-third of the grid and locate it on the right side, at the end of the grid's tracks.
1
.dcf-col-33%-end
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-67%-start
Apply to a grid child element to define its column width as two-thirds of the grid and locate it on the left side, at the start of the grid's tracks.
.dcf-col-67%-start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-67%-end
Apply to a grid child element to define its column width as two-thirds of the grid and locate it on the right side, at the end of the grid's tracks.
1
.dcf-col-67%-end
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-25%-start
Apply to a grid child element to define its column width as one-fourth of the grid and locate it on the left side, at the start of the grid's tracks.
.dcf-col-25%-start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-25%-end
Apply to a grid child element to define its column width as one-fourth of the grid and locate it on the right side, at the end of the grid's tracks.
1
.dcf-col-25%-end
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-75%-start
Apply to a grid child element to define its column width as three-fourths of the grid and locate it on the left side, at the start of the grid's tracks.
.dcf-col-75%-start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dcf-col-75%-end
Apply to a grid child element to define its column width as three-fourths of the grid and locate it on the right side, at the end of the grid's tracks.
1
.dcf-col-75%-end
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Grids of equal-width columns can more easily be created using the following grid objects instead of applying classes to each and every grid column in the twelve-column grid.

.dcf-grid-halves
The grid-halves object lays out child elements in a grid of two equal-width columns.
1
2
3
4
5
6
7
8
9
10
11
12
.dcf-grid-thirds
The grid-thirds object lays out child elements in a grid of three equal-width columns.
1
2
3
4
5
6
7
8
9
10
11
12
.dcf-grid-fourths
The grid-fourths object lays out child elements in a grid of four equal-width columns.
1
2
3
4
5
6
7
8
9
10
11
12

Grids of five and six equal-width columns start at the @md breakpoint because there is not enough horizontal space to reasonably accommodate most content in such narrow columns for widths below the @md breakpoint.

.dcf-grid-fifths@md
The grid-fifths object lays out child elements in a grid of five equal-width columns for breakpoints greater than or equal to @md. It must be suffixed with @md, @lg or @xl.
1
2
3
4
5
6
7
8
9
10
11
12
.dcf-grid-sixths@md
The grid-sixths object lays out child elements in a grid of six equal-width columns for breakpoints greater than or equal to @md. It must be suffixed with @md, @lg or @xl.
1
2
3
4
5
6
7
8
9
10
11
12

Related: Box Alignment (Utilities), Grid (Utilities)

Lists

Bare Lists

.dcf-list-bare
This removes the left padding from a list and removes numbers from ordered lists or bullets from unordered lists.
  • Bare list item #1
  • Bare list item #2
  • Bare list item #3
  • Bare list item #4
  • Bare list item #5

Inline Lists

.dcf-list-bare
Remove left padding and list styles for the inline list.
.dcf-list-inline
Change the display of list items to inline-block and add right margin to all but the last list item.
  • Inline list item #1
  • Inline list item #2
  • Inline list item #3
  • Inline list item #4
  • Inline list item #5

Inline lists are also used to create pagination:

Related: Lists (Elements)

Media

.dcf-media
The media object consists of a single piece of media (e.g., photo, icon, video) located next to a block of text. The media object prevents the text from wrapping around the media.
.dcf-media-body
The media body is the block of text in the media object.
placeholder image

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Components

Badges

.dcf-badge
This includes styles common to all badges and requires the addition of one of the following modifier classes to fully style a badge.

Roundrect Badges

.dcf-badge-roundrect
Use this modifier for a badge with roundrect shape.

h1. Heading with roundrect badge New

h2. Heading with roundrect badge New

h3. Heading with roundrect badge New

h4. Heading with roundrect badge New

h5. Heading with roundrect badge New
h6. Heading with roundrect badge New

Paragraph with roundrect badge New

Pill Badges

.dcf-badge-pill
Use this modifier for a badge with pill shape.

h1. Heading with pill badge New

h2. Heading with pill badge New

h3. Heading with pill badge New

h4. Heading with pill badge New

h5. Heading with pill badge New
h6. Heading with pill badge New

Paragraph with pill badge New

Blockquotes

.dcf-blockquote
Like inline quotes (<q>), the blockquote component automatically adds quotation marks—no need to add your own.
.dcf-attribution
To attribute the source of a quote, put the attribution in a <footer> element with the dcf-attribution class. It will automatically prepend an em dash (&mdash;) followed by a thin space (&thinsp;). If the attribution source comes from a creative work, it should be cited using the <cite> element and italicized with the <i> element to visually offset the title of the work from the rest of the attribution.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Jane Doe in Source Title

Related: Blockquotes (Elements), Quotes (Elements)

Button Groups

.dcf-btn-group
Group two or more buttons together.
This example shows a button group with primary buttons.
This example shows a button group with secondary buttons.

Related: Buttons (Elements), Buttons (Components)

Buttons

Buttons include the <button> element, as well as form inputs (type="button" and type="submit") and links styled to appear as buttons.

.dcf-btn
This includes styles common to all buttons and requires the addition of one of the following modifier classes to fully style a button.

Primary Buttons

.dcf-btn-primary
Use the primary modifier to give standard emphasis to a button.
Link

Secondary Buttons

.dcf-btn-secondary
Visually de-emphasize buttons by using the secondary modifier.
Link

Tertiary Buttons

.dcf-btn-tertiary
Visually de-emphasize buttons by using the tertiary modifier.
Link

Button Sizes

Buttons can be resized as needed by using the font-size utilities to make buttons larger or smaller.


Button State: Active

Button State: Disabled

Related: Button Groups (Components), Forms (Elements), Forms (Components), Input Groups (Components), Font Size (Utilities)

Cards

.dcf-card
A card is a commonly-used design pattern that groups related content in a container that resembles a physical playing card.
.dcf-card-block
The card block provides padding for text inside the card. Card contents that need to span the full width (like an image) should be placed outside of the card block.
  • Card #1

    Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.

    A placeholder image with a 4:3 aspect ratio
  • Card #2 with a super, duper long title

    Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.

    A placeholder image with a 4:3 aspect ratio
  • Card #3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    A placeholder image with a 4:3 aspect ratio
  • Card #4

    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

    A placeholder image with a 4:3 aspect ratio

Related: Lists (Elements), Grids (Objects), Unstyled Lists (Components), Grid (Utilities), Flexbox (Utilities), Order (Utilities)

Code

.dcf-pre
Retain code styling for multiple lines of code wrapped with <pre> element.
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Nulla vitae elit libero, a pharetra augue.</p>

Related: Code (Elements)

Figures

.dcf-figcaption
Figures do not require any additional classes, but .dcf-figcaption provides consistent styles for the <figcaption>. It reduces the font-size and lightens the text to help distinguish it from body copy. Use utility classes to add margins or padding as needed by the content in your <figure>.
A placeholder image with a 16:9 aspect ratio
A <figure> with one image and a <figcaption>.
A placeholder image with a 4:3 aspect ratio A placeholder image with a 4:3 aspect ratio A placeholder image with a 4:3 aspect ratio
A <figure> with multiple images and a <figcaption>. Use the <small> element along with display, padding and font-size utilities to credit the source(s) of figure content, like so: Illustrations by Jane Doe

Related: Figures (Elements), Images (Elements), Display (Utilities), Margins (Utilities), Padding (Utilities), Font Size (Utilities)

Forms

.dcf-legend
Add to <legend> elements.
.dcf-form-group
Wrap groups of form elements (such as a label and input pair) to visually offset them from other form elements.
.dcf-label
Add to <label> elements.
.dcf-required
Indicate that an adjacent form input is required to submit the form.
.dcf-input-text
Add to text-based inputs—either an <input> with a type attribute that supports text input, or a <textarea>.
.dcf-input-select
Add to <select> elements.
.dcf-input-control
Add to checkboxes and radio inputs.
.dcf-input-file
Add to file inputs.
Sample Form Content

Make sure it’s a good one!

Checkboxes
Radio buttons

This is some placeholder block-level help text for the above input. It’s a bit lighter and easily wraps to a new line.

Related: Buttons (Elements), Buttons (Components), Forms (Elements), Input Groups (Components)

Headings

Subheads

.dcf-subhead
Use this class on the <p> element to mark up subheadings, alternative titles or taglines.

Cras Ullamcorper Cursus Porta

Maecenas faucibus mollis interdum

Pellentesque Nibh Malesuada

Related: Headings (Elements), Paragraphs (Elements)

Input Groups

.dcf-input-group
An input group prepends or appends text or a button to a text input. The form label must be placed outside of the input group. It can be vertically aligned with the input group by adding .dcf-flex and .dcf-ai-center to the input group's parent element.

Input Groups With Add-ons

.dcf-input-group-addon
An add-on provides additional context for a text input in a form. It can be placed before and/or after the text input.
@
This example shows an input group with an add-on before the input.
@example.com
This example shows an input group with an add-on after the input.
$ .00
This example shows an input group with an add-ons before and after the input.

Input Groups With A Button

If a form consists of a single field and button, consider using an input group for a more compact layout.

Related: Buttons (Elements), Buttons (Components), Forms (Elements), Forms (Components), Box Alignment (Utilities), Display (Utilities)

Pagination

See Inline Lists

Tables

Tables in the framework are optimized for readability by reducing unnecessary ornamentation and placing an emphasis on the content itself. Richard Rutter's article "Web Typography: Designing Tables to be Read, Not Looked At" (excerpted from his book, Web Typography) is an excellent resource on the subject.

.dcf-table
The table font-size is slightly smaller than the body copy. Padding and borders are also added.
This is a table. Utility classes are used to right-align numbers in this table.
Table heading Table heading Table heading Table heading
Table cell 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
Table cell 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table cell 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Table cell 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Bordered Tables

.dcf-table-bordered
The bordered table adds borders to all cells in the table.
This is a bordered table.
Table heading Table heading Table heading Table heading
Table heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Striped Tables

.dcf-table-striped
The striped table adds a subtle background color to alternating rows in the table.
This is a striped table.
Table heading Table heading Table heading Table heading
Table heading 49 Cras mattis consectetur purus sit amet fermentum Nullam Sollicitudin Mattis
16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table heading 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Related: Tables (Elements), Borders (Utilities), Horizontal Text Alignment (Utilities)

Utilities

Aspect Ratios

.dcf-ratio
apply an aspect ratio to an element and specify the ratio with one of the following classes
.dcf-ratio-16x9
apply a 16×9 aspect ratio to an element
.dcf-ratio-4x3
apply a 4×3 aspect ratio to an element
.dcf-ratio-1x1
apply a 1×1 aspect ratio to an element
.dcf-ratio-child
child element contained within the aspect ratio

Backgrounds

Color

.dcf-bg-transparent
transparent background
.dcf-bg-white
white background
.dcf-bg-overlay-dark
dark, slightly transparent background
.dcf-bg-overlay-light
light, slightly transparent background

Position

.dcf-bg-center
background-position: center
.dcf-bg-top
background-position: top
.dcf-bg-right
background-position: right
.dcf-bg-right-top
background-position: right top
.dcf-bg-right-bottom
background-position: right bottom
.dcf-bg-bottom
background-position: bottom
.dcf-bg-left
background-position: left
.dcf-bg-left-top
background-position: left top
.dcf-bg-left-bottom
background-position: left bottom

Repeat

.dcf-bg-no-repeat
background-repeat: no-repeat
.dcf-bg-repeat
background-repeat: repeat
.dcf-bg-repeat-x
background-repeat: repeat-x
.dcf-bg-repeat-y
background-repeat: repeat-y

Size

.dcf-bg-contain
background-size: contain
.dcf-bg-cover
background-size: cover

None

.dcf-bg-none
no background

Border Color

Custom border colors should be applied with mixins and utility classes in your site’s theme.

Border Color (All Sides)

.dcf-b-current
border-color: currentColor, all sides
.dcf-b-transparent
border-color: transparent, all sides

Border Top Color

.dcf-bt-current
border-top-color: currentColor
.dcf-bt-transparent
border-top-color: transparent

Border Right Color

.dcf-br-current
border-right-color: currentColor
.dcf-br-transparent
border-right-color: transparent

Border Bottom Color

.dcf-bb-current
border-bottom-color: currentColor
.dcf-bb-transparent
border-bottom-color: transparent

Border Left Color

.dcf-bl-current
border-left-color: currentColor
.dcf-bl-transparent
border-left-color: transparent

Border Radius

.dcf-circle
circle border radius
.dcf-rounded
rounded corners, all sides
.dcf-rounded-top
rounded top corners
.dcf-rounded-right
rounded right corners
.dcf-rounded-bottom
rounded bottom corners
.dcf-rounded-left
rounded left corners

Border Style

Border Style (All Sides)

.dcf-b-solid
border-style: solid, all sides

Border Top Style

.dcf-bt-solid
border-top-style: solid

Border Right Style

.dcf-br-solid
border-right-style: solid

Border Botttom Style

.dcf-bb-solid
border-bottom-style: solid

Border Left Style

.dcf-bl-solid
border-left-style: solid

Border Width

Border Width (All Sides)

.dcf-b-0
border-width: 0, all sides
.dcf-b-1
border-width: 1px, all sides
.dcf-b-2
border-width: 2px, all sides
.dcf-b-3
border-width: 3px, all sides

Border Top Width

.dcf-bt-0
border-top-width: 0
.dcf-bt-1
border-top-width: 1px
.dcf-bt-2
border-top-width: 2px
.dcf-bt-3
border-top-width: 3px

Border Right Width

.dcf-br-0
border-right-width: 0
.dcf-br-1
border-right-width: 1px
.dcf-br-2
border-right-width: 2px
.dcf-br-3
border-right-width: 3px

Border Bottom Width

.dcf-bb-0
border-bottom-width: 0
.dcf-bb-1
border-bottom-width: 1px
.dcf-bb-2
border-bottom-width: 2px
.dcf-bb-3
border-bottom-width: 3px

Border Left Width

.dcf-bl-0
border-left-width: 0
.dcf-bl-1
border-left-width: 1px
.dcf-bl-2
border-left-width: 2px
.dcf-bl-3
border-left-width: 3px

Box Alignment

Align Items

.dcf-ai-flex-start
align-items: flex-start
.dcf-ai-flex-end
align-items: flex-end
.dcf-ai-center
align-items: center
.dcf-ai-baseline
align-items: baseline
.dcf-ai-stretch
align-items: stretch
.dcf-ai-start
align-items: start
.dcf-ai-end
align-items: end

Align Content

.dcf-ac-flex-start
align-content: flex-start
.dcf-ac-flex-end
align-content: flex-end
.dcf-ac-center
align-content: center
.dcf-ac-stretch
align-content: stretch
.dcf-ac-around
align-content: around
.dcf-ac-between
align-content: between
.dcf-ac-evenly
align-content: evenly
.dcf-ac-start
align-content: start
.dcf-ac-end
align-content: end

Align Self

.dcf-as-auto
align-self: auto
.dcf-as-flex-start
align-self: flex-start
.dcf-as-flex-end
align-self: flex-end
.dcf-as-center
align-self: center
.dcf-as-baseline
align-self: baseline
.dcf-as-stretch
align-self: stretch
.dcf-as-start
align-self: start
.dcf-as-end
align-self: end

Justify Items

.dcf-ji-center
justify-items: center
.dcf-ji-stretch
justify-items: stretch
.dcf-ji-start
justify-items: start
.dcf-ji-end
justify-items: end

Justify Content

.dcf-jc-flex-start
justify-content: flex-start
.dcf-jc-flex-end
justify-content: flex-end
.dcf-jc-center
justify-content: center
.dcf-jc-stretch
justify-content: stretch
.dcf-jc-around
justify-content: around
.dcf-jc-between
justify-content: between
.dcf-jc-evenly
justify-content: evenly
.dcf-jc-start
justify-content: start
.dcf-jc-end
justify-content: end

Justify Self

.dcf-js-center
justify-self: center
.dcf-js-stretch
justify-self: stretch
.dcf-js-start
justify-self: start
.dcf-js-end
justify-self: end

Colors

.dcf-inverse
light color on dark background

CSS Columns

All CSS column utilities have a column-gap of 3.16vw. Responsive suffixes (@sm, @md, @lg, @xl) can be added to target desired breakpoints.

.dcf-columns-1
Lay out content in one column.
.dcf-columns-2
Lay out content in two equal width columns.
.dcf-columns-3
Lay out content in three equal width columns.
.dcf-columns-auto
Lay out content in equal width columns, each with a minimum width of 17.76em.

Display

.dcf-d-none
display: none
.dcf-d-block
display: block
.dcf-d-inline
display: inline
.dcf-d-inline-block
display: inline-block
.dcf-d-flex
display: flex
.dcf-d-inline-flex
display: inline-flex
.dcf-d-grid
display: grid
.dcf-d-inline-grid
display: inline-grid
.dcf-d-table
display: table
.dcf-d-table-cell
display: table-cell

Flexbox

Direction

.dcf-flex-col
flex-direction: column
.dcf-flex-col-rev
flex-direction: column-reverse
.dcf-flex-row
flex-direction: row
.dcf-flex-row-rev
flex-direction: row-reverse

Wrap

.dcf-flex-wrap
flex-wrap: wrap
.dcf-flex-wrap-rev
flex-wrap: wrap-reverse
.dcf-flex-nowrap
flex-wrap: nowrap

Grow & Shrink

.dcf-flex-none
flex: none
.dcf-flex-initial
flex: initial
.dcf-flex-auto
flex: auto
.dcf-flex-1
flex: 1
.dcf-flex-grow-1
flex-grow: 1
.dcf-flex-shrink-0
flex-shrink: 0

Floats

.dcf-float-right
float: right
.dcf-float-left
float: left
.dcf-clearfix
force an element to self-clear its children

Grid

Column Gap

.dcf-col-gap-1
grid-column-gap: .42em
.dcf-col-gap-2
grid-column-gap: .56em
.dcf-col-gap-3
grid-column-gap: .75em
.dcf-col-gap-4
grid-column-gap: 1em
.dcf-col-gap-5
grid-column-gap: 1.33em
.dcf-col-gap-6
grid-column-gap: 1.77em
.dcf-col-gap-7
grid-column-gap: 2.37em
.dcf-col-gap-8
grid-column-gap: 3.16em
.dcf-col-gap-9
grid-column-gap: 4.21em
.dcf-col-gap-10
grid-column-gap: 5.62em
.dcf-col-gap-vw
grid-column-gap: 3.16vw

Row Gap

.dcf-row-gap-1
grid-row-gap: .42em
.dcf-row-gap-2
grid-row-gap: .56em
.dcf-row-gap-3
grid-row-gap: .75em
.dcf-row-gap-4
grid-row-gap: 1em
.dcf-row-gap-5
grid-row-gap: 1.33em
.dcf-row-gap-6
grid-row-gap: 1.77em
.dcf-row-gap-7
grid-row-gap: 2.37em
.dcf-row-gap-8
grid-row-gap: 3.16em
.dcf-row-gap-9
grid-row-gap: 4.21em
.dcf-row-gap-10
grid-row-gap: 5.62em

Height & Width

Height

.dcf-h-0
height: 0
.dcf-h-1
height: .42em
.dcf-h-2
height: .56em
.dcf-h-3
height: .75em
.dcf-h-4
height: 1em
.dcf-h-5
height: 1.33em
.dcf-h-6
height: 1.77em
.dcf-h-7
height: 2.37em
.dcf-h-8
height: 3.16em
.dcf-h-9
height: 4.21em
.dcf-h-10
height: 5.62em
.dcf-h-100%
height: 100%
.dcf-h-100vh
height: 100vw

Min-Height

.dcf-h-min-0
min-height: 0
.dcf-h-min-100vh
min-height: 100vh

Max-Height

.dcf-h-max-100%
max-height: 100%
.dcf-h-max-100vh
max-height: 100vh

Width

.dcf-w-0
width: 0
.dcf-w-1
width: .42em
.dcf-w-2
width: .56em
.dcf-w-3
width: .75em
.dcf-w-4
width: 1em
.dcf-w-5
width: 1.33em
.dcf-w-6
width: 1.77em
.dcf-w-7
width: 2.37em
.dcf-w-8
width: 3.16em
.dcf-w-9
width: 4.21em
.dcf-w-10
width: 5.62em
.dcf-w-100%
width: 100%
.dcf-w-100vw
width: 100vw

Min-Width

.dcf-w-min-0
min-width: 0

Max-Width

.dcf-w-max-100%
max-width: 100%
.dcf-w-max-100vw
max-width: 100vw

Margins

Margin (All Sides)

.dcf-m-auto
margin (all sides): auto
.dcf-m-0
margin (all sides): 0
.dcf-m-1
margin (all sides): .42em
.dcf-m-2
margin (all sides): .56em
.dcf-m-3
margin (all sides): .75em
.dcf-m-4
margin (all sides): 1em
.dcf-m-5
margin (all sides): 1.33em
.dcf-m-6
margin (all sides): 1.77em
.dcf-m-7
margin (all sides): 2.37em
.dcf-m-8
margin (all sides): 3.16em
.dcf-m-9
margin (all sides): 4.21em
.dcf-m-10
margin (all sides): 5.62em

Margin Top

.dcf-mt-auto
margin-top: auto
.dcf-mt-0
margin-top: 0
.dcf-mt-1
margin-top: .42em
.dcf-mt-2
margin-top: .56em
.dcf-mt-3
margin-top: .75em
.dcf-mt-4
margin-top: 1em
.dcf-mt-5
margin-top: 1.33em
.dcf-mt-6
margin-top: 1.77em
.dcf-mt-7
margin-top: 2.37em
.dcf-mt-8
margin-top: 3.16em
.dcf-mt-9
margin-top: 4.21em
.dcf-mt-10
margin-top: 5.62em

Margin Right

.dcf-mr-auto
margin-right: auto
.dcf-mr-0
margin-right: 0
.dcf-mr-1
margin-right: .42em
.dcf-mr-2
margin-right: .56em
.dcf-mr-3
margin-right: .75em
.dcf-mr-4
margin-right: 1em
.dcf-mr-5
margin-right: 1.33em
.dcf-mr-6
margin-right: 1.77em
.dcf-mr-7
margin-right: 2.37em
.dcf-mr-8
margin-right: 3.16em
.dcf-mr-9
margin-right: 4.21em
.dcf-mr-10
margin-right: 5.62em

Margin Bottom

.dcf-mb-auto
margin-bottom: auto
.dcf-mb-0
margin-bottom: 0
.dcf-mb-1
margin-bottom: .42em
.dcf-mb-2
margin-bottom: .56em
.dcf-mb-3
margin-bottom: .75em
.dcf-mb-4
margin-bottom: 1em
.dcf-mb-5
margin-bottom: 1.33em
.dcf-mb-6
margin-bottom: 1.77em
.dcf-mb-7
margin-bottom: 2.37em
.dcf-mb-8
margin-bottom: 3.16em
.dcf-mb-9
margin-bottom: 4.21em
.dcf-mb-10
margin-bottom: 5.62em

Margin Left

.dcf-ml-auto
margin-left: auto
.dcf-ml-0
margin-left: 0
.dcf-ml-1
margin-left: .42em
.dcf-ml-2
margin-left: .56em
.dcf-ml-3
margin-left: .75em
.dcf-ml-4
margin-left: 1em
.dcf-ml-5
margin-left: 1.33em
.dcf-ml-6
margin-left: 1.77em
.dcf-ml-7
margin-left: 2.37em
.dcf-ml-8
margin-left: 3.16em
.dcf-ml-9
margin-left: 4.21em
.dcf-ml-10
margin-left: 5.62em

Object-Fit

.dcf-obj-fit-contain
object-fit: contain
.dcf-obj-fit-cover
object-fit: cover
Demonstration of object-fit contain
Demonstration of object-fit cover

Order (for Flexbox and Grid)

.dcf-1st
first
.dcf-2nd
second
.dcf-3rd
third

Overflow

.dcf-overflow-visible
overflow: visible
.dcf-overflow-x-visible
overflow-x: visible
.dcf-overflow-y-visible
overflow-y: visible
.dcf-overflow-hidden
overflow: hidden
.dcf-overflow-x-hidden
overflow-x: hidden
.dcf-overflow-y-hidden
overflow-y: hidden
.dcf-overflow-auto
overflow: auto
.dcf-overflow-x-auto
overflow-x: auto
.dcf-overflow-y-auto
overflow-y: auto
.dcf-overflow-scroll
overflow: scroll
.dcf-overflow-x-scroll
overflow-x: scroll
.dcf-overflow-y-scroll
overflow-y: scroll

Padding

Padding (All Sides)

.dcf-p-0
padding (all sides): 0
.dcf-p-1
padding (all sides): .42em
.dcf-p-2
padding (all sides): .56em
.dcf-p-3
padding (all sides): .75em
.dcf-p-4
padding (all sides): 1em
.dcf-p-5
padding (all sides): 1.33em
.dcf-p-6
padding (all sides): 1.77em
.dcf-p-7
padding (all sides): 2.37em
.dcf-p-8
padding (all sides): 3.16em
.dcf-p-9
padding (all sides): 4.21em
.dcf-p-10
padding (all sides): 5.62em

Padding Top

.dcf-pt-0
padding-top: 0
.dcf-pt-1
padding-top: .42em
.dcf-pt-2
padding-top: .56em
.dcf-pt-3
padding-top: .75em
.dcf-pt-4
padding-top: 1em
.dcf-pt-5
padding-top: 1.33em
.dcf-pt-6
padding-top: 1.77em
.dcf-pt-7
padding-top: 2.37em
.dcf-pt-8
padding-top: 3.16em
.dcf-pt-9
padding-top: 4.21em
.dcf-pt-10
padding-top: 5.62em

Padding Right

.dcf-pr-0
padding-right: 0
.dcf-pr-1
padding-right: .42em
.dcf-pr-2
padding-right: .56em
.dcf-pr-3
padding-right: .75em
.dcf-pr-4
padding-right: 1em
.dcf-pr-5
padding-right: 1.33em
.dcf-pr-6
padding-right: 1.77em
.dcf-pr-7
padding-right: 2.37em
.dcf-pr-8
padding-right: 3.16em
.dcf-pr-9
padding-right: 4.21em
.dcf-pr-10
padding-right: 5.62em

Padding Bottom

.dcf-pb-0
padding-bottom: 0
.dcf-pb-1
padding-bottom: .42em
.dcf-pb-2
padding-bottom: .56em
.dcf-pb-3
padding-bottom: .75em
.dcf-pb-4
padding-bottom: 1em
.dcf-pb-5
padding-bottom: 1.33em
.dcf-pb-6
padding-bottom: 1.77em
.dcf-pb-7
padding-bottom: 2.37em
.dcf-pb-8
padding-bottom: 3.16em
.dcf-pb-10
padding-bottom: 5.62em

Padding Left

.dcf-pl-0
padding-left: 0
.dcf-pl-1
padding-left: .42em
.dcf-pl-2
padding-left: .56em
.dcf-pl-3
padding-left: .75em
.dcf-pl-4
padding-left: 1em
.dcf-pl-5
padding-left: 1.33em
.dcf-pl-6
padding-left: 1.77em
.dcf-pl-7
padding-left: 2.37em
.dcf-pl-8
padding-left: 3.16em
.dcf-pl-9
padding-left: 4.21em
.dcf-pl-10
padding-left: 5.62em

Position

Flow

.dcf-static
position: static
.dcf-relative
position: relative
.dcf-absolute
position: absolute
.dcf-fixed
position: fixed
.dcf-sticky
position: sticky

Coordinates

.dcf-pin-top
top: 0
.dcf-pin-right
right: 0
.dcf-pin-bottom
bottom: 0
.dcf-pin-left
left: 0

SVG

.dcf-fill-current
fill: currentColor
.dcf-stroke-current
stroke: currentColor

Typography

Font Size

.dcf-txt-base
font-size: 1rem
.dcf-txt-3xs
font-size: .56em
.dcf-txt-2xs
font-size: .63em
.dcf-txt-xs
font-size: .75em
.dcf-txt-sm
font-size: .84em
.dcf-txt-md
font-size: 1em
.dcf-txt-lg
.dcf-txt-h6
font-size: 1.13em
.dcf-txt-h5
font-size: 1.33em
.dcf-txt-h4
font-size: 1.5em
.dcf-txt-h3
font-size: 1.77em
.dcf-txt-h2
font-size: 2em
.dcf-txt-h1
font-size: 2.37em
.dcf-txt-xl
font-size: 2.67em
.dcf-txt-2xl
font-size: 3.16em
.dcf-txt-3xl
font-size: 4.21em
.dcf-txt-4xl
font-size: 4.74em
.dcf-txt-5xl
font-size: 5.62em
.dcf-txt-6xl
font-size: 6.32em

Horizontal Text Alignment

.dcf-txt-center
text-align: center
.dcf-txt-left
text-align: left
.dcf-txt-right
text-align: right

Vertical Text Alignment

.dcf-txt-baseline
vertical-align: baseline
.dcf-txt-top
vertical-align: top
.dcf-txt-middle
vertical-align: middle
.dcf-txt-bottom
vertical-align: bottom
.dcf-txt-text-top
vertical-align: text-top
.dcf-txt-text-bottom
vertical-align: text-bottom

Text Decoration

.dcf-txt-decor-none
text-decoration: none

Text Wrap

.dcf-txt-nowrap
white-space: nowrap
.dcf-truncate
truncate text with an ellipsis as needed

Font Style

.dcf-roman
font-style: normal
.dcf-italic
font-style: italic

Font Weight

.dcf-regular
font-weight: regular
.dcf-bold
font-weight: bold

Line Height

.dcf-lh-1
line-height: 1
.dcf-lh-2
line-height: 1.13
.dcf-lh-3
line-height: 1.33
.dcf-lh-4
line-height: 1.5

Measure (Line Length)

.dcf-measure
max-width: 31.57rem

Text Transform

.dcf-capitalize
text-transform: capitalize
.dcf-lowercase
text-transform: lowercase
.dcf-uppercase
text-transform: uppercase
.dcf-case-reset
text-transform: none

Writing Mode

.dcf-txt-vertical-lr
writing-mode: vertical-lr

Visibility

.dcf-invisible
visibility: hidden
.dcf-visible
visibility: visible
.dcf-sr-only
visible for screen readers only

Z-index

.dcf-z-0
z-index: 0
.dcf-z-1
z-index: 1
.dcf-z-2
z-index: 2

JavaScript

States

.dcf-lazy-img
lazy-loads an image when a user scrolls to its position
.dcf-fade-up
animates opacity from 0 to 100% and translates its vertical position from 50% to 0, moving it into view.
blank placeholder image for lazy-loading demonstration
Demonstration of lazy-loading and animating an image.

Related: Images (Elements)