|
| 1 | +--- |
| 2 | +title: Blog |
| 3 | +tags: |
| 4 | + - demo-content |
| 5 | + - code |
| 6 | + - blog |
| 7 | +category: updates |
| 8 | +--- |
| 9 | + |
| 10 | +The best way to demo a code post is to display a real life post, so check out this one from [andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/) about a full bleed CSS utility. |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +Sometimes you want to break your components out of the constraints that they find themselves in. A common situation where this occurs is when you don’t have much control of the container that it exists in, such as a CMS main content area. |
| 15 | + |
| 16 | +This is even more the case with editing tools such as the [WordPress Gutenberg editor](https://wordpress.org/gutenberg/), where in theory, you could pull in a component from a design system and utilise it in the main content of your web page. In these situations, it can be pretty darn handy to have a little utility that makes the element 100% of the viewport’s width _and_ still maintain its flow within its parent container. |
| 17 | + |
| 18 | +This is when I normally pull the `.full-bleed` utility class out of my back pocket. |
| 19 | + |
| 20 | +## The `.full-bleed` utility |
| 21 | + |
| 22 | +It’s small, but hella mighty: |
| 23 | + |
| 24 | +```css |
| 25 | +.full-bleed { |
| 26 | + width: 100vw; |
| 27 | + margin-left: 50%; |
| 28 | + transform: translateX(-50%); |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +Here it is in a context where it makes a fancy `<aside>` and a `<figure>` element bleed out of their parent container. |
| 33 | + |
| 34 | +<iframe height="300" style="width: 100%;" scrolling="no" title="Piccalilli CSS Utility — Issue #2 — Full bleed utility" src="//codepen.io/andybelldesign/embed/Nmxrwv/?height=300&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> |
| 35 | + See the Pen <a href='https://codepen.io/andybelldesign/pen/Nmxrwv/'>Piccalilli CSS Utility — Issue #2 — Full bleed utility</a> by Andy Bell |
| 36 | + (<a href='https://codepen.io/andybelldesign'>@andybelldesign</a>) on <a href='https://codepen.io'>CodePen</a>. |
| 37 | +</iframe> |
| 38 | + |
| 39 | +The `.full-bleed` utility gives those elements prominence and _importantly_ keeps their semantic place in the page. Just how I like it. |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +🔥 **Pro tip**: 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: |
| 44 | + |
| 45 | +```css |
| 46 | +.wrapper { |
| 47 | + max-width: 50rem; |
| 48 | + margin-left: auto; |
| 49 | + margin-right: auto; |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +Having a container like `.wrapper` helps to create consistent, centred content. |
| 54 | + |
| 55 | +--- |
| 56 | + |
| 57 | +### How the `.full-bleed` utility works |
| 58 | + |
| 59 | +We set the container to be `width: 100vw`, which equates to the full viewport width. We couldn’t set it to `width: 100%` because it would only fill the space of its parent element. The parent element’s width _is_ useful though, because by setting `margin-left: 50%`, we are telling the component to align its **left edge** to the center of its parent element, because `50%` is half of the **parent element’s** width. |
| 60 | + |
| 61 | +Finally, we use CSS transforms to `translateX(-50%)`. Because the transform works off the element’s dimensions and not the parent’s dimensions, it’ll pull the element back `50vw`, because it’s `100vw` wide, thus making it sit perfectly flush with the viewport’s edges. |
| 62 | + |
| 63 | +## Wrapping up |
| 64 | + |
| 65 | +Hopefully this short and sweet trick will help you out on your projects. If it does, [drop me a tweet](https://twitter.com/andybelldesign), because I’d love to see it! |
0 commit comments