diff options
Diffstat (limited to 'build/poor-mans-full-bleed/index.html')
| -rw-r--r-- | build/poor-mans-full-bleed/index.html | 27 |
1 files changed, 2 insertions, 25 deletions
diff --git a/build/poor-mans-full-bleed/index.html b/build/poor-mans-full-bleed/index.html index bbd62be..8dd5e8e 100644 --- a/build/poor-mans-full-bleed/index.html +++ b/build/poor-mans-full-bleed/index.html @@ -3,11 +3,12 @@ <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;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> +<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> @@ -16,25 +17,15 @@ <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> @@ -53,9 +44,7 @@ </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> @@ -84,13 +73,9 @@ </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%; } @@ -104,24 +89,16 @@ 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> |