Margin Bleed
The content of a page is limited to a maximum width to make reading text more comfortable. For non-text elements however, it's useful to be able to go beyond those limits (i.e. "bleed" into the margin).
The WSU WDS has two wrappers around the main content: .wsu-wrapper-content is an
outer wrapper with padding, and .wsu-wrapper-main inside that that uses
margin: 0 auto; to center itself. These CSS classes allow you to make elements the
full width of either of these wrappers.
When comparing widths, note that <p>s have a narrower max width than the
wrapper.
Here's some raw text outside any element to ensure styling works on raw text. You should never do this, but this case needs to work.
Full Main Bleed
.asis-full-main-bleed will make the element the width of the page except the
padding around the page. This is for textish content that you want to make wider without going
all the way to the edge of the page.
Basic content
This table is wrapped in an .asis-full-main-bleed, but the wrapper also has
.asis-overflow-wrapper:
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
|---|---|---|---|---|---|---|---|---|---|
| Row 1 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 2 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 3 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 4 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 5 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 6 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 7 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 8 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 9 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 10 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 11 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 12 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 13 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 14 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 15 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 16 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 17 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 18 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 19 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
| Row 20 | Column 2 content | Column 3 content | Column 4 content | Column 5 content | Column 6 content | Column 7 content | Column 8 content | Column 9 content | Column 10 content |
Full Content Bleed
.asis-full-content-bleed will make the element the full width of the page without
any padding. This is useful for non-test content like images.
Basic content