Quick tutorial on how to implement a fancier "full-bleed" element effect with barely any CSS at all
I recently came across the very well written and interesting article, Full-Bleed Layout Using CSS Grid, while browsing my daily designer feeds. I won’t go into the post’s specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS grid property.
While the approach in the article works perfectly fine, I thought to myself, “Is there not a simpler, more backwards compatible way to do this?”. Indeed there is.
I try my best when creating specific element designs or layouts to have everything render consistently across almost all browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn’t be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.
What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much any browser that can run the basic version of CSS rendering. If the browser you’re targeting supports max-width and margins - then have no fear, full-bleeds are here.
Our HTML Example
Let’s create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:
This works well as it is, but we will need to “section” off our different areas of content based on whether we want them full-bleed or not. We do this with - you guessed it - the section element. In this demo we want the image and blockquote to become full-bleed when rendered, so we’ll add the full-bleed class to those sections for now (more on that later):
That’s it for the HTML!
The Magic CSS (Not Really)
Now take a deep breath and get ready for some hard CSS work:
That’s it. Really. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as “full-bleed”, just wrap it in a section tag and sick the full-bleed class on it. Done and done.
Obviously you’ll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.
You could also further customize your options by including a class like half-bleed, which maybe only expands slightly outside the main section max-width:
For those concerned about accessibility: The section element is a flow content element, so it can contain almost all HTML elements.