Full-width Layout Bleed Shortcode

While the extend content style class enables you to “break” an element out of the content column and span the total width of the layout, it does not enable you to break an element all the way out to the edges of the screen.

For this type of behavior, you’ll need a full-width layout bleed, but this comes with some tricky CSS and HTML requirements.

Fortunately, Focus includes full-width bleed CSS for both Readability mode and Focus mode. In addition, Focus includes a shortcode that takes care of the HTML!

Let’s take a closer look at how you can use the Focus full-width layout bleed to enhance your Posts or Pages.

How to Use the Bleed Shortcode

Focus 0.9.6 introduced a tag-style bleed shortcode that outputs the HTML necessary to create a full-width layout bleed:

[bleed]
You can put any kind of content you want in here!
[/bleed]

Notice the opening and closing bleed tags—hence the “tag-style shortcode” description.

This enables you to clearly delineate where a full-width section starts and stops. And as I’ve already indicated, there are no limits to what you can place between the bleed tags:

// Modular Content (or any shortcode)
[bleed][modular_content id="1288"][/bleed]

// Long-form content
[bleed]
<h2>Section Heading</h2>

Even though this is only one sentence, we are calling it a paragraph of content.

And here is a second paragraph, followed by a list:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

And a final sentence fragment masquerading as a paragraph.
[/bleed]

Shortcode Options

The examples shown above will output the following HTML structure for full-width layout bleeds:

<div class="bleed">
	<div class="container">
		<div class="text post_content">
			...your content is output here...
		</div>
	</div>
</div>

This results in a bleed containing a column of text that works exactly like a typical column of text in Focus (same content width, $w-content, and associated typography treatments).

But depending on what you want to do with your bleeds, you may want to employ one or more of the following options when including a bleed shortcode:

  • style — (string) add a CSS class to the outermost bleed container
  • id — (integer) add an ID to the outermost bleed container
  • full — (boolean) if true, your bleed content will span the entire usable width of the layout, $w-total, instead of only spanning the content width, $w-content
  • depth — (integer) specify tab depth for OCD HTML source indentation

The style option is the most useful, as this enables you to specify a CSS class (or classes) to change the appearance of your bleed.

Pro tip 1: Separate multiple classes with spaces.

Pro tip 2: See the section below for copy-and-paste Custom CSS you can use to change the background colors of your bleeds.

The id option enables you to specify an ID on the outermost bleed container, and this is helpful for both link and JS targeting.

Want a bigger usable canvas inside your bleed? Use the full option to remove the inner <div class="text post_content"> container, and this will leave you with the total layout width, $w-total, to work your presentational magic.

Finally, if you are an insufferable OCD nutcase like me, you can use the depth parameter to specify a tab depth for HTML source indentation management.

Recommended Custom CSS

The most likely customization you’ll want to make with your bleeds is to add a background color to make them stand out visually (heck, that’s kind of the point!).

To help you with this, I recommend the following SCSS, which you can copy and paste directly into your Custom CSS:

.bleed {
	&.yellow {
		background-color: #fff5d2;
	}
	&.orange {
		background-color: #f3dac0;
	}
	&.red {
		background-color: #f0726a;
	}
	&.olive {
		background-color: #dae2df;
	}
	&.blue {
		background-color: #7fa7d8;
	}
	&.light-blue {
		background-color: #d2ecff;
	}
	&.steel {
		background-color: #adb7c0;
	}
	&.light-steel {
		background-color: #d1dae2;
	}
}

Once you’ve saved this to your Custom CSS, you’ll be able to use the style option to modify your bleeds:

// Yellow background
[bleed style="yellow"]...my bleed content...[/bleed]

// Light steel background
[bleed style="light-steel"]...my bleed content...[/bleed]

For this final example, let’s combine shortcode options so you can see how to use more than one at a time:

[bleed style="orange" id="section-bleed-1" full=1 depth=5]...my bleed content...[/bleed]

This will result in a bleed with an orange background, an HTML ID of section-bleed-1, content that spans the entire usable width of the layout ($w-total), and an OCD HTML source indentation of 5 tabbed spaces.