Objects

Skill Level: 
Intermediate

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. If you use any of the following column classes with responsive suffixes in your grid-based layout, you must also include .dcf-col-100%. The grid will not automatically create a single column for your grid content.
.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 the 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%-center
Apply to a grid child element to define the column width as one-half of the grid and locate it in the center of the grid's tracks.
.dcf-col-50%-center
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 the 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-50%
Apply to a grid child element to define the column width as one-half of the grid and locate it anywhere on the grid's tracks based on the position of its sibling grid columns.
1
.dcf-col-50%
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 the 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%-center
Apply to a grid child element to define the column width as one-third of the grid and locate it in the center of the grid's tracks.
.dcf-col-33%-center
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 the 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-33%
Apply to a grid child element to define the column width as one-third of the grid and locate it anywhere on the grid's tracks based on the position of its sibling grid columns.
1
.dcf-col-33%
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 the 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%-center
Apply to a grid child element to define the column width as two-thirds of the grid and locate it in the center of the grid's tracks.
.dcf-col-67%-center
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 the 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-67%
Apply to a grid child element to define the column width as two-thirds of the grid and locate it anywhere on the grid's tracks based on the position of its sibling grid columns.
1
.dcf-col-67%
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 the 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 the 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-25%
Apply to a grid child element to define the column width as one-fourth of the grid and locate it anywhere on the grid's tracks based on the position of its sibling grid columns.
1
.dcf-col-25%
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 the 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 the 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
…
.dcf-col-75%
Apply to a grid child element to define the column width as three-fourths of the grid and locate it anywhere on the grid's tracks based on the position of its sibling grid columns.
1
.dcf-col-75%
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-full
The grid-full object lays out child elements in a single column 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, @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), Gap (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.
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.

<div class="dcf-media">
  <div class="dcf-mr-4">
    <img src="https://via.placeholder.com/100x100" alt="Placeholder image.">
  </div>
  <div class="dcf-media-body">
    <p class="dcf-w-max-lg">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.</p>
  </div>
</div>
Contributed By: 
IIM

Comments

akunce2's photo

Submitted by Amy Kunce on Mon, 2020-11-09 14:48
A lot of this is just what the element is named (.dcf-col-50%-start) and not how it should be incorporated into the html for a page. The 4.1 documentation includes more examples, both html and how the resulting code looks) than the 5.0 documentation does. (ex. https://wdn.unl.edu/documentation/4.1/grid)