small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2p5zvxB">medium bookmark / Raindrop.io</a> |  </p>
<p>This is one of those web development tasks that starts simple but gets complicated in the process: Applying vertical margins to elements inside an article, for example a blog post that consists of compiled markdown.</p>
<p>Most of the time, you have to deal with exceptions and dependencies: Headlines and images need more whitespace. But if an image follows another image, there should be less whitespace between them. The whitespace between an <code>h2</code> and an <code>h3</code> should be larger than between an <code>h2</code> and a paragraph. And so on.</p>
<p>When I started with web development a couple of years ago, all those exceptions and dependencies always lead to convoluted code, visual inconsistencies and unexpected behavior. I definitely googled »<a href="http://ift.tt/2p5uDc5">Why does margin-top not work</a>« more than once.</p>
<p>What follows is a technique I’ve now been using for a while. It avoids collapsing margins, offers decent readability and allows for complex dependencies.</p>
<h3>Step 1</h3>
<p>A simple article might look like this:</p>
<pre>&lt;article class="article"&gt;</pre>
<pre>  &lt;h1&gt;Hello World&lt;/h1&gt;</pre>
<pre>  &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;</pre>
<pre>  &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;</pre>
<pre>  &lt;img src="…" alt="…"&gt;</pre>
<pre>  &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;</pre>
<pre>  &lt;ul&gt;<br>    &lt;li&gt;Lorem&lt;/li&gt;<br>    &lt;li&gt;Ipsum&lt;/li&gt;<br>    &lt;li&gt;Dolor&lt;/li&gt;<br>  &lt;/ul&gt;</pre>
<pre>&lt;/article&gt;</pre>
<p>I usually take two paragraphs and adjust the vertical margin between them so that it looks good. Then I use that value as the base margin for all elements.</p>
<pre>.article &gt; * + * { <br>    margin-top: 1.5rem;<br>}</pre>
<p>This rule adds <code>margin-top</code> to any direct children of <code>.article</code> that have an adjacent sibling. By only applying <code>margin-top</code> to direct children, I avoid any unwanted behavior. For instance: The <code>&lt;ul&gt;</code> in the HTML code above would receive <code>margin-top</code>, but not its <code>&lt;li&gt;</code>.</p>
<p>In the CodePen below you can see an example:</p>
<div></div>
<p>The margins that are applied by the CSS rule above can be highlighted.</p>
<h3>Step 2</h3>
<p>In the next step I add more specific rules, for instance:</p>
<pre>.article &gt; img + * { <br>    margin-top: 3rem;<br>}</pre>
<p>Any element that follows an <code>img</code> receives a specific <code>margin-top</code>. This is similar to applying <code>margin-bottom</code> to the <code>img</code> directly. But using the adjacent sibling selector and <code>margin-top</code> has two advantages: I don’t have to remove <code>margin-bottom</code> from the <code>:last-child</code> and avoid collapsing margins.</p>
<p>The CodePen below shows an extended example:</p>
<div></div>
<p>The margins that are applied in this step can be highlighted.</p>
<h3>Step 3</h3>
<p>In this step I add rules to specific elements, for instance:</p>
<pre>.article &gt; * + h2 { <br>    margin-top: 4rem;<br>}</pre>
<pre>.article &gt; * + img { <br>    margin-top: 3rem;<br>}</pre>
<p>If an <code>h2</code> has an adjacent sibling, it receives a specific <code>margin-top</code> . The same goes for an image with an adjacent sibling.</p>
<p>Extended CodePen example:</p>
<div></div>
<p>The margins that are applied in this step can be highlighted.</p>
<h3>Step 4</h3>
<p>In the last step I deal with specific dependencies:</p>
<pre>.article &gt; img + img { <br>    margin-top: 1rem; <br>}</pre>
<p>If an image follows another image, the margin between them should be very small.</p>
<p>Extended CodePen example:</p>
<div></div>
<p>The margins that are applied in this step can be highlighted.</p>
<p>And if you want, you can get even more specific. For instance:</p>
<pre>.article &gt; img + img + img + h2 { <br>    margin-top: 5rem;<br>}</pre>
<p>If an <code>h2</code> follow three images in a row, it receives a specific <code>margin-top</code> . Fortunately, this is an edge case. But it’s good to know that the adjacent sibling selector can solve such complex dependencies.</p>
<h3>Advanced use</h3>
<p>To improve readability, I use (SCSS) nesting and write each rule in one line. I also don’t group selectors with the same value, since <a href="http://ift.tt/HDgsQF">CSSO</a> will take care of that in my build task.</p>
<pre>.article {<br>    &gt; * + * { margin-top: 1.5rem }</pre>
<pre>    &gt; h2 + * { margin-top: 1rem }<br>    &gt; img + * { margin-top: 3rem }</pre>
<pre>    &gt; * + h2 { margin-top: 4rem }<br>    &gt; * + h3 { margin-top: 3.5rem }<br>    &gt; * + img { margin-top: 3rem }</pre>
<pre>    &gt; img + img { margin-top: 1rem }<br>    &gt; h2 + h3 { margin-top: 4.5rem }<br>}</pre>
<p>This technique also work well with SASS or CSS variables, for example for baseline grids. If every margin is calculated from a base margin variable, you only have to change that variable to increase or decrease the overall whitespace.</p>
<p>CodePen example using a CSS variable:</p>
<div></div>
<h3>Conclusion</h3>
<p>The websites we develop at our agency usually have very complex articles. They not only consist of compiled markdown, but also elements such as category titles, intro texts or nested layouts.</p>
<p>Using the adjacent sibling selector and only <code>margin-top</code> allows me solve complex design requirements while maintaining comprehensible CSS rules. Especially if I have to add or adjust rules later on.</p>
<div><a href="http://ift.tt/2p5zvxB">http://ift.tt/2p5zvxB</a></div>


Advanced vertical margins How the adjacent sibling selector can solve complex design requirements wh…

Advanced vertical margins How the adjacent sibling selector can solve complex design requirements wh…

Top Stories