Column dividers
Information about content lines and column dividers.
Types
Content line
A 1 pixel edge to edge bar that can divide content.
HTML code snippet
<div class="content_line"></div>
Content layout column dividers
Adds dividers between specified .content-l_col-X-X
classes.
Layout dividers work in conjunction with .content-l_col-X-X
elements and have specific needs depending on which column element variant they are attached to. For example, .content-l_col-1-2
has different divider needs than .content-l_col-1-3
because they may break to single columns at different breakpoints.
Dividers use absolute positioning relative to the .content-l
element and depend on .content-l
using position: relative;
. This allows vertical dividers to span the height of the tallest column. Just be aware that if you have more than one row of columns, and each row has columns of different widths, the borders will cause unwanted overlapping since they will span the height of the entire .content-l
element.
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)
HTML code snippet
<div class="content-l content-l__large-gutters">
<div class="content-l_col content-l_col-1-2">
<img src="https://dummyimage.com/600x320/addc91/101820" alt="Placeholder image">
<br>
Half-width column (spans 6/12 columns)
</div>
<div class="content-l_col content-l_col-1-2 content-l_col__before-divider">
<img src="https://dummyimage.com/600x320/addc91/101820" alt="Placeholder image">
<br>
Half-width column (spans 6/12 columns)
</div>
</div>
<br>
<!-- Starting a new .content-l so that the dividers from
.content-l_col.content-l_col-1-2.content-l_col__before-divider
won't overlap the .content-l_col-1-3 columns. -->
<div class="content-l content-l__large-gutters">
<div class="content-l_col content-l_col-1-3">
Third-width column (spans 4/12 columns)
</div>
<div class="content-l_col content-l_col-1-3 content-l_col__before-divider">
Third-width column (spans 4/12 columns)
</div>
<div class="content-l_col content-l_col-1-3 content-l_col__before-divider">
Third-width column (spans 4/12 columns)
</div>
</div>
Column divider modifiers
cf-grid
columns use left and right border
for fixed margin
which means it’s not possible to set visual left and right borders directly on them. Instead we can use the :before
pseudo element and position it absolutely. The added benefit of doing it this way is that the border
spans the entire height of the next parent using position: relative;
. This means that the border
will always match the height of the tallest column in the row.
.my-column-1-2 {
// Creates a column that spans 6 out of 12 columns.
.grid_column(6, 12);
// Add a top divider only at screen 599px and smaller.
.respond-to-max(599px {
.grid_column__top-divider();
});
// Add a left divider only at screen 600px and larger.
.respond-to-min(600px, {
.grid_column__left-divider();
});
}