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.
| 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.33) ratio. These proportions align well with common media formats—16:9 and 4:3.
| 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
- Abbreviations
- Addresses
- Anchors
- Blockquotes
- Buttons
- Code
- Details & Summary
- Figures
- Forms
- Headings
- Images
- Lists
- Marks
- Paragraphs
- Quotes
- Small
- Subscripts & Superscripts
- Tables
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.
.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
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-precomponent 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)
Details & Summary
<details><summary>- Combine these elements to build a native accordion (i.e., content that can be expanded and contracted).
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Figures
<figure>- The browser default margins have been removed from the figures.
<figure> with one image and a <figcaption>.
<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.
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
altattribute of each image for accessibility.
Related: Aspect Ratios (Utilities), Object-Fit (Utilities)
Lists
Description Lists
<dl><dt><dd>- 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><li>- The ordered list prepends each list item with a sequential number.
- This is the most important thing.
- This is the second most important thing.
- This is the third most important thing.
- This is the fourth most important thing.
- This is the least important thing.
Unordered Lists
<ul><li>- 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 (Components), 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
orcurly
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.
| 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 |
Objects
Wrapper
.dcf-wrapper- The wrapper object applies left and right padding to the page to provide adequate whitespace.
.dcf-wrapper
<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
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
…
.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%-start2
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%-end3
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%-start2
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%-end3
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%-start2
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%-end3
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%-start2
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%-end3
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%-start2
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%-end3
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-full- The grid-full object lays out child elements to each span all twelve columns of the grid.
1
2
3
4
5
6
7
8
9
10
11
12
.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,@lgor@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,@lgor@xl.
1
2
3
4
5
6
7
8
9
10
11
12
Related: Box Alignment (Utilities), Grid (Utilities)
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.
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
- Blockquotes
- Button Groups
- Buttons
- Cards
- Code
- Figures
- Forms
- Headings
- Input Groups
- Lists
- Pagination
- Tables
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 thedcf-attributionclass. It will automatically prepend an em dash (—) followed by a thin space ( ). 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.
Related: Blockquotes (Elements), Quotes (Elements)
Button Groups
.dcf-btn-group- Group two or more buttons together.
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.
Secondary Buttons
.dcf-btn-secondary- Visually de-emphasize buttons by using the secondary modifier.
Tertiary Buttons
.dcf-btn-tertiary- Visually de-emphasize buttons by using the tertiary modifier.
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.
-
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.
-
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.
-
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.
Related: Lists (Elements), Grids (Objects), Bare 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-figcaptionprovides 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>.
<figure> with one image and a <figcaption>.
<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 DoeRelated: Figures (Elements), Images (Elements), Display (Utilities), Margins (Utilities), Padding (Utilities), Font Size (Utilities)
Forms
.dcf-form- Style a form and its children.
.dcf-form-group- Wrap groups of form elements (such as a label and input pair) to visually offset them from other form elements.
.dcf-form-controls-inline- At the small breakpoint, display labels and form controls inline (as space allows) instead of stacked.
.dcf-required- Indicate that an adjacent form input is required to submit the form.
.dcf-input-checkbox.dcf-input-radio- Wrap a checkbox or radio input and label pair for consistent cross-browser styling.
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.
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.
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.
.dcf-form-controls-inline class is added to the form to display the label and input group inline.Related: Buttons (Elements), Buttons (Components), Forms (Elements), Forms (Components), Box Alignment (Utilities), Display (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.
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 lists are also used to create pagination:
Related: Lists (Elements)
Pagination
See Inline Lists (Components)
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.
| 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.
| Column 1 heading | Column 2 heading | Column 3 heading | Column 4 heading |
|---|---|---|---|
| Row group 1 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 | |
| Row group 2 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.
| Column 1 heading | Column 2 heading | Column 3 heading | Column 4 heading |
|---|---|---|---|
| Row 1 heading | 49 | Cras mattis consectetur purus sit amet fermentum | Nullam Sollicitudin Mattis |
| Row 2 heading | 16 | Nullam quis risus eget urna mollis ornare vel eu leo | Ornare Porta Vulputate |
| Row 3 heading | 387 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus | Inceptos Ullamcorper Etiam |
| Row 4 heading | 9 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit | Bibendum Sit Lorem |
Responsive Tables
.dcf-table-responsive- Responsive table contents display “stacked” at narrow screen widths.
| Greeting | Amount | Year | Description |
|---|---|---|---|
| Hello | $2.00 | 1984 | Nullam id dolor id nibh ultricies vehicula ut id elit |
| Hi | $999.99 | 1999 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. |
| Hey | $1,000,000.01 | 2001 | Donec ullamcorper nulla non metus auctor fringilla |
| Yo | $.01 | 2020 | Nulla vitae elit libero, a pharetra augue |
| Greeting | Amount | Year | Description |
|---|---|---|---|
| Hello | $2.00 | 1984 | Nullam id dolor id nibh ultricies vehicula ut id elit |
| Hi | $999.99 | 1999 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. |
| Hey | $1,000,000.01 | 2001 | Donec ullamcorper nulla non metus auctor fringilla |
| Yo | $.01 | 2020 | Nulla vitae elit libero, a pharetra augue |
| Image | Amount | Year | Description |
|---|---|---|---|
| $2.00 | 1984 | Nullam id dolor id nibh ultricies vehicula ut id elit | |
| $999.99 | 1999 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. | |
| $1,000,000.01 | 2001 | Donec ullamcorper nulla non metus auctor fringilla | |
| $.01 | 2020 | Nulla vitae elit libero, a pharetra augue |
Scrollable Tables
.dcf-wrapper-table-scroll- Add this class along with
.dcf-wrapperto a<div>that wraps the<table>to enable horizontal scrolling as needed.
| Greeting | Amount | Year | Month | Day | Description 1 | Description 2 | Description 3 |
|---|---|---|---|---|---|---|---|
| Hello | $2.00 | 1984 | Jan | 11 | Nullam id dolor | Etiam porta sem malesuada magna mollis euismod | Donec id elit non mi porta gravida at eget metus |
| Hi | $999.99 | 1999 | Dec | 31 | Integer posuere erat | Donec sed odio dui | Cras justo odio |
| Hey | $1,000,000.01 | 2001 | Jul | 15 | Donec ullamcorper nulla non metus auctor fringilla | Cras mattis consectetur purus sit amet fermentum | Donec ullamcorper nulla non metus auctor fringilla |
| Yo | $.01 | 2020 | Feb | 23 | Nulla vitae elit libero, a pharetra augue | Cras mattis consectetur purus sit amet fermentum | Vestibulum id ligula porta felis euismod semper |
| Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. | |||||||
Related: Tables (Elements), Horizontal Text Alignment (Utilities), Tables (Utilities)
Utilities
- Aspect Ratios
- Backgrounds
- Border Color
- Border Radius
- Border Style
- Border Width
- Box Alignment
- Colors
- CSS Columns
- Display
- Flexbox
- Floats
- Grid
- Height & Width
- Margins
- Object-Fit
- Object-Position
- Order (for Flexbox and Grid)
- Overflow
- Padding
- Position
- SVG
- Tables
- Typography
- Visibility
- Z-index
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 (landscape) aspect ratio to an element
.dcf-ratio-9x16- apply a 9×16 (portrait) aspect ratio to an element
.dcf-ratio-4x3- apply a 4×3 (landscape) aspect ratio to an element
.dcf-ratio-3x4- apply a 3×4 (portrait) 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-none@screen- display: none on screen, show when printed
.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-clear-right- clear: right
.dcf-clear-left- clear: left
.dcf-clear-both- clear: both
.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-auto- height: auto
.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-auto- width: auto
.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-xs- max-width: 17.76rem
.dcf-w-max-sm- max-width: 23.68rem
.dcf-w-max-md- max-width: 31.57rem
.dcf-w-max-lg- max-width: 42.09rem
.dcf-w-max-xl- max-width: 56.12rem
.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
.dcf-obj-fit-none- object-fit: none
The object-fit utilities use the object-fit-images polyfill for browsers that don't support object-fit. This explains why you might see font-family: "object-fit: contain” or font-family: "object-fit: cover" in the rules.
Object-Position
.dcf-obj-top- object-position: top
.dcf-obj-right- object-position: right
.dcf-obj-bottom- object-position: bottom
.dcf-obj-left- object-position: left
.dcf-obj-right-top- object-position: right top
.dcf-obj-right-right- object-position: right bottom
.dcf-obj-left-bottom- object-position: left bottom
.dcf-obj-left-top- object-position: left top
Order (for Flexbox and Grid)
.dcf-1st- first
.dcf-2nd- second
.dcf-3rd- third
Responsive suffixes (@sm, @md, @lg, @xl) can be used with the order utilities to adjust order at the desired breakpoints.
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
Tables
.dcf-table-fixed- table-layout: fixed
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-word-wrap- force long words or strings to hyphenate and wrap to a new line as needed
.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
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-load- lazy load images
.dcf-fade-in- animates opacity from 0 to 100%
.dcf-fade-out- animates opacity from 100% to 0
.dcf-fade-in class.Related: Images (Elements)
Display
.dcf-d-none@print- display: none when printed
Related: Display (Utilities)