Skill Level:
Intermediate
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. 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%-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 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%-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 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%-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 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%-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 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%-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 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%-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 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%-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 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%-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 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%-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 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%-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 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,@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), 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.
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
- Printer-friendly version
- Log in to post comments
Comments
More specific code samples would be nice