Creating a full bleed CSS utility
Creating a full bleed CSS utility êŽë š
Sometimes you want your component to break out of the constraints that it finds itself in. A common situation where this might occur is when you donât have much control of the container that it exists in, such as a CMS template or third-party plugin.
This is even more the case with editing tools such as the WordPress Gutenberg editor, where you could pull any block from a vast array of options. In these situations, it can be pretty darn handy to have a little utility that makes your component 100% of the viewportâs width and still maintain its flow within its parent container.
In this tutorial, weâre going to do exactly that by creating a reusable utility class, so letâs get stuck in.
The âfull bleedâ utility
Itâs a small utility class that does one job and does it well. First up, hereâs the code:
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}
Tiny, right? Check out this CodePen demo, to see it in action:
The âfull-bleedâ utility, in this context, helps to give those elements content visual prominence and importantly keeps their place in the pageâs overall flow.
FYI
When working with a utility like .full-bleed, itâs a good idea to add an inner container that has a max-width and auto horizontal margin. For this, I normal create a shared âwrapperâ component like this:
.wrapper {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}
Having a container like âwrapperâ helps to create consistent, centred content.
As mentioned at the start of the tutorial: you might not have access to the markup within, so an alternative to the âwrapperâ is something like this:
.full-bleed > * {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}
This targets the direct children of the full bleed utility and then applies that same âwrapperâ effect.
How the âfull-bleedâ utility works
We set the utilityâs width to be 100vw, which equates to the full viewport width. We couldnât set the width to be 100% because it would only fill the space of its parent element, rendering it useless.
The parent elementâs width is useful though, because by setting the utilityâs margin-left to 50%, we are telling the component to align its left edge to the center of its parent element, because by doing this, we are setting the left margin to be half of the parent elementâs width.
Finally, we use calc to remove 50vw from that 50% margin value. Remember: 50vw equates to half of the window width. This is how it sits in the middle of the container, because that accurate, now negative margin is calculated and applied. CSS maths magic!
FYI
Because we are setting the utilityâs width to 100vw, thereâs a chance that youâre going to get horizontal scrollbarsâespecially on Windows.
The way I combat this is setting the following on the body element:
body {
overflow-x: hidden;
}
This hides overflow content, which in turn, prevents those scrollbars. This technique is sometimes scoffed at, but I think it works great if you think of your body element as a canvas, much like a print canvas.
In print, we have bleed, which is the area beyond the point where the paper gets trimmed. Because of this, print designers (like me, yay) are used to accounting for bleed in our design work. We do this by setting safe area guides.
Each element of the print canvas labelled. Think of the body as the safe area and our full bleed utility going beyond the trim area, into the bleed area.
This approach with the body is pretty much the same as accounting for bleed in print and yep, you guessed it: this is why the utility is named âfull bleedâ!
Wrapping up
Hopefully this utility will help you to create some visual interest in your designs.
This site uses the âfull bleedâ utility to break out portions of the article to catch your attention, which works great. I can dot them around wherever I need them, too. Thatâs the sort of flexibility that I love.