1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Poor Man's CSS Full-Bleed Layout</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="poor-mans-css-full-bleed-layout">Poor Man’s CSS Full-Bleed Layout</h1>
<p>2020-10-07</p>
<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, 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 <code>grid</code> property.</p>
<p>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.</p>
<p><strong>Don’t care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p>
<h2 id="make-the-web-backwards-compatible">Make the Web Backwards Compatible</h2>
<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> 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.</p>
<p>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 <em>any browser</em> that can run the basic version of CSS rendering. If the browser you’re targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p>
<h2 id="our-html-example">Our HTML Example</h2>
<p>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:</p>
<pre><code><main>
<article>
<h1>Main Heading</h1>
<p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
<img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
<p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
<blockquote>
<p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
<cite>- Some guy</cite>
</blockquote>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
</article>
</main>
</code></pre>
<p>This works well as it is, but we will need to “section” off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we’ll add the <code>full-bleed</code> class to those sections for now (more on that later):</p>
<pre><code><main>
<article>
<section>
<h1>Main Heading</h1>
<p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
</section>
<section class="full-bleed">
<img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
</section>
<section>
<p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
</section>
<section class="full-bleed">
<blockquote>
<p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
<cite>- Some guy</cite>
</blockquote>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
</section>
</article>
</main>
</code></pre>
<p>That’s it for the HTML!</p>
<h2 id="the-magic-css-not-really">The Magic CSS (Not Really)</h2>
<p>Now take a deep breath and get ready for some hard CSS work:</p>
<pre><code>article {
width: 100%;
}
article section {
margin: 0 auto;
max-width: 480px; /* This can be whatever you want */
width: 100%;
}
article section.full-bleed {
max-width: 100%;
}
</code></pre>
<p>That’s it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as “full-bleed”, just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p>
<p>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.</p>
<h3 id="maybe-not-quite-full-bleed">Maybe Not-Quite-Full-Bleed?</h3>
<p>You could also further customize your options by including a class like <code>half-bleed</code>, which maybe only expands slightly outside the main section <code>max-width</code>:</p>
<pre><code>article section.half-bleed {
max-width: 960px;
}
</code></pre>
<h3 id="sidenote">Sidenote</h3>
<p>For those concerned about accessibility: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">section element</a> is a flow content element, so it can contain almost all HTML elements.</p>
<p><a href="https://codepen.io/bradleytaunt/pen/mdEdjzz">Live CodePen Example</a></p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://barf.btxx.org">barf</a>. <br>
Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
