Bleeds

Codebase has two full-bleed layout techniques, depending on what kind of responsive container you’re using.

Full Bleed Using CSS Transform

This uses Andy Bell’s full bleed utility. This is a useful technique, but it has its limitations. Since it is based on CSS transforms, it only works on centered layouts – such as the traditional container that uses x-axis margin auto centering.

Codebase contains this utility in the .full-bleed CSS class. It must be cented for this technique to work properly, because its technique busts out of a centered column using CSS negative margins and x-axis transforms.

Below is a demo of the .full-bleed utility. However, the layout of this documentation is off-center on wider screens, to accommodate the sidebar. Therefore, the demo will look wrong on wider screens. To make it look right, simply dismiss the sidebar.

<div class="full-bleed">
  <em>CSS transform</em> full bleed content...
</div>

Container Grid Full Bleed

The Codebase .container-grid-full-bleed class uses CSS grid, following Josh W Comeau’s technique).

Codebase layout bleeds only work as immediate child elements inside Codebase containers.

<div class="container-grid-full-bleed">
  Container grid full bleed content...
</div>

Codebase also has .container-grid-partial-bleed-left and .container-grid-partial-bleed-right.

<div class="container-grid-partial-bleed-left">
  Container grid partial bleed (left) content...
</div>

<div class="container-grid-partial-bleed-right">
  Container grid partial bleed (right) content...
</div>

So, what could you use partial bleeds for?

You can combine partial bleeds, (max) widths (and floats) for displaying images that deserve more space on wide screens:

<div class="container-grid-partial-bleed-left">
  <div class="w-lg float-right">
    <img src="" alt="">
  </div>
</div>

A partial bleed is great for having your main text in a centered column, with a sidebar alongside it (perhaps a sticky, e.g. for ads or social sharing buttons. The partial bleed can then be used to protrude oversized images to the opposite side, so that it doesn’t interfere with the sidebar.