{"id":8543,"date":"2022-09-02T17:40:35","date_gmt":"2022-09-02T17:40:35","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=7024"},"modified":"2025-07-18T14:48:09","modified_gmt":"2025-07-18T14:48:09","slug":"how-to-create-a-css-design-system-from-scratch","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/","title":{"rendered":"How to create a CSS design system from scratch?"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"183464.375\" data-cache-vw-t=\"617\" data-cache-h-t=\"149563.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"112641.6875\"><div class=\"col all auto-number-headings\"><p>A <dfn>CSS design system<\/dfn> is the core of your web design, so it's important that it brings flexibility and consistency throughout the design process. Making a CSS design system from scratch is, in my opinion, the second best thing in web design. The very best is using your own CSS design system to make beautiful layouts for your website.<\/p><p>You will be brought back to the very start \u2013 from adding a CSS browser reset to adding features and fixing issues. If this is your first time creating a CSS design system from scratch, I can assure you that this is an educational experience.<\/p><p>Let's start with the process of creating a CSS design system from scratch. There are a lot of steps, but don't worry, no design system is done in 1 day. In fact, I am still tweaking the CSS design system of this very website every now and then. I am even jealous of the CSS design system I will give away for free for you to enjoy.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><p>Use the demo to compare your code throughout this article by clicking the button below.<\/p><a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/demo-file-how-to-make-a-css-design-system.html\" target=\"__blank\" class=\"button\" rel=\"noopener\">View demo<\/a><tw-shortcode-wrapper data-id=\"12\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><p>These are the steps to making a CSS design system that I will guide you through:<\/p><ol><li>Setting up the files<\/li><li>CSS browser reset<\/li><li>Font size and line height<\/li><li>Colors<\/li><li>Containers<\/li><li>Rows and columns<\/li><li>Spacing between elements<\/li><li>Styling for common elements<\/li><li>Creating a simple layout<\/li><li>Utility classes for simple styling<\/li><li>Styling for less common elements<\/li><li>Utility classes for advanced layouts<\/li><li>Creating an advanced layout<\/li><li>Breakpoint-specific utility classes for responsive layouts<\/li><li>Making your layout responsive<\/li><li>Creating a header<\/li><li>Creating a top bar<\/li><li>Creating a footer<\/li><\/ol><p>Let's begin!<\/p><tw-shortcode-wrapper data-id=\"13\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Setting up the files<\/h2><p>The bare minimum that you need to make a CSS design system is a folder called <code>css-design-system<\/code> with an HTML file called <code>index.html<\/code>, and a CSS file called <code>index.css<\/code> within that folder.<\/p><p>The contents of the HTML file:<\/p><tw-pre><code class=\"html-code\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"index.css\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body class=\"color-scheme-dark\"&gt;\r\n    &lt;main&gt;\r\n      &lt;article&gt;\r\n      &lt;\/article&gt;\r\n    &lt;\/main&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/tw-pre><p>The CSS file contains nothing yet.<\/p><h2>CSS browser reset<\/h2><p>Your web browser adds default styling for all HTML elements, but not every browser adds the same styling. That's why it's best to reset all styling, in order to make the CSS design system work the same way in all modern web browsers.<\/p><p>This is the CSS browser reset that I use:<\/p><tw-pre><code class=\"css-code\">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }<\/code><\/tw-pre><p>Add the CSS as shown above to the CSS file <code>index.css<\/code>. All CSS code you are about to write further into this article, is supposed to be added below the CSS browser reset, in order to be able to overwrite those if the specificity is equal.<\/p><p>There are multiple elements which's styling has not yet been reset, but since those styles are going to be defined anyways, there is no need to redefine those styles beforehand.<\/p><h2>Font size and line height<\/h2><p>The first thing you do when making a CSS design system, is setting the font sizes and line heights for the body and heading elements.<\/p><p>I suggest you add the following HTML inside the <code class=\"html-code\">&lt;article&gt;<\/code>-element:<\/p><tw-pre><code class=\"html-code\">&lt;h2&gt;Lorem ipsum dolor sit&lt;\/h2&gt;\r\n&lt;p&gt;Lorem ipsum &lt;a href=\"#\"&gt;dolor sit&lt;\/a&gt;.&lt;\/p&gt;\r\n&lt;h2&gt;Lorem ipsum dolor sit&lt;\/h2&gt;\r\n&lt;h3&gt;Lorem ipsum dolor sit&lt;\/h3&gt;\r\n&lt;p&gt;Lorem ipsum dolor sit.&lt;\/p&gt;<\/code><\/tw-pre><p>As you can see, we start by adding <code class=\"html-code\">&lt;h2&gt;<\/code> and <code class=\"html-code\">&lt;h3&gt;<\/code>-elements with paragraphs in between. These elements are very common, so it's good to use those elements as a starting point for defining font sizes. Less common elements, like <code class=\"html-code\">&lt;h1&gt;<\/code>, <code class=\"html-code\">&lt;h4&gt;<\/code>, <code class=\"html-code\">&lt;h5&gt;<\/code>, and <code class=\"html-code\">&lt;h6&gt;<\/code>, will use those font sizes as a point of reference.<\/p><p>This is the CSS that I ended up with:<\/p><tw-pre><code class=\"css-code\">body {\r\n  font-family: Arial;\r\n  font-size:   19px;\r\n  line-height: 1.5em;\r\n}\r\n h1,  h2,  h3,  h4,  h5,  h6,\r\n.h1, .h2, .h3, .h4, .h5, .h6 {\r\n  font-family: Arial;\r\n  font-weight: 700;\r\n  line-height: 1.2em;\r\n}\r\nh1, .h1 {\r\n  font-size: 40px;\r\n}\r\nh2, .h2 {\r\n  font-size: 33px;\r\n}\r\nh3, .h3 {\r\n  font-size: 28px;\r\n}\r\nh4, .h4 {\r\n  font-size: 24px;\r\n}\r\nh5, .h5 {\r\n  font-size: 21px;\r\n}\r\nh6, .h6 {\r\n  font-size: 19px;\r\n}<\/code><\/tw-pre><p>As you can see in the example above, I did not target <code class=\"html-code\">&lt;p&gt;<\/code>-elements directly. I targeted the <code class=\"html-code\">&lt;body&gt;<\/code>-element instead, because paragraphs will inherit the font properties from its ancestor elements.<\/p><p>Using inheritance instead of directly targeting individual elements makes it easier for you to make utility classes that affect nested elements without having to target them directly.<\/p><p>For example, a class to overwrite the color scheme for a section. Imagine if I directly targeted paragraphs and <code class=\"html-code\">&lt;h1&gt;<\/code> through <code class=\"html-code\">&lt;h6&gt;<\/code>. That means I would have to create 7 selectors in order to overwrite the color of those elements if they were to be placed in a section with a different color scheme.<\/p><p>Instead of doing that, I rely on those elements inheriting the color from its ancestor elements. This will save you a lot of frustration and butchering in order to fix CSS problems whilst creating new ones in your design system.<\/p><tw-shortcode-wrapper data-id=\"14\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Colors<\/h2><p>Colors are used by multiple elements in your CSS design system. In order to manage those colors at one place, I suggest storing them as CSS variables to be able to refer to them from anywhere in the code of your CSS design system.<\/p><p>This is how you define CSS variables (I suggest placing this below the CSS browser reset):<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --black:        rgb(0, 0, 0);\r\n  --darker-blue:  rgb(5, 5, 29);\r\n  --dark-blue:    rgb(12, 12, 70);\r\n  --light-blue:   rgb(13, 100, 176);\r\n  --lighter-blue: rgb(180, 220, 255);\r\n  --gray:         rgb(167, 167, 167);\r\n  --light-gray:   rgb(210, 210, 210);\r\n  --lighter-gray: rgb(243, 243, 243);\r\n  --off-white:    rgb(252, 252, 252);\r\n  --white:        rgb(255, 255, 255);\r\n\r\n  --white-a90:    rgba(255, 255, 255, 0.9);\r\n}<\/code><\/tw-pre><p>CSS variables are basically CSS properties, but they don't have any effect on their own. Instead, you make use of these variables using CSS' <code class=\"css-code\">var<\/code>-function to use them as a value for actual properties. For example, let's give hyperlinks a dark blue color:<\/p><tw-pre><code class=\"css-code\">a {\r\n  color: var(--dark-blue);\r\n}<\/code><\/tw-pre><p>Now, all hyperlinks are dark blue. What happens when those hyperlinks are placed in a section with a dark background color? They will become unreadable, so a hyperlink's color should be dynamic.<\/p><p>Let's define the color of hyperlinks on a light background (dark color scheme for the text) as a variable called <code class=\"css-code\">--hyperlink-color<\/code> with a value that refers to variable <code class=\"css-code\">--dark-blue<\/code> and then set the hyperlink color using variable <code class=\"css-code\">--hyperlink-color<\/code>.<\/p><tw-pre><code class=\"css-code\">a {\r\n  color: var(--hyperlink-color);\r\n}\r\n.color-scheme-dark {\r\n  --hyperlink-color: var(--dark-blue);\r\n  color:             var(--black);\r\n}<\/code><\/tw-pre><p>Now, look back at your HTML file and you might notice that class <code class=\"css-code\">color-scheme-dark<\/code> is added to the <code class=\"html-code\">&lt;body&gt;<\/code>-element. The color variables for elements are defined for elements with this class, to make it dark text on a light background, to ensure readability.<\/p><p>Let's add a class that gives a section a black background color and a class that indicates a light color scheme for its text. Add the the following CSS code below the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code>:<\/p><tw-pre><code class=\"css-code\">.color-scheme-light {\r\n  --hyperlink-color: var(--lighter-blue);\r\n  color:             var(--white-a90);\r\n}\r\n.bg-black {\r\n  background-color: var(--black);\r\n}<\/code><\/tw-pre><p>The code above allows sections to have a black background color using class <code class=\"css-code\">bg-black<\/code> and the hyperlink color to be lighter blue instead of dark blue by using class <code class=\"css-code\">color-scheme-light<\/code>, without directly targeting the hyperlinks within the section.<\/p><p>Let's add classes for the other colors as well:<\/p><tw-pre><code class=\"css-code\">.bg-darker-blue {\r\n  background-color: var(--darker-blue);\r\n}\r\n.bg-dark-blue {\r\n  background-color: var(--dark-blue);\r\n}\r\n.bg-light-blue {\r\n  background-color: var(--light-blue);\r\n}\r\n.bg-lighter-blue {\r\n  background-color: var(--lighter-blue);\r\n}\r\n.bg-gray {\r\n  background-color: var(--gray);\r\n}\r\n.bg-light-gray {\r\n  background-color: var(--light-gray);\r\n}\r\n.bg-lighter-gray {\r\n  background-color: var(--lighter-gray);\r\n}\r\n.bg-off-white {\r\n  background-color: var(--off-white);\r\n}\r\n.bg-white {\r\n  background-color: var(--white);\r\n}<\/code><\/tw-pre><h3>Why inheritance is better than directly overriding values<\/h3><p>Coming back to changing the color of hyperlinks within sections with dark background colors.. You might think, why not just directly overwrite the hyperlink color when placed in a dark background?<\/p><p>Imagine that you made a website with a white background and black text (dark color scheme). You add a section with a dark background and add the class to indicate a light color scheme for its text. Let's say you write the following CSS to do so:<\/p><tw-pre><code class=\"css-code\">.color-scheme-light a {\r\n  color: var(--lighter-blue);\r\n}<\/code><\/tw-pre><p>Then, inside of the same section you have a block that has a light background and needs dark text (dark color scheme), so you have to overwrite that value again. So there you go, you write the following CSS:<\/p><tw-pre><code class=\"css-code\">.color-scheme-dark a {\r\n  color: var(--dark-blue);\r\n}<\/code><\/tw-pre><p>Now, what happens next is a result of one selector overriding another selector. Selector <code class=\"css-code\">.color-scheme-dark<\/code> comes after selector <code class=\"css-code\">.color-scheme-light<\/code>, so it overwrites it, meaning you end up with the following: a website with a white background color and dark text, a section with a dark background color and dark text and within that section a block with a light background and dark text.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-broken-color-schemes.png\" width=\"812\" height=\"1165\" class=\"w50 softer-shadow\" alt=\"Visualization of broken color schemes\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-broken-color-schemes-w630.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"333.4296875\" data-img-h-d=\"477.9140625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"251.21875\" data-img-h-t=\"360.078125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"188.109375\" data-img-h-m=\"269.6171875\" data-img-of-m=\"fill\"><p>Inheritance, on the other hand, is like a waterfall, or a cascade. For example's sake, let's say the color value is the water of a waterfall. The water keeps falling down until it hits the ground. If you set a value, you will set a new ground to stop the waterfall, and you start a new waterfall of which its water has a new value (in this case the value for the <code class=\"css-code\">color<\/code> property).<\/p><p>Combine this with CSS variables, and you can start new waterfalls for the value of a CSS variable, while elements within the waterfall use that CSS variable for properties like the color of its text.<\/p><p>This way you avoid having two selectors overriding each other as is the case when directly overwriting values. That is why inheritance works so well in combination with CSS variables.<\/p><tw-shortcode-wrapper data-id=\"15\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>Containers<\/h2><p>Containers are elements that determine the width of all content placed within it.<\/p><p>Let's say you have a viewport that is 1920 pixels wide. Inside that there is a container that is 1570 pixels wide and it's centered. This means that there will be empty space on the left and right of the container.<\/p><p>This is the CSS to create a container:<\/p><tw-pre><code class=\"css-code\">\/* DT - Desktop *\/\r\n.container {\r\n  width:         1570px;\r\n  margin-left:   auto;\r\n  margin-right:  auto;\r\n  padding-left:  25px;\r\n  padding-right: 25px;\r\n}<\/code><\/tw-pre><h3>Responsive container width<\/h3><p>If you have a screen that is 1200 pixels wide, then 1570 pixels is too wide. This means that the container has to change its width on smaller viewports.<\/p><p>When defining responsive widths for a container, you define the following: the minimum viewport width in which the container will fit, the maximum viewport width in which the container is wide enough, and the container width itself.<\/p><p>Let's say that you want to add a container width for viewports that are at least 1200 pixels wide and below 1600 pixels wide.<\/p><p>The container width should be a little bit narrower than the minimum viewport width, since the scrollbar can take up to 17 pixels of the viewport width by default. So let's subtract 30, because that is an even number, it's easy to remember and it has some room for whenever some browser decides to use a wider scrollbar.<\/p><p>Let's say the container is 1170 pixels wide. This is how I suggest you write this CSS:<\/p><tw-pre><code class=\"css-code\">\/* LT - Laptop &amp; Small desktop *\/\r\n@media (min-width: 1200px) and (max-width: 1599.98px) {\r\n  .container {\r\n    width: 1170px;\r\n  }\r\n}<\/code><\/tw-pre><p>Did you notice I wrote <code class=\"css-code\">max-width: 1599.98px<\/code>? If you write 1599 pixels instead, there is a chance that while resizing your viewport that it can have fractional pixels. This will make it possible for your viewport not to match that media query, which is not good. It's rare, but it's easy to fix, so why not write <code class=\"css-code\">1599.98px<\/code> instead?<\/p><p>Also.. If you write <code class=\"css-code\">1599.98px<\/code> then any viewport below 1600 pixels wide will match the media query. However, if you wrote <code class=\"css-code\">1599.99px<\/code>, then a viewport that is 1600 pixels wide would also match the media query. Why? I don't know, but I found out about this by looking at the CSS of the website of Bootstrap; they used that fix.<\/p><p>Now, let's go back to making responsive widths for the container. Let's say that, for viewports that are at least 992 pixels wide and below 1200 pixels wide, that the container width is 962 pixels wide.<\/p><tw-pre><code class=\"css-code\">\/* TL - Tablet (landscape) *\/\r\n@media (min-width: 992px) and (max-width: 1199.98px) {\r\n  .container {\r\n    width: 962px;\r\n  }\r\n}<\/code><\/tw-pre><p>For viewports with a width below 1025 pixels, you can assume they do not have a scrollbar that takes up content. Viewports with such a width are most certainly tablets, not desktop devices.<\/p><p>Although the example above targets viewports of atleast 992 pixels wide, it does reach viewport widths that are below 1200 pixels. This is why the possibility of a scrollbar is taken into consideration and that is why 30 pixels has been subtracted from the minimum viewport width to get the container width as a result.<\/p><p>Below I made 3 more breakpoints, one for tablets, one for mobile devices in landscape mode or small tablets, and one for mobile devices in portrait mode.<\/p><p>The container is now full width for all the breakpoints written below:<\/p><tw-pre><code class=\"css-code\">\/* TP - Tablet (portrait) &amp; Tall mobile (landscape) *\/\r\n@media (min-width: 768px) and (max-width: 991.98px) {\r\n  .container {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\/* ML - Mobile (landscape) &amp; Small tablet *\/\r\n@media (min-width: 576px) and (max-width: 767.98px) {\r\n  .container {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\/* MP - Mobile (portrait) *\/\r\n@media (max-width: 575.98px) {\r\n  .container {\r\n    width: 100%;\r\n  }\r\n}<\/code><\/tw-pre><p>Now wrap the content within <code class=\"html-code\">&lt;article&gt;<\/code> in a <code class=\"html-code\">&lt;div&gt;<\/code>-element with class <code class=\"css-code\">container<\/code>.<\/p><tw-shortcode-wrapper data-id=\"16\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Rows and columns<\/h2><p>Now we have some essentials, we need one more thing to make actual layouts. We need rows and columns. I suggest using flexbox for rows, because it will give you a lot of flexibility; hence the name <i>flexbox<\/i>. This is how:<\/p><tw-pre><code class=\"css-code\">.row {\r\n  display:        flex;\r\n  flex-wrap:      wrap;\r\n  flex-direction: row;\r\n  align-items:    flex-start;\r\n}<\/code><\/tw-pre><p>Let's break it down.<\/p><p>Value <code class=\"css-code\">flex<\/code> for property <code class=\"css-code\">display<\/code> turns the element into a flexbox.<\/p><p>Value <code class=\"css-code\">wrap<\/code> for property <code class=\"css-code\">flex-wrap<\/code> enables the flex items (columns) within the flexbox (row) to wrap to a new line, if there is no more space available.<\/p><p>Value <code class=\"css-code\">row<\/code> for property <code class=\"css-code\">flex-direction<\/code> makes sure that the columns go from left to right. With flexbox you can use value <code class=\"css-code\">column<\/code> to make flex items go from top to bottom, and you can append <code class=\"css-code\">-reverse<\/code> to create values <code class=\"css-code\">row-reverse<\/code> and <code class=\"css-code\">column-reverse<\/code> - those will reverse the order in which the columns are presented.<\/p><p>Value <code class=\"css-code\">flex-start<\/code> for property <code class=\"css-code\">align-items<\/code> makes sure the items are aligned at the top instead of stretching the columns height, which is the default behavior of flexboxes and makes columns have the same height if on the same line.<\/p><p>Stretching columns is not bad, but I have encountered issues where a flexbox still caused stretching on flex items if the flexbox was inside a parent flexbox that had the default stretching behavior.<\/p><p>I even tried applying and <code class=\"css-code\">justify-content: flex-start<\/code> on the vertical flexbox, but none seemed to work, so I applied <code class=\"css-code\">align-items: flex-start<\/code> to the parent flexbox (which is a horizontal flexbox) and then the stretching and unexplainable space was gone.<\/p><p>In the past I have also encountered cross browser bugs on Safari when it comes to the default stretch behavior, so I decided to disable the stretching behavior by default, while still allowing it using a class.<\/p><p>Now, let's add a column class. Columns need spacing between each other and they need an automatic width if not specified, which will depend on how many columns there are in the same row:<\/p><tw-pre><code class=\"css-code\">.col {\r\n  flex-basis: 0px;\r\n  flex-grow:  1;\r\n}<\/code><\/tw-pre><p>What does <code class=\"css-code\">flex-basis: 0px<\/code> and <code class=\"css-code\">flex-grow: 1<\/code> do? CSS property <code class=\"css-code\">flex-grow<\/code> enables the column to grow if there is space available, while setting property <code class=\"css-code\">flex-basis<\/code> to <code class=\"css-code\">0px<\/code> will make all columns start at a width of 0 pixels and then grow by an amount equal to the amount all other columns do.<\/p><p>This makes it so that you don't have to specify a width for each column if you want all of them to be the same width. The available space is shared over all flex items, and the value for property <code class=\"css-code\">flex-grow<\/code> will determine how much of that available space is getting taken by that very flex item.<\/p><h2>Spacing between elements<\/h2><p>Spacing is one of the most important aspects of web design. It makes or breaks web designs. Consistent spacing is what takes the most time and effort when making a CSS design system. The goal is to make it as automatic as possible, while making it possible to fine tune them if necessary.<\/p><p>Spacings can be applied using both margins and paddings, but paddings should be used when an element has a background color, and margins are to be used to push the element away from other elements to create space.<\/p><p>Let's start by adding <code class=\"css-code\">50px<\/code> of top margin for the <code class=\"html-code\">&lt;main&gt;<\/code>-element.<\/p><tw-pre><code class=\"css-code\">main {\r\n  margin-top: 50px;\r\n}<\/code><\/tw-pre><p>Now, let's add spacing for textual elements. Add the following below the rule set with selector <code class=\"css-code\">h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6<\/code>:<\/p><tw-pre><code class=\"css-code\"> h1:not(:first-child),  h2:not(:first-child),  h3:not(:first-child),  h4:not(:first-child),  h5:not(:first-child),  h6:not(:first-child),\r\n.h1:not(:first-child), .h2:not(:first-child), .h3:not(:first-child), .h4:not(:first-child), .h5:not(:first-child), .h6:not(:first-child) {\r\n  margin-top: 37.5px;\r\n}\r\n h1:not(:last-child),  h2:not(:last-child),  h3:not(:last-child),  h4:not(:last-child),  h5:not(:last-child),  h6:not(:last-child),\r\n.h1:not(:last-child), .h2:not(:last-child), .h3:not(:last-child), .h4:not(:last-child), .h5:not(:last-child), .h6:not(:last-child) {\r\n  margin-bottom: 25px;\r\n}<\/code><\/tw-pre><p>Add the following CSS between rule set with selector <code class=\"css-code\">h6<\/code> and rule set with selector <code class=\"css-code\">a<\/code>:<\/p><tw-pre><code class=\"css-code\">p:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}<\/code><\/tw-pre><p>Let's discuss the spacing between rows and columns. I did my very best to come up with a spacing system that makes spacing as automatic as possible. Let me try to explain how it works, because it is pretty advanced (if I may say so myself).<\/p><p>We start with adding margins between columns. I decided to give each column a left, right and bottom margin of <code class=\"css-code\">25px<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.col {\r\n  flex-basis:    0px;\r\n  flex-grow:     1;<\/span><ins>\r\n  margin-left:   25px;\r\n  margin-right:  25px;\r\n  margin-bottom: 25px;\r\n  max-width:     calc(100% - 50px);<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Since there is now space on the left and right inside of the row, I decided to negate those by applying a negative margin on the left and right side of the row.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  display:        flex;\r\n  flex-wrap:      wrap;\r\n  flex-direction: row;\r\n  align-items:    flex-start;<\/span><ins>\r\n  margin-left:    -25px;\r\n  margin-right:   -25px;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Instead of negating the bottom margin of the columns, I found it to be smarter to embrace it and use it as part of the spacing between rows. To do so, I applied only a top margin to the rows, equal to the bottom margin of the columns.<\/p><p>As a result, I have a row that has <code class=\"css-code\">25px<\/code> of margin at the top, and 25 pixels of space that is created inside the bottom of the row by the bottom margin of the columns.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  display:        flex;\r\n  flex-wrap:      wrap;\r\n  flex-direction: row;\r\n  align-items:    flex-start;<\/span><ins>\r\n  margin-top:     25px;<\/ins><span class=\"semi-opaque\">\r\n  margin-left:    -25px;\r\n  margin-right:   -25px;\r\n}<\/span><\/code><\/tw-pre><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-rows-top-margin.png\" width=\"810\" height=\"396\" class=\"col all\" title=\"\" alt=\"Visualization of a rows top margin\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-rows-top-margin-h294.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"396.859375\" data-img-h-d=\"194.1328125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"301.6171875\" data-img-h-t=\"147.5390625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"225.84375\" data-img-h-m=\"110.4765625\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-rows-top-margin-box-model.png\" width=\"844\" height=\"681\" class=\"col all\" alt=\"Visualization of a rows top margin box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-rows-top-margin-box-model-h486.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"240.46875\" data-img-h-d=\"194.125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"182.7578125\" data-img-h-t=\"147.5390625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"136.8515625\" data-img-h-m=\"110.4765625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-spacing-of-a-column-within-a-row.png\" class=\"col all\" width=\"810\" height=\"340\" alt=\"Visualization of spacing of a column within a row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-spacing-of-a-column-within-a-row-h252.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"424.4140625\" data-img-h-d=\"178.25\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"322.5546875\" data-img-h-t=\"135.46875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"241.53125\" data-img-h-m=\"101.4375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-spacing-of-a-column-within-a-row-box-model.png\" width=\"814\" height=\"681\" class=\"col all\" alt=\"Visualization of spacing of a column within a row box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-spacing-of-a-column-within-a-row-box-model-h504.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"212.9140625\" data-img-h-d=\"178.25\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"161.8203125\" data-img-h-t=\"135.4765625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"121.1640625\" data-img-h-m=\"101.4375\" data-img-of-m=\"contain\"><\/div><p>The spacing system will get advanced once you realize that there are rows and columns that can have a background color. This means that you need to apply paddings when rows and columns have a background color.<\/p><p>I decided to make variables called <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-left<\/code>, which indicates whether it has a background color. This variable can have two values: <code class=\"css-code\">0<\/code> and <code class=\"css-code\">1<\/code>.<\/p><tw-pre><code class=\"css-code\">[class^='bg-'], [class*=' bg-'] {\r\n  --has-fill-top:    1 !important;\r\n  --has-fill-right:  1 !important;\r\n  --has-fill-bottom: 1 !important;\r\n  --has-fill-left:   1 !important;\r\n}<\/code><\/tw-pre><p>The selector above will query for elements that have a <code class=\"html-code\">class<\/code> attribute that either starts with <code class=\"css-code\">bg-<\/code> or when it contains substring <code class=\"css-code\">&nbsp;bg-<\/code> (a space, then <code class=\"css-code\">bg-<\/code>) and sets variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-left<\/code> to <code class=\"css-code\">1<\/code> with <code class=\"css-code\">!important<\/code>.<\/p><p>The reason for the use of <code class=\"css-code\">!important<\/code> is that each row and column will set the variables to <code class=\"css-code\">0<\/code> by default, to prevent the variables value from cascading to rows and columns with an ancestor element that has a background color, and thus has value <code class=\"css-code\">1<\/code> for those variables.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {<\/span><ins>\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;<\/ins><span class=\"semi-opaque\">\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;\r\n  margin-top:        25px;\r\n  margin-left:       -25px;\r\n  margin-right:      -25px;\r\n}\r\n.col {<\/span><ins>\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;<\/ins><span class=\"semi-opaque\">\r\n  flex-basis:        0px;\r\n  flex-grow:         1;\r\n  margin-left:       25px;\r\n  margin-right:      25px;\r\n  margin-bottom:     25px;\r\n  max-width:         calc(100% - 50px);\r\n}<\/span><\/code><\/tw-pre><p>Let's add paddings for rows that have a background color.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;\r\n  margin-top:        25px;\r\n  margin-left:       -25px;\r\n  margin-right:      -25px;<\/span><ins>\r\n  padding-top:       calc(25px * 2 * var(--has-fill-top));\r\n  padding-left:      calc(25px * var(--has-fill-left));\r\n  padding-right:     calc(25px * var(--has-fill-right));\r\n  padding-bottom:    calc(25px * var(--has-fill-bottom));<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>The padding values in the rule set above multiply <code class=\"css-code\">25px<\/code> by variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-left<\/code>. These variables act like a boolean value (<code class=\"css-code\">true<\/code> or <code class=\"css-code\">false<\/code>, <code class=\"css-code\">1<\/code> or <code class=\"css-code\">0<\/code>).<\/p><p>The top padding is twice the bottom padding, because the columns inside the row do not have a top margin, just a bottom margin of <code class=\"css-code\">25px<\/code>.<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-top-and-bottom-padding-for-filled-rows.png\" width=\"698\" height=\"756\" class=\"col all\" alt=\"Visualization of top and bottom padding for filled rows\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-top-and-bottom-padding-for-filled-rows-h651.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"284.5234375\" data-img-h-d=\"308.1875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"216.2421875\" data-img-h-t=\"234.2265625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"161.9140625\" data-img-h-m=\"175.3828125\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-top-and-bottom-padding-for-filled-rows-box-model.png\" width=\"780\" height=\"681\" class=\"col all\" alt=\"Visualization of top and bottom padding for filled rows box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-top-and-bottom-padding-for-filled-rows-box-model-h525.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"352.8046875\" data-img-h-d=\"308.1875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"268.1328125\" data-img-h-t=\"234.21875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"200.78125\" data-img-h-m=\"175.390625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-spacing-of-a-column-within-a-filled-row.png\" width=\"698\" height=\"549\" class=\"col all\" alt=\"Visualization of spacing of a column within a filled row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-spacing-of-a-column-within-a-filled-row-h473.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"328.5078125\" data-img-h-d=\"258.5390625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"249.671875\" data-img-h-t=\"196.4921875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"186.953125\" data-img-h-m=\"147.1328125\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-spacing-of-a-column-within-a-filled-row-box-model.png\" width=\"814\" height=\"681\" class=\"col all\" alt=\"Visualization of spacing of a column within a filled row box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-spacing-of-a-column-within-a-filled-row-box-model-h504.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"308.8203125\" data-img-h-d=\"258.546875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"234.703125\" data-img-h-t=\"196.4921875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"175.7421875\" data-img-h-m=\"147.1328125\" data-img-of-m=\"contain\"><\/div><p>Rows with a background color need a bottom margin, because rows <i>without<\/i> a background color are 50 pixels apart; <code class=\"css-code\">25px<\/code> of bottom margin by the columns inside the first row plus a top margin of <code class=\"css-code\">25px<\/code> by the second row.<\/p><p>Adding a background color to a row will cover the area created by its column's bottom margin with its background color, bringing the row closer (visually) to the second row.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-background-color-taking-up-bottom-margin-of-column-within-bringing-it-closer-to-the-row-below.png\" width=\"810\" height=\"928\" class=\"softer-shadow\" alt=\"Visualization of background color taking up bottom margin of column within bringing it closer to the row below\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-background-color-taking-up-bottom-margin-of-column-within-bringing-it-closer-to-the-row-below-w1259.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"763.7890625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"575.4609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"430.90625\" data-img-of-m=\"fill\"><p>To fix this, you add a bottom margin of <code class=\"css-code\">25px<\/code> to the row if it has a background color.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;\r\n  margin-top:        25px;<\/span><ins>\r\n  margin-bottom:     calc(25px * var(--has-fill-bottom));<\/ins><span class=\"semi-opaque\">\r\n  margin-left:       -25px;\r\n  margin-right:      -25px;\r\n  padding-top:       calc(25px * 2 * var(--has-fill-top));\r\n  padding-left:      calc(25px * var(--has-fill-left));\r\n  padding-right:     calc(25px * var(--has-fill-right));\r\n  padding-bottom:    calc(25px * var(--has-fill-bottom));\r\n}<\/span><\/code><\/tw-pre><p>Now the column's 25 pixels of bottom margin has been reclaimed by adding 25 pixels of bottom margin to the row that has the background color, yet still ending up with 25 pixels of space between the first and second row.<\/p><p>Why is that? Well.. Two vertical margins do not add up to a value to be the sum of the two margins. Instead, they pick the highest value of the two margins, which would be <code class=\"css-code\">25px<\/code> in this case.<\/p><p>Before fixing these vertical spacing issues whilst making a distinction between the spacing between a row with a background color and the row below, and spacing between a row with a background color and anything but a row or column (paragraphs for instance), I would like to fix other spacing issues; since I want to present to you a visualization of spacing between rows with a background color and anything but rows or columns while those horizontal spacing fixes are in place.<\/p><p>So let's do something about horizontal spacing for rows with a background color. Since the left and right space within rows, which are created by the left and right margins by the columns within those rows, are now covered with a background color, I decided to undo the row's negative left and right margin that were applied in order to negate the column's left and right margin.<\/p><p>If I were to negate those margins for rows that have a background color, then the row would stick out on the left and right because of the left and right spacing that is visible due to the row's background color. See the visualizations below, of which the first shows a row with a background color <i>with<\/i> left and right margin negation, and the second shows a row with a background color <i>without<\/i> left and right margin negation (which is the desired outcome).<\/p><div class=\"row all\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-row-with-left-and-right-margin-negation.png\" width=\"810\" height=\"875\" alt=\"Visualization of a filled row with left and right margin negation\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-row-with-left-and-right-margin-negation-w602.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"318.6640625\" data-img-h-d=\"344.0703125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"242.1875\" data-img-h-t=\"261.4921875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"181.3515625\" data-img-h-m=\"195.8046875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-row-without-left-and-right-margin-negation.png\" width=\"810\" height=\"929\" alt=\"Visualization of a filled row without left and right margin negation\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-row-without-left-and-right-margin-negation-w602.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"318.6640625\" data-img-h-d=\"365.2421875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"242.1875\" data-img-h-t=\"277.5859375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"181.3515625\" data-img-h-m=\"207.859375\" data-img-of-m=\"fill\"><\/div><\/div><p>So, in order to disable the negative left and right margin of rows with a background color, I had to change the logics of working with CSS variables <code class=\"css-code\">--has-fill-left<\/code> and <code class=\"css-code\">--has-fill-right<\/code> by starting with a <em>negative<\/em> value of <code class=\"css-code\">-25px<\/code> and creating value <code class=\"css-code\">0<\/code> by adding <code class=\"css-code\">25px<\/code> multiplied by variable <code class=\"css-code\">--has-fill-left<\/code> or <code class=\"css-code\">--has-fill-right<\/code> to the negative value of <code class=\"css-code\">-25px<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;\r\n  margin-top:        25px;\r\n  margin-bottom:     calc(25px * var(--has-fill-bottom));<\/span><ins>\r\n  margin-left:       calc(-25px + 25px * var(--has-fill-left));\r\n  margin-right:      calc(-25px + 25px * var(--has-fill-right));<\/ins><span class=\"semi-opaque\">\r\n  padding-top:       calc(25px * 2 * var(--has-fill-top));\r\n  padding-left:      calc(25px * var(--has-fill-left));\r\n  padding-right:     calc(25px * var(--has-fill-right));\r\n  padding-bottom:    calc(25px * var(--has-fill-bottom));\r\n}<\/span><\/code><\/tw-pre><p>Let's add spacing for columns that have a background color. This is pretty straightforward:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.col {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  flex-basis:        0px;\r\n  flex-grow:         1;\r\n  margin-left:       25px;\r\n  margin-right:      25px;\r\n  margin-bottom:     25px;\r\n  max-width:         calc(100% - 50px);<\/span><ins>\r\n  padding:           calc(25px * 2 * var(--has-fill-top))\r\n                     calc(25px * 2 * var(--has-fill-right))\r\n                     calc(25px * 2 * var(--has-fill-bottom))\r\n                     calc(25px * 2 * var(--has-fill-left));<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column.png\" class=\"col all\" width=\"810\" height=\"963\" alt=\"Visualization of a filled column\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-h716.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"262.0625\" data-img-h-d=\"311.6875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"199.1640625\" data-img-h-t=\"236.875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"149.1328125\" data-img-h-m=\"177.3671875\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column-box-model.png\" class=\"col all\" width=\"820\" height=\"681\" title=\"\" alt=\"Visualization of a filled column box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-box-model-h500.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"375.265625\" data-img-h-d=\"311.6796875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"285.2109375\" data-img-h-t=\"236.8828125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"213.5625\" data-img-h-m=\"177.375\" data-img-of-m=\"contain\"><\/div><p>When creating advanced layouts, there is no escaping the fact that you will be using rows within rows. This creates a new layer of complexity to the CSS design system, because rows within rows need smaller spacing, and will be placed inside of columns, which can be transparent but they can also have a background color.<\/p><p>The first thing I decided to do was to make use of a spacing multiplier CSS variable that decreases as the row depth increases. I suggest adding the following CSS rule sets below the rule set with selector <code class=\"css-code\">.row<\/code>:<\/p><tw-pre><code class=\"css-code\">.row .row {\r\n  --col-spacing-multiplier: 0.5;\r\n}\r\n.row .row .row {\r\n  --col-spacing-multiplier: 0.25;\r\n}<\/code><\/tw-pre><p>Then, I used this variable in calculations for row and column spacing and set a default value of <code class=\"css-code\">1<\/code> for variable <code class=\"css-code\">--col-spacing-multiplier<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;\r\n  margin-top:        <\/span><ins>calc(<\/ins><span class=\"semi-opaque\">25px<\/span><ins> * var(--col-spacing-multiplier))<\/ins><span class=\"semi-opaque\">;\r\n  margin-bottom:     calc(25px * var(--has-fill-bottom)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  margin-left:       calc(<\/span><ins>(<\/ins><span class=\"semi-opaque\">-25px + 25px * var(--has-fill-left)<\/span><ins>) * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  margin-right:      calc(<\/span><ins>(<\/ins><span class=\"semi-opaque\">-25px + 25px * var(--has-fill-right)<\/span><ins>) * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  padding-top:       calc(25px * 2 * var(--has-fill-top)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  padding-left:      calc(25px * var(--has-fill-left)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  padding-right:     calc(25px * var(--has-fill-right)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  padding-bottom:    calc(25px * var(--has-fill-bottom)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);<\/span><ins>\r\n  --col-spacing-multiplier: 1;<\/ins><span class=\"semi-opaque\">\r\n}\r\n.col {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  flex-basis:        0px;\r\n  flex-grow:         1;\r\n  margin-left:       <\/span><ins>calc(<\/ins><span class=\"semi-opaque\">25px<\/span><ins> * var(--col-spacing-multiplier))<\/ins><span class=\"semi-opaque\">;\r\n  margin-right:      <\/span><ins>calc(<\/ins><span class=\"semi-opaque\">25px<\/span><ins> * var(--col-spacing-multiplier))<\/ins><span class=\"semi-opaque\">;\r\n  margin-bottom:     <\/span><ins>calc(<\/ins><span class=\"semi-opaque\">25px<\/span><ins> * var(--col-spacing-multiplier))<\/ins><span class=\"semi-opaque\">;\r\n  max-width:         calc(100% - 50px<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n  padding:           calc(25px * 2 * var(--has-fill-top)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">)\r\n                     calc(25px * 2 * var(--has-fill-right)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">)\r\n                     calc(25px * 2 * var(--has-fill-bottom)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">)\r\n                     calc(25px * 2 * var(--has-fill-left)<\/span><ins> * var(--col-spacing-multiplier)<\/ins><span class=\"semi-opaque\">);\r\n}<\/span><\/code><\/tw-pre><p>Before showing you a visualization of rows within columns of other rows, there is one more thing to do \u2013 removing the top margin of rows that are the first child in its parent element (a column) and removing the bottom margin of rows that are the last child in its parent element.<\/p><p>Let's start with removing the top margin of rows within another row's column, since that is the easiest part. Add the following below the rule set with selector <code class=\"css-code\">.row .row .row<\/code>:<\/p><tw-pre><code class=\"css-code\">.row:first-child {\r\n  margin-top: 0px;\r\n}<\/code><\/tw-pre><p>Now, when placing a row within a column of another row, the inner row has a bottom margin of <code class=\"css-code\">12.5px<\/code>. For transparent inner rows you have to set the bottom margin to a negative value of <code class=\"css-code\">-12.5px<\/code>, because not not only does the inner row otherwise add a bottom margin of <code class=\"css-code\">12.5px<\/code>, its columns inside would also add <code class=\"css-code\">12.5px<\/code> of bottom margin.<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-an-inner-row-which-is-the-last-child-of-a-filled-column.png\" class=\"col all softer-shadow\" width=\"810\" height=\"1016\" alt=\"Visualization of a column within an inner row which is the last child of a filled column\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-an-inner-row-which-is-the-last-child-of-a-filled-column-h755.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"231.3671875\" data-img-h-d=\"290.6484375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"175.8359375\" data-img-h-t=\"220.890625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"131.6640625\" data-img-h-m=\"165.3984375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-an-inner-row-which-is-the-last-child-of-a-filled-column-box-model.png\" class=\"col all\" width=\"952\" height=\"681\" alt=\"Visualization of a column within an inner row which is the last child of a filled column box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-an-inner-row-which-is-the-last-child-of-a-filled-column-box-model-h431.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"405.9609375\" data-img-h-d=\"290.640625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"308.5390625\" data-img-h-t=\"220.890625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"231.03125\" data-img-h-m=\"165.3984375\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-as-the-last-child-of-a-filled-column.png\" class=\"col all softer-shadow\" width=\"810\" height=\"1016\" alt=\"Visualization of an inner row as the last child of a filled column\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-as-the-last-child-of-a-filled-column-h600.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"226.8828125\" data-img-h-d=\"284.7890625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"172.4296875\" data-img-h-t=\"216.4375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"129.1171875\" data-img-h-m=\"162.0703125\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-as-the-last-child-of-a-filled-column-box-model.png\" class=\"col all\" width=\"982\" height=\"681\" alt=\"Visualization of an inner row as the last child of a filled column box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-as-the-last-child-of-a-filled-column-box-model-h417.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"410.4453125\" data-img-h-d=\"284.78125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"311.9453125\" data-img-h-t=\"216.4375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"233.578125\" data-img-h-m=\"162.0625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column-containing-an-inner-row-as-its-last-child.png\" class=\"col all\" width=\"810\" height=\"1052\" alt=\"Visualization of a filled column containing an inner row as its last child\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-containing-an-inner-row-as-its-last-child-h782.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"248.8203125\" data-img-h-d=\"323.2109375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"189.1015625\" data-img-h-t=\"245.640625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"141.6015625\" data-img-h-m=\"183.9375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column-containing-an-inner-row-as-its-last-child-box-model.png\" class=\"col all\" width=\"820\" height=\"681\" alt=\"Visualization of a filled column containing an inner row as its last child box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-containing-an-inner-row-as-its-last-child-box-model-h396.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"388.5078125\" data-img-h-d=\"323.2109375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"295.2734375\" data-img-h-t=\"245.640625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"221.09375\" data-img-h-m=\"183.9296875\" data-img-of-m=\"contain\"><\/div><p>What about inner rows with a background color within another row's column? Well, if you apply a negative bottom margin of <code class=\"css-code\">-12.5px<\/code>, then that inner row would stick out of the column.<\/p><p>This is because the bottom margin of the inner row's columns are covered with the inner row's background color. This means that there is no need to negate those bottom margins anymore.<\/p><p>Add the following CSS rule set below the rule set with selector <code class=\"css-code\">.row:first-child<\/code>:<\/p><tw-pre><code class=\"css-code\">.row:last-child {\r\n  margin-bottom: calc((-25px + 25px * var(--has-fill-bottom)) * var(--col-spacing-multiplier));\r\n}<\/code><\/tw-pre><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-a-filled-inner-row-which-is-the-last-child-of-a-filled-column.png\" class=\"col all softer-shadow\" width=\"811\" height=\"1236\" alt=\"Visualization of a column within a filled inner row which is the last child of a filled column\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-a-filled-inner-row-which-is-the-last-child-of-a-filled-column-h728.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"203.4140625\" data-img-h-d=\"310.4453125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"154.6015625\" data-img-h-t=\"235.953125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"115.765625\" data-img-h-m=\"176.6796875\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-a-filled-inner-row-which-is-the-last-child-of-a-filled-column-box-model.png\" class=\"col all\" width=\"952\" height=\"681\" alt=\"Visualization of a column within a filled inner row which is the last child of a filled column box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-a-filled-inner-row-which-is-the-last-child-of-a-filled-column-box-model-h342.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"433.9140625\" data-img-h-d=\"310.453125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"329.7734375\" data-img-h-t=\"235.9453125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"246.9296875\" data-img-h-m=\"176.671875\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-inner-row-as-the-last-child-of-a-filled-column.png\" width=\"811\" height=\"1236\" class=\"col all softer-shadow\" alt=\"Visualization of a filled inner row as the last child of a filled column\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-inner-row-as-the-last-child-of-a-filled-column-h728.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"208.515625\" data-img-h-d=\"318.234375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"158.4765625\" data-img-h-t=\"241.8671875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"118.6640625\" data-img-h-m=\"181.1015625\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-inner-row-as-the-last-child-of-a-filled-column-box-model.png\" class=\"col all\" width=\"918\" height=\"681\" alt=\"Visualization of a filled inner row as the last child of a filled column box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-inner-row-as-the-last-child-of-a-filled-column-box-model-h354.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"428.8125\" data-img-h-d=\"318.234375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"325.8984375\" data-img-h-t=\"241.859375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"244.03125\" data-img-h-m=\"181.1015625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column-containing-a-filled-inner-row-as-its-last-child.png\" class=\"col all\" width=\"810\" height=\"1272\" alt=\"Visualization of a filled column containing a filled inner row as its last child\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-containing-a-filled-inner-row-as-its-last-child-h750.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"220.53125\" data-img-h-d=\"346.7421875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"167.609375\" data-img-h-t=\"263.53125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"125.5\" data-img-h-m=\"197.3203125\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-column-containing-a-filled-inner-row-as-its-last-child-box-model.png\" class=\"col all\" width=\"820\" height=\"681\" alt=\"Visualization of a filled column containing a filled inner row as its last child box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-column-containing-a-filled-inner-row-as-its-last-child-box-model-h396.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"416.796875\" data-img-h-d=\"346.7421875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"316.765625\" data-img-h-t=\"263.5234375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"237.1953125\" data-img-h-m=\"197.328125\" data-img-of-m=\"contain\"><\/div><p>Finally, since those spacing fixes are now in place, let's make seperate, distinct, CSS rule sets to add spacing between a row with a background color and a row below, the spacing between a paragraph and a row below (which could contain paragraphs within its columns), and the spacing between a row and a paragraph below. Instead of targeting paragraphs, I target anything but a row or column, since paragraphs were just for example's sake; it could be anything from a paragraph to an unordered list, a button, an image, etc.<\/p><p>Visualization of the spacing between a row with a background color and a row below:<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-row-with-a-row-below.png\" class=\"col all softer-shadow\" width=\"811\" height=\"1133\" title=\"\" alt=\"Visualization of a filled row with a row below\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-row-with-a-row-below-h668.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"247.0625\" data-img-h-d=\"345.265625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"187.765625\" data-img-h-t=\"262.3984375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"140.6015625\" data-img-h-m=\"196.484375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-filled-row-with-a-row-below-box-model.png\" class=\"col all\" width=\"936\" height=\"828\" title=\"\" alt=\"Visualization of a filled row with a row below box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-filled-row-with-a-row-below-box-model-h422.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"390.265625\" data-img-h-d=\"345.265625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"296.609375\" data-img-h-t=\"262.40625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"222.09375\" data-img-h-m=\"196.484375\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-row-below-a-filled-row.png\" class=\"col all softer-shadow\" width=\"811\" height=\"994\" alt=\"Visualization of a row below a filled row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-row-below-a-filled-row-h586.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"254.9921875\" data-img-h-d=\"312.6015625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"193.796875\" data-img-h-t=\"237.578125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"145.109375\" data-img-h-m=\"177.890625\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-row-below-a-filled-row-box-model.png\" class=\"col all\" width=\"1013\" height=\"828\" alt=\"Visualization of a row below a filled row box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-row-below-a-filled-row-box-model-h390.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"382.3359375\" data-img-h-d=\"312.6015625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"290.578125\" data-img-h-t=\"237.578125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"217.5859375\" data-img-h-m=\"177.8984375\" data-img-of-m=\"contain\"><\/div><p>Visualization of the spacing between a paragraph and a row below:<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-paragraph-above-an-inner-row.png\" class=\"col all softer-shadow\" width=\"1728\" height=\"526\" alt=\"Visualization of a paragraph above an inner row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-paragraph-above-an-inner-row-h146.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"460.0234375\" data-img-h-d=\"140.2109375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"349.6171875\" data-img-h-t=\"106.5625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"261.7890625\" data-img-h-m=\"79.7890625\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-paragraph-above-an-inner-row-box-model.png\" class=\"col all\" width=\"817\" height=\"645\" alt=\"Visualization of a paragraph above an inner row box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-paragraph-above-an-inner-row-box-model-h378.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"177.3046875\" data-img-h-d=\"140.2109375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"134.7578125\" data-img-h-t=\"106.5625\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"100.90625\" data-img-h-m=\"79.7890625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-below-a-paragraph.png\" class=\"col all softer-shadow\" width=\"1728\" height=\"482\" alt=\"Visualization of an inner row below a paragraph\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-below-a-paragraph-h134.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"456.1640625\" data-img-h-d=\"127.34375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"346.6875\" data-img-h-t=\"96.78125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"259.59375\" data-img-h-m=\"72.46875\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-below-a-paragraph-box-model.png\" class=\"col all\" width=\"1179\" height=\"828\" alt=\"Visualization of an inner row below a paragraph box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-below-a-paragraph-box-model-h336.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"181.1640625\" data-img-h-d=\"127.34375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"137.6875\" data-img-h-t=\"96.78125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"103.1015625\" data-img-h-m=\"72.46875\" data-img-of-m=\"contain\"><\/div><p>Visualization of the spacing between a row and a paragraph below:<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-an-inner-row-with-a-paragraph-below.png\" class=\"col all softer-shadow\" width=\"1728\" height=\"525\" alt=\"Visualization of a column within an inner row with a paragraph below\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-an-inner-row-with-a-paragraph-below-h146.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"449.03125\" data-img-h-d=\"136.578125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"341.2734375\" data-img-h-t=\"103.796875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"255.5390625\" data-img-h-m=\"77.71875\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-column-within-an-inner-row-with-a-paragraph-below-box-model.png\" class=\"col all\" width=\"1143\" height=\"828\" alt=\"Visualization of a column within an inner row with a paragraph below box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-column-within-an-inner-row-with-a-paragraph-below-box-model-h346.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"188.296875\" data-img-h-d=\"136.578125\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"143.1015625\" data-img-h-t=\"103.796875\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"107.15625\" data-img-h-m=\"77.7265625\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-with-a-paragraph-below.png\" class=\"col all softer-shadow\" width=\"1728\" height=\"525\" alt=\"Visualization of an inner row with a paragraph below\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-with-a-paragraph-below-h146.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"444.84375\" data-img-h-d=\"135.3046875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"338.0859375\" data-img-h-t=\"102.828125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"253.15625\" data-img-h-m=\"77\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-an-inner-row-with-a-paragraph-below-box-model.png\" class=\"col all\" width=\"1179\" height=\"828\" alt=\"Visualization of an inner row with a paragraph below box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-an-inner-row-with-a-paragraph-below-box-model-h336.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"192.484375\" data-img-h-d=\"135.296875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"146.2890625\" data-img-h-t=\"102.828125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"109.5390625\" data-img-h-m=\"76.9921875\" data-img-of-m=\"contain\"><\/div><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-paragraph-below-an-inner-row.png\" class=\"col all softer-shadow\" width=\"1728\" height=\"454\" alt=\"Visualization of a paragraph below an inner row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-paragraph-below-an-inner-row-h126.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"478.2421875\" data-img-h-d=\"125.796875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"363.46875\" data-img-h-t=\"95.609375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"272.1640625\" data-img-h-m=\"71.5859375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-paragraph-below-an-inner-row-box-model.png\" class=\"col all\" width=\"817\" height=\"645\" alt=\"Visualization of a paragraph below an inner row box model\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-paragraph-below-an-inner-row-box-model-h378.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"159.0859375\" data-img-h-d=\"125.796875\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"120.90625\" data-img-h-t=\"95.609375\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"90.53125\" data-img-h-m=\"71.5859375\" data-img-of-m=\"contain\"><\/div><p>Add the following CSS rule sets below the rule set with selector <code class=\"css-code\">[class^='bg-'], [class*=' bg-']<\/code>:<\/p><tw-pre><code class=\"css-code\">.row[class^='bg-'] + .row,\r\n.row[class*=' bg-'] + .row {\r\n  margin-top: calc(25px * 2 * var(--col-spacing-multiplier));\r\n}\r\n:not(.row):not(.col) + .row[class^='bg-'],\r\n:not(.row):not(.col) + .row[class*=' bg-'] {\r\n  margin-top: max(12.5px, calc(25px * 2 * var(--col-spacing-multiplier)));\r\n}\r\n.row[class^='bg-'] + :not(.row):not(.col),\r\n.row[class*=' bg-'] + :not(.row):not(.col) {\r\n  margin-top: max(12.5px, calc(25px * var(--col-spacing-multiplier)));\r\n}<\/code><\/tw-pre><p>The first rule set will query for rows that are below a row with a background color. A top margin of two times <code class=\"css-code\">25px<\/code> will be applied to that row, to push it further away from the row that has a background color.<\/p><p>The second rule set will query for a row with a background color that is below anything but a row or column. A top margin of <em>two<\/em> times <code class=\"css-code\">25px<\/code> will be applied to the row with the background color that is below anything but a row or column.<\/p><p>The reason for it to be <em>two<\/em> times <code class=\"css-code\">25px<\/code>, is because the value for variable <code class=\"css-code\">--col-spacing-multiplier<\/code> gets <em>halved<\/em> if a row is within a column of another row. This would cause the top margin I would apply to be halved because of the lower value for variable <code class=\"css-code\">--col-spacing-multiplier<\/code> as opposed to a paragraph for example.<\/p><p>The third rule set will query for anything but a row or column that is below a row with a background color. A top margin of (once) <code class=\"css-code\">25px<\/code> will be applied to anything but a row or column that is below a row that has a background color.<\/p><p>The last two rule sets are not necessary; it's personal preference. The reason why I added these is because I thought it would look too crowded if there is <code class=\"css-code\">12.5px<\/code> of vertical space between a row with a background color and paragraphs above and below that row.<\/p><p>Visualization of <code class=\"css-code\">12.5px<\/code> of space between a row with a background color and paragraphs:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-12.5px-of-space-between-a-filled-row-and-surrounding-paragraphs.png\" class=\"softer-shadow\" width=\"1728\" height=\"1145\" alt=\"Visualization of 12.5px of space between a filled row and surrounding paragraphs\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-12.5px-of-space-between-a-filled-row-and-surrounding-paragraphs-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"441.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"332.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"249.0546875\" data-img-of-m=\"fill\"><p>Visualization of <code class=\"css-code\">25px<\/code> of space between a row with a background color and paragraphs:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-25px-of-space-between-a-filled-row-and-surrounding-paragraphs.png\" class=\"softer-shadow\" width=\"1728\" height=\"1201\" alt=\"Visualization of 25px of space between a filled row and surrounding paragraphs\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-25px-of-space-between-a-filled-row-and-surrounding-paragraphs-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"463.4609375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"349.1875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"261.4765625\" data-img-of-m=\"fill\"><p>CSS function <code class=\"css-code\">max<\/code> was used in order to keep at least <code class=\"css-code\">12.5px<\/code> of vertical space, because otherwise the spacing between a paragraph and a row within a row within a row within a row would be <code class=\"css-code\">6.25px<\/code>, which is smaller than the spacing between paragraphs.<\/p><tw-shortcode-wrapper data-id=\"17\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Styling for common elements<\/h2><p>Let's distance ourselves from the previous chapter, and style the following elements:<\/p><ol><li>Rows and columns<\/li><li>Images<\/li><li>Buttons<\/li><li>Form elements<\/li><\/ol><h3>Border radius for rows and columns<\/h3><p>I decided to apply a border radius for rows and columns that have a background color. In order to make this look good, I made use of variable <code class=\"css-code\">--col-spacing-multiplier<\/code> to make radius smaller the deeper a row is nested within a column of another row.<\/p><tw-pre><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) {\r\n  --border-radius-depth: 1;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) {\r\n  --border-radius-depth: 2;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) {\r\n  --border-radius-depth: 3;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) {\r\n  --border-radius-depth: 4;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) :is([class^='bg-'], [class*=' bg-'], img) {\r\n  --border-radius-depth: 5;\r\n}\r\n.row[class^='bg-'],\r\n.row[class*=' bg-'],\r\n.col[class^='bg-'],\r\n.col[class*=' bg-']{\r\n  border-radius: calc(25px \/ var(--border-radius-depth));\r\n}<\/code><\/tw-pre><h3>Images<\/h3><p>By default, images' <code class=\"css-code\">display<\/code> value is <code class=\"css-code\">inline<\/code>. This causes space to appear underneath the image as if it had a line height like text does. To prevent this, we turn images into blocks.<\/p><p>Add the following below rule set with selector <code class=\"css-code\">a<\/code>:<\/p><tw-pre><code class=\"css-code\">img {\r\n  display: block;\r\n  max-width: 100%;\r\n  border-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\nimg:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}<\/code><\/tw-pre><p>As you can see the image also has a border radius, because an image is basically an element with a background, so it also gets a border radius, just like rows and columns.<\/p><p>It is necessary to use <code class=\"css-code\">max-width: 100%<\/code>, because otherwise if the <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/calculating-contain-intrinsic-size-for-content-visibility\/#-rendered-size-vs-intrinsic-size\">intrinsic size<\/a> is larger than the desired rendered size, then the rendered size will be larger than what you want. Basically we make sure that the image adapts its width to its parent, instead of letting it affect the width of its parent.<\/p><h3>Form elements<\/h3><h4>Labels<\/h4><p>Labels are elements that are placed above (and sometimes beside) form fields that require input from the user. These are often smaller than regular text, because otherwise the form would look too crowded. Add the following below the rule set with selector <code class=\"css-code\">img<\/code>:<\/p><tw-pre><code class=\"css-code\">label {\r\n  font-size: 17px;\r\n}<\/code><\/tw-pre><p>In HTML you can <em>connect<\/em> a label and a form field in two ways, to be able to focus the form field when clicking the label. The first method is to place the form field after the label, and add attribute <code class=\"html-code\">for<\/code> to the label to refer to the value of the form field's <code class=\"html-code\">id<\/code>-attribute.<\/p><tw-pre><code class=\"html-code\">&lt;label for=\"form-field-1\"&gt;Label text&lt;\/label&gt;\r\n&lt;input type=\"text\" id=\"form-field-1\" name=\"form-field-1\"&gt;<\/code><\/tw-pre><p>The second method is to wrap the form field in a <code class=\"html-code\">&lt;label&gt;<\/code>-element, this requires no <code class=\"html-code\">for<\/code>-attribute and no <code class=\"html-code\">id-attribute<\/code> either (but I prefer using an <code class=\"html-code\">id<\/code>-attribute anyways).<\/p><tw-pre><code class=\"html-code\">&lt;label&gt;\r\n  Label text\r\n  &lt;input type=\"text\" id=\"form-field-1\" name=\"form-field-1\"&gt;\r\n&lt;\/label&gt;<\/code><\/tw-pre><p>You might wonder why doesn't attribute <code class=\"html-code\">for<\/code> just refer to the <code class=\"html-code\">name<\/code>-attribute. The reason for this is that radio input fields can share the same value for the <code class=\"html-code\">name<\/code>-attribute, whilst having a unique value for the <code class=\"html-code\">id<\/code>-attribute. Each radio option has its own label that has to be connected to it.<\/p><p>So, why is this important? Well, there are also two ways to display a label and a form field. The first way being next to each other, and the second way below each other.<\/p><div class=\"row all equal-height-images wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-label-above-a-form-field.png\" class=\"col all softer-shadow\" width=\"810\" height=\"455\" alt=\"Visualization of a label above a form field\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-label-above-a-form-field-h268.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"298.765625\" data-img-h-d=\"167.859375\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"227.0625\" data-img-h-t=\"127.5703125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"170.0234375\" data-img-h-m=\"95.5234375\" data-img-of-m=\"contain\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-a-label-next-to-a-form-element.png\" class=\"col all softer-shadow\" width=\"810\" height=\"401\" alt=\"Visualization of a label next to a form element\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-a-label-next-to-a-form-element-h236.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"338.5625\" data-img-h-d=\"167.8515625\" data-img-of-d=\"contain\" data-img-vw-t=\"617\" data-img-w-t=\"257.3125\" data-img-h-t=\"127.5703125\" data-img-of-t=\"contain\" data-img-vw-m=\"462\" data-img-w-m=\"192.671875\" data-img-h-m=\"95.5234375\" data-img-of-m=\"contain\"><\/div><p>I decided to make the two ways of connecting a label change how they will be displayed. The first method places the label and form field next to each other, while the second method places the label and form field below each other. The code below also includes some exclusions for specific types of form fields.<\/p><tw-pre><code class=\"css-code\">label[for] {\r\n  display:      inline-block;\r\n  margin-right: 18.75px;\r\n}\r\nlabel:not([for]) {\r\n  display: block;\r\n}\r\nlabel:not([for]) &gt; input:not([type=\"checkbox\"]):not([type=\"radio\"]),\r\nlabel:not([for]) &gt; select,\r\nlabel:not([for]) &gt; textarea {\r\n  display:    block;\r\n  margin-top: 6.25px;\r\n}\r\nlabel:not([for]) &gt; input:not([type=\"checkbox\"]):not([type=\"radio\"]):not([type=\"image\"]),\r\nlabel:not([for]) &gt; select,\r\nlabel:not([for]) &gt; textarea {\r\n  width: 100%;\r\n}<\/code><\/tw-pre><h4>Simple input fields<\/h4><p>Simple input fields are fields that are the same except for their formatting. Simple input field types are <code class=\"html-code\">text<\/code>, <code class=\"html-code\">email<\/code>, <code class=\"html-code\">tel<\/code>, <code class=\"html-code\">date<\/code>, <code class=\"html-code\">datetime-local<\/code>, <code class=\"html-code\">month<\/code>, <code class=\"html-code\">week<\/code>, <code class=\"html-code\">password<\/code>, <code class=\"html-code\">search<\/code>, <code class=\"html-code\">&lt;time&gt;<\/code>, <code class=\"html-code\">url<\/code>, <code class=\"html-code\">number<\/code>, and <code class=\"html-code\">color<\/code>. Some properties of these input fields overlap with select boxes and text areas.<\/p><p>Let's start by setting the accent color for input fields, select boxes, and text areas.<\/p><tw-pre><code class=\"css-code\">input, select, textarea {\r\n  accent-color: var(--accent-color);\r\n}<\/code><\/tw-pre><p>In the CSS shown above I refer to a CSS variable that you should define in rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and in rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {<\/span><ins>\r\n  --accent-color:    var(--light-blue);<\/ins><span class=\"semi-opaque\">\r\n  --hyperlink-color: var(--dark-blue);\r\n  color:             var(--black);\r\n}\r\n.color-scheme-light {<\/span><ins>\r\n  --accent-color:    var(--lighter-blue);<\/ins><span class=\"semi-opaque\">\r\n  --hyperlink-color: var(--lighter-blue);\r\n  color:             var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><p>The reason for the accent color to be defined as a variable <code class=\"css-code\">--accent-color<\/code> and to be used by property <code class=\"css-code\">accent-color<\/code>, is that this color will be used by checkboxes and radios which's <code class=\"css-code\">appearance<\/code>-property will be set to <code class=\"css-code\">none<\/code>. As the <code class=\"css-code\">appearance<\/code>-property is set to <code class=\"css-code\">none<\/code>, property <code class=\"css-code\">accent-color<\/code> no longer affects the color, and so I have to apply the colors myself - using the CSS variable <code class=\"css-code\">--accent-color<\/code>.<\/p><p>When you focus an input field (when you click it to be able to type text, for instance), it has an outline by default. Let's get rid of that outline.<\/p><tw-pre><code class=\"css-code\">input:focus, select:focus, textarea:focus {\r\n  outline: none;\r\n}<\/code><\/tw-pre><p>Input fields also have a placeholder, which is a pseudo element that has a color and opacity that differs per browser, so let's set our own values for those properties:<\/p><tw-pre><code class=\"css-code\">input::placeholder {\r\n  color:   inherit;\r\n  opacity: 0.6;\r\n}<\/code><\/tw-pre><p>Using value <code class=\"css-code\">inherit<\/code> for property <code class=\"css-code\">color<\/code> for placeholders basically means using the color of the text field, instead of setting that color yourself. I have tried setting the color using variable <code class=\"css-code\">--field-color<\/code>, but variables do not cascade towards pseudo elements, so that wasn't going to work.<\/p><p>Now, let's finally add the main styling for simple input fields, text areas, and select boxes.<\/p><tw-pre><code class=\"css-code\">input[type=\"text\"],\r\ninput[type=\"email\"],\r\ninput[type=\"tel\"],\r\ninput[type=\"date\"],\r\ninput[type=\"datetime-local\"],\r\ninput[type=\"month\"],\r\ninput[type=\"week\"],\r\ninput[type=\"password\"],\r\ninput[type=\"search\"],\r\ninput[type=\"time\"],\r\ninput[type=\"url\"],\r\ninput[type=\"number\"],\r\ninput[type=\"color\"],\r\ntextarea,\r\nselect {\r\n  -webkit-appearance: none;\r\n  -moz-appearance:    none;\r\n  appearance:         none;\r\n  color:              var(--field-color);\r\n  background-color:   var(--field-background-color);\r\n  border:             1.5px solid var(--field-border-color);\r\n  padding:            12.5px;\r\n  font-family:        inherit;\r\n  font-weight:        inherit;\r\n  font-size:          15px;\r\n  line-height:        1.5;\r\n  vertical-align:     top;\r\n  border-radius:      6.25px;\r\n}<\/code><\/tw-pre><p>As discussed earlier, we set the <code class=\"css-code\">appearance<\/code>-property to value <code class=\"css-code\">none<\/code>, along with the prefixed versions, of which I'm not sure whether they are necessary or not.<\/p><p>As you can see I defined variables for the text color, background color and border color for fields. Please define those in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:           var(--light-blue);\r\n  --hyperlink-color:        var(--dark-blue);<\/span><ins>\r\n  --field-color:            var(--black);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--gray);<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:           var(--lighter-blue);\r\n  --hyperlink-color:        var(--lighter-blue);<\/span><ins>\r\n  --field-color:            var(--white);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--light-gray);<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><h4>Checkboxes and radio buttons<\/h4><p>If you have worked with checkboxes and radio options before, I can feel your pain when it comes to vertically aligning those elements. Especially when working on WordPress websites or WooCommerce webshops that have checkbox styles applied by Bootstrap, a WordPress theme, and WooCommerce all at once; you fix one checkbox, but the other checkboxes are ruined.<\/p><p>But let's not think about that. Let's make checkboxes and radio buttons ourselves.<\/p><tw-pre><code class=\"css-code\">input[type=\"checkbox\"],\r\ninput[type=\"radio\"] {\r\n  -webkit-appearance: none;\r\n  -moz-appearance:    none;\r\n  appearance:         none;\r\n  width:              17px;\r\n  height:             17px;\r\n  background-color:   var(--field-background-color);\r\n  border:             1.5px solid var(--field-border-color);\r\n  margin:             0px 3px -2px 0px;\r\n  position:           relative;\r\n}\r\ninput[type=\"checkbox\"] + label[for],\r\ninput[type=\"radio\"] + label[for] {\r\n  display: inline;\r\n}\r\ninput[type=\"checkbox\"] {\r\n  border-radius: 3.125px;\r\n}<\/code><\/tw-pre><p>I applied <code class=\"css-code\">position: relative<\/code>, because radio buttons have a circle in the center when they are chosen that has to be positioned with <code class=\"css-code\">position: absolute<\/code>. Checkboxes get a background image instead, because I can store the background image as a CSS variable that has a different image depending on the color scheme (dark or light).<\/p><tw-pre><code class=\"css-code\">input[type=\"checkbox\"]:checked {\r\n  background-color:    var(--accent-color);\r\n  border-color:        var(--accent-color);\r\n  background-image:    var(--checkbox-check-url);\r\n  background-size:     7px;\r\n  background-repeat:   no-repeat;\r\n  background-position: 3.5px 2.5px;\r\n}<\/code><\/tw-pre><p>As discussed earlier, since the checkbox no longer has its default browser appearance, I have to color it myself using the CSS variable <code class=\"css-code\">--accent-color<\/code>. Please define CSS variable <code class=\"css-code\">--checkbox-check-url<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code> as shown below.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:           var(--light-blue);\r\n  --hyperlink-color:        var(--dark-blue);\r\n  --field-color:            var(--black);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--gray);<\/span><ins>\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:           var(--lighter-blue);\r\n  --hyperlink-color:        var(--lighter-blue);\r\n  --field-color:            var(--white);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--light-gray);<\/span><ins>\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><p>The reason why the URL looks not so appealing, is because it is the URL encoded content of an SVG image. Why? Well, instead of creating another HTTP request to the server after downloading the CSS file, I decided to include the SVG image in the CSS to save time.<\/p><p>If you want to URL encode a different SVG image for the check inside a checkbox, I suggest using the <a href=\"https:\/\/yoksel.github.io\/url-encoder\/\" target=\"_blank\" rel=\"noopener\">URL-encoder for SVG<\/a>.<\/p><p>The checkbox is done, so let's finish the styling of the radio button.<\/p><tw-pre><code class=\"css-code\">input[type=\"radio\"] {\r\n  border-radius: 50%;\r\n}\r\ninput[type=\"radio\"]:checked::after {\r\n  content:          '';\r\n  width:            9px;\r\n  height:           9px;\r\n  border-radius:    50%;\r\n  background-color: var(--accent-color);\r\n  position:         absolute;\r\n  top:              2.5px;\r\n  left:             2.5px;\r\n}<\/code><\/tw-pre><p>The checkboxes and radio buttons are now complete.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-checkboxes-and-radio-buttons.png\" class=\"softer-shadow\" width=\"2575\" height=\"710\" alt=\"Visualization of checkboxes and radio buttons\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-checkboxes-and-radio-buttons-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"183.3828125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"138.1640625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"103.4609375\" data-img-of-m=\"fill\"><h4>Range input fields<\/h4><p>As the main styling for simple input fields does not apply to range input fields, we still need to add a background color, and undo a border around the slider thumb of the range input field by applying <code class=\"css-code\">-webkit-appearance: none<\/code>, but that's about it.<\/p><tw-pre><code class=\"css-code\">input[type=\"range\"] {\r\n  background: var(--field-background-color);\r\n}\r\ninput[type=\"range\"]::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n}<\/code><\/tw-pre><h4>Color input fields<\/h4><p>The main styling for simple input fields apply to color input fields, but since browsers set some default styling for color input fields in particular, I decided to do something about it.<\/p><tw-pre><code class=\"css-code\">input[type=\"color\"] {\r\n  height: auto;\r\n}\r\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n  height: 1.5em;\r\n}\r\ninput[type=\"color\"]::-webkit-color-swatch {\r\n  border: none;\r\n}<\/code><\/tw-pre><h4>Textareas<\/h4><p>Text areas are just like regular text input fields, but they are often taller and can contain multiple lines of text instead of one line. Text areas can also be resized by the user, but I decided to limit resizing of text areas to just the height. I also set a minimum height.<\/p><tw-pre><code class=\"css-code\">textarea {\r\n  resize:     vertical;\r\n  min-height: 127px;\r\n}<\/code><\/tw-pre><h4>Select boxes<\/h4><p>Now, select boxes are special. They are so special, that, in order to make them look good, you have to get rid of all default browser styles and add a background image to function as a downwards caret. This is nothing new, as we did the same thing to checkboxes.<\/p><tw-pre><code class=\"css-code\">select {\r\n  padding-right:       calc(12.5px + 1em * 85 \/ 141 + 25px);\r\n  background-image:    var(--selectbox-caret-url);\r\n  background-size:     auto 0.5em;\r\n  background-repeat:   no-repeat;\r\n  background-position: calc(100% - 12.5px) center;\r\n}<\/code><\/tw-pre><p>Yes, I added more URL encoded SVG images into CSS variables and you can't stop me.<\/p><p>In fact, I suggest you define the variable <code class=\"css-code\">--selectbox-caret-url<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:           var(--light-blue);\r\n  --hyperlink-color:        var(--dark-blue);\r\n  --field-color:            var(--black);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--gray);\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");<\/span><ins>\r\n  --selectbox-caret-url:    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:           var(--lighter-blue);\r\n  --hyperlink-color:        var(--lighter-blue);\r\n  --field-color:            var(--white);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--light-gray);\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");<\/span><ins>\r\n  --selectbox-caret-url:    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");<\/ins><span class=\"semi-opaque\">\r\n  color:                    var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><p>Unlike select boxes, you don't have any other option than just styling the options within select boxes by using variables <code class=\"css-code\">--txt-color<\/code> and <code class=\"css-code\">--bg-color<\/code>.<\/p><tw-pre><code class=\"css-code\">option {\r\n  color:            var(--txt-color);\r\n  background-color: var(--bg-color);\r\n}<\/code><\/tw-pre><p>I tried setting the background color to <code class=\"css-code\">transparent<\/code>, but that doesn't work - it would just be white. So instead I used the text color of the first ancestor element that declared a color scheme, and the background color of the first ancestor element that declared a background color. It required me to rewrite some CSS, but it was all worth the effort.<\/p><p>The value for variable <code class=\"css-code\">--txt-color<\/code> gets set or updated whenever you set a new color scheme using classes <code class=\"html-code\">color-scheme-dark<\/code> and <code class=\"html-code\">color-scheme-light<\/code>. The value for variable <code class=\"css-code\">--bg-color<\/code> gets set or updated whenever you add a background color to any element using a class like <code class=\"html-code\">bg-dark-blue<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.bg-black {<\/span><ins>\r\n  --bg-color: var(--black);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-darker-blue {<\/span><ins>\r\n  --bg-color: var(--darker-blue);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-dark-blue {<\/span><ins>\r\n  --bg-color: var(--dark-blue);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-light-blue {<\/span><ins>\r\n  --bg-color: var(--light-blue);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-lighter-blue {<\/span><ins>\r\n  --bg-color: var(--lighter-blue);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-gray {<\/span><ins>\r\n  --bg-color: var(--gray);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-light-gray {<\/span><ins>\r\n  --bg-color: var(--light-gray);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-lighter-gray {<\/span><ins>\r\n  --bg-color: var(--lighter-gray);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-off-white {<\/span><ins>\r\n  --bg-color: var(--off-white);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.bg-white {<\/span><ins>\r\n  --bg-color: var(--white);<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Now, use variable <code class=\"css-code\">--bg-color<\/code> in the rule set with selector <code class=\"css-code\">[class^='bg-'], [class*=' bg-']<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">[class^='bg-'], [class*=' bg-'] {\r\n  --has-fill-top:    1 !important;\r\n  --has-fill-right:  1 !important;\r\n  --has-fill-bottom: 1 !important;\r\n  --has-fill-left:   1 !important;<\/span><ins>\r\n  background-color:  var(--bg-color) !important;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Change declaration <code class=\"css-code\">color: var(--black)<\/code> to <code class=\"css-code\">--txt-color: var(--black)<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and change declaration <code class=\"css-code\">color: var(--white-a90)<\/code> to <code class=\"css-code\">--txt-color: var(--white-a90)<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:           var(--light-blue);\r\n  --hyperlink-color:        var(--dark-blue);\r\n  --field-color:            var(--black);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--gray);\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");<\/span><ins>\r\n  --txt-color:              var(--black);<\/ins><span class=\"semi-opaque\">\r\n}\r\n.color-scheme-light {\r\n  --accent-color:           var(--lighter-blue);\r\n  --hyperlink-color:        var(--lighter-blue);\r\n  --field-color:            var(--white);\r\n  --field-background-color: transparent;\r\n  --field-border-color:     var(--light-gray);\r\n  --checkbox-check-url:     url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");<\/span><ins>\r\n  --txt-color:              var(--white-a90);<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Finally, use CSS variable <code class=\"css-code\">--txt-color<\/code> in a new CSS rule set which I suggest you place below the rule set with the selector <code class=\"css-code\">.color-scheme-light<\/code>.<\/p><tw-pre><code class=\"css-code\">[class^='txt-'], [class*=' txt-'], .color-scheme-dark, .color-scheme-light {\r\n  color: var(--txt-color) !important;\r\n}<\/code><\/tw-pre><h4>Buttons<\/h4><p>Finally, something that is a common element which only now gets some styling: the button.<\/p><tw-pre><code class=\"css-code\">button, input[type=\"submit\"], .button {\r\n  display:            inline-block;\r\n  padding:            12.5px;\r\n  -webkit-appearance: none;\r\n  -moz-appearance:    none;\r\n  appearance:         none;\r\n  color:              var(--button-color);\r\n  background-color:   var(--button-background-color);\r\n  border:             1.5px solid var(--button-border-color);\r\n  border-radius:      6.25px;\r\n  font-size:          15px;\r\n  cursor:             pointer;\r\n  outline:            0px;\r\n}\r\nbutton:hover, input[type=\"submit\"]:hover, .button:hover {\r\n  color:            var(--button-background-color);\r\n  background-color: transparent;\r\n  border-color:     var(--button-background-color);\r\n}<\/code><\/tw-pre><p>Finally, below is an overview of all form fields that we've just styled:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-form-elements.png\" width=\"1536\" height=\"2494\" class=\"softer-shadow\" alt=\"Visualization of form elements\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/visualization-of-form-elements-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"1082.3125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"815.453125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"610.609375\" data-img-of-m=\"fill\"><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>Creating a simple layout<\/h2><p>I tried to keep you hooked by adding visualizations throughout this article, but I understand that at some point you have to test and make it <em>your own<\/em> CSS design system.<\/p><p>Just add some stuff, I don't know. Choose a better font than Arial (please), and choose the colors that you like. There are still a lot of classes to add to make your layout more advanced and create some advanced styling, like changing the width of columns, adding a box shadow, changing colors on element-level (if necessary), changing the text alignment, the horizontal and vertical alignment of columns within rows, \u2026 Heck, you need to make it work on smaller devices too!<\/p><tw-shortcode-wrapper data-id=\"18\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Utility classes for simple styling<\/h2><p>Utility classes are classes that have a single purpose. A class called <code class=\"html-code\">bg-dark-blue<\/code>, for instance, just sets the background color to dark blue. It's as simple as that. But do not use utility classes too much, because the main styling should be done by the design system.<\/p><p>Utility classes should be used to define a behavior or styling that is unlike the default; if you want 90% of your hyperlinks to be red instead of blue, you should change it in the CSS design system instead of manually adding a utility class to 90 percent of your hyperlinks.<\/p><h3>Text color, background color, border color, text color on hover, etc<\/h3><p>You already added the classes for background colors, so let's add the utility classes for text color, text color on hover, background color on hover, border color, and border color on hover. I suggest you add the following utility classes.<\/p><tw-pre><code class=\"css-code\"><ins>.txt-black {\r\n  --txt-color: var(--black);\r\n}\r\n.txt-darker-blue {\r\n  --txt-color: var(--darker-blue);\r\n}\r\n.txt-dark-blue {\r\n  --txt-color: var(--dark-blue);\r\n}\r\n.txt-light-blue {\r\n  --txt-color: var(--light-blue);\r\n}\r\n.txt-lighter-blue {\r\n  --txt-color: var(--lighter-blue);\r\n}\r\n.txt-gray {\r\n  --txt-color: var(--gray);\r\n}\r\n.txt-light-gray {\r\n  --txt-color: var(--light-gray);\r\n}\r\n.txt-lighter-gray {\r\n  --txt-color: var(--lighter-gray);\r\n}\r\n.txt-off-white {\r\n  --txt-color: var(--off-white);\r\n}\r\n.txt-white {\r\n  --txt-color: var(--white);\r\n}\r\n<\/ins><span class=\"semi-opaque\">.bg-black {\r\n  --bg-color: var(--black);\r\n}\r\n.bg-darker-blue {\r\n  --bg-color: var(--darker-blue);\r\n}\r\n.bg-dark-blue {\r\n  --bg-color: var(--dark-blue);\r\n}\r\n.bg-light-blue {\r\n  --bg-color: var(--light-blue);\r\n}\r\n.bg-lighter-blue {\r\n  --bg-color: var(--lighter-blue);\r\n}\r\n.bg-gray {\r\n  --bg-color: var(--gray);\r\n}\r\n.bg-light-gray {\r\n  --bg-color: var(--light-gray);\r\n}\r\n.bg-lighter-gray {\r\n  --bg-color: var(--lighter-gray);\r\n}\r\n.bg-off-white {\r\n  --bg-color: var(--white);\r\n}\r\n.bg-white {\r\n  --bg-color: var(--white);\r\n}<\/span><ins>\r\n.bor-black {\r\n  --bor-color: var(--black);\r\n}\r\n.bor-darker-blue {\r\n  --bor-color: var(--darker-blue);\r\n}\r\n.bor-dark-blue {\r\n  --bor-color: var(--dark-blue);\r\n}\r\n.bor-light-blue {\r\n  --bor-color: var(--light-blue);\r\n}\r\n.bor-lighter-blue {\r\n  --bor-color: var(--lighter-blue);\r\n}\r\n.bor-gray {\r\n  --bor-color: var(--gray);\r\n}\r\n.bor-light-gray {\r\n  --bor-color: var(--light-gray);\r\n}\r\n.bor-lighter-gray {\r\n  --bor-color: var(--lighter-gray);\r\n}\r\n.bor-off-white {\r\n  --bor-color: var(--off-white);\r\n}\r\n.bor-white {\r\n  --bor-color: var(--white);\r\n}<\/ins><\/code><\/tw-pre><p>Now, add the following in order to use the variable <code class=\"css-code\">--bor-color<\/code>:<\/p><tw-pre><code class=\"css-code\">[class^='bor-'],\r\n[class*=' bor-'] {\r\n  border-color: var(--bor-color) !important;\r\n}<\/code><\/tw-pre><p>Color utility classes are handy for making specific buttons stand out, but what happens when you hover on a button is also important to be able to change. Copy and paste all rule sets of which the selector starts with either <code class=\"css-code\">.txt-<\/code>, <code class=\"css-code\">.bg-<\/code>, or <code class=\"css-code\">.bor-<\/code>, and append <code class=\"css-code\">-hover:hover<\/code> to the selector.<\/p><tw-pre><code class=\"css-code\">.txt-black-hover:hover {\r\n  --txt-color: var(--black);\r\n}\r\n.txt-darker-blue-hover:hover {\r\n  --txt-color: var(--darker-blue);\r\n}\r\n.txt-dark-blue-hover:hover {\r\n  --txt-color: var(--dark-blue);\r\n}\r\n.txt-light-blue-hover:hover {\r\n  --txt-color: var(--light-blue);\r\n}\r\n.txt-lighter-blue-hover:hover {\r\n  --txt-color: var(--lighter-blue);\r\n}\r\n.txt-gray-hover:hover {\r\n  --txt-color: var(--gray);\r\n}\r\n.txt-light-gray-hover:hover {\r\n  --txt-color: var(--light-gray);\r\n}\r\n.txt-lighter-gray-hover:hover {\r\n  --txt-color: var(--lighter-gray);\r\n}\r\n.txt-off-white-hover:hover {\r\n  --txt-color: var(--off-white);\r\n}\r\n.txt-white-hover:hover {\r\n  --txt-color: var(--white);\r\n}\r\n.bg-black-hover:hover {\r\n  --bg-color: var(--black);\r\n}\r\n.bg-darker-blue-hover:hover {\r\n  --bg-color: var(--darker-blue);\r\n}\r\n.bg-dark-blue-hover:hover {\r\n  --bg-color: var(--dark-blue);\r\n}\r\n.bg-light-blue-hover:hover {\r\n  --bg-color: var(--light-blue);\r\n}\r\n.bg-lighter-blue-hover:hover {\r\n  --bg-color: var(--lighter-blue);\r\n}\r\n.bg-gray-hover:hover {\r\n  --bg-color: var(--gray);\r\n}\r\n.bg-light-gray-hover:hover {\r\n  --bg-color: var(--light-gray);\r\n}\r\n.bg-lighter-gray-hover:hover {\r\n  --bg-color: var(--lighter-gray);\r\n}\r\n.bg-off-white-hover:hover {\r\n  --bg-color: var(--off-white);\r\n}\r\n.bg-white-hover:hover {\r\n  --bg-color: var(--white);\r\n}\r\n.bor-black-hover:hover {\r\n  --bor-color: var(--black);\r\n}\r\n.bor-darker-blue-hover:hover {\r\n  --bor-color: var(--darker-blue);\r\n}\r\n.bor-dark-blue-hover:hover {\r\n  --bor-color: var(--dark-blue);\r\n}\r\n.bor-light-blue-hover:hover {\r\n  --bor-color: var(--light-blue);\r\n}\r\n.bor-lighter-blue-hover:hover {\r\n  --bor-color: var(--lighter-blue);\r\n}\r\n.bor-gray-hover:hover {\r\n  --bor-color: var(--gray);\r\n}\r\n.bor-light-gray-hover:hover {\r\n  --bor-color: var(--light-gray);\r\n}\r\n.bor-lighter-gray-hover:hover {\r\n  --bor-color: var(--lighter-gray);\r\n}\r\n.bor-off-white-hover:hover {\r\n  --bor-color: var(--off-white);\r\n}\r\n.bor-white-hover:hover {\r\n  --bor-color: var(--white);\r\n}<\/code><\/tw-pre><p>You <em>could<\/em> also extend this CSS to be able to add colors for the top, right, bottom, and left border. You could also <em>not<\/em> want to add different colors for each side.<\/p><p>I will not completely expand every single possibility, because otherwise the CSS file will get large very quickly when we are going to make all utility classes device-specific as well, meaning you are going to copy, paste and edit all utility classes to multiple media queries.<\/p><p>The design system of the website you are looking at right now, <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/remove-unused-css-classes-automatically\/\" target=\"_blank\" rel=\"noopener\">removes unused CSS classes automatically<\/a>, so I don't have to worry about how many classes I add to my CSS file.<\/p><h3>Text decoration<\/h3><p>In some situations you want to remove the underline from a hyperlink, because the hyperlink is to be styled as a block or inline block with padding, background color, etc. Add the following below the rule set with selector <code class=\"css-code\">.row[class^='bg-'] + :not(.row):not(.col), .row[class*=' bg-'] + :not(.row):not(.col)<\/code>:<\/p><tw-pre><code class=\"css-code\">.no-txt-decor {\r\n  text-decoration: none;\r\n}<\/code><\/tw-pre><h3>Text transform: uppercase, lowercase, capitalize<\/h3><p>I find it useful to be able to write in all caps without having to use caps lock, so I prefer using CSS to transform the text into uppercase. Another advantage of this, is that when a piece of uppercase text is shown in search results of Google, that it appears normally instead of full caps. Add the following below the rule with selector <code class=\"css-code\">.no-txt-decor<\/code>:<\/p><tw-pre><code class=\"css-code\">.uppercase {\r\n  text-transform: uppercase;\r\n}\r\n.lowercase {\r\n  text-transform: lowercase;\r\n}\r\n.capitalize {\r\n  text-transform: capitalize;\r\n}<\/code><\/tw-pre><h3>Text align<\/h3><p>Add the following below the rule set with selector <code class=\"css-code\">.capitalize<\/code>:<\/p><tw-pre><code class=\"css-code\">.txt-left {\r\n  text-align: left;\r\n}\r\n.txt-center {\r\n  text-align: center;\r\n}\r\n.txt-right {\r\n  text-align: right;\r\n}<\/code><\/tw-pre><h3>Borders<\/h3><p>While adding border classes for the CSS design system, I realized that borders do also need some padding between the content of the box and the border of the box.<\/p><p>Originally I used only one variable called <code class=\"css-code\">--has-bg<\/code> instead of the four variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">has-fill-left<\/code>. Now, because elements that have a border also need a padding, I realized that this would also mean that it would need some padding, just like rows and columns with a background color.<\/p><p>As I said, I used a single variable called <code class=\"css-code\">--has-bg<\/code> for elements with a background color, but I had to separate it into four variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-left<\/code>. Which might not sound hard, but the rows require a new approach.<\/p><p>Columns are easy, just add a padding and a border - no further changes needed after doing so. Rows without a background color, on the other hand, use a negative left and right margin to negate the left and right margins of the columns within. What happens next is that if you add a border on the left, the border will be wider than the content of other rows.<\/p><p>I came up with a solution that sounds ridiculous, but it works - I added pseudo-element <code class=\"css-code\">::before<\/code> to rows which uses variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-bottom<\/code> to position and size itself within the row. This was harder than I thought.<\/p><p>Before showing you how that works, let's add the following CSS for the border classes below the rule set with selector <code class=\"css-code\">.txt-right<\/code>:<\/p><tw-pre><code class=\"css-code\">.border:not(.row), .border-top:not(.row) {\r\n  --has-fill-top:   1 !important;\r\n  border-top-width: 1.5px;\r\n  border-top-style: solid;\r\n}\r\n.border:not(.row), .border-right:not(.row) {\r\n  --has-fill-right:   1 !important;\r\n  border-right-width: 1.5px;\r\n  border-right-style: solid;\r\n}\r\n.border:not(.row), .border-bottom:not(.row) {\r\n  --has-fill-bottom:   1 !important;\r\n  border-bottom-width: 1.5px;\r\n  border-bottom-style: solid;\r\n}\r\n.border:not(.row), .border-left:not(.row) {\r\n  --has-fill-left:   1 !important;\r\n  border-left-width: 1.5px;\r\n  border-left-style: solid;\r\n}\r\n.row.border,\r\n.row.border-top {\r\n  --has-fill-top:    1 !important;\r\n  padding-top:       calc(50px * var(--col-spacing-multiplier));\r\n}\r\n.row.border,\r\n.row.border-right {\r\n  --has-fill-right:  1 !important;\r\n  padding-right:     calc(25px * var(--col-spacing-multiplier));\r\n}\r\n.row.border,\r\n.row.border-bottom {\r\n  --has-fill-bottom: 1 !important;\r\n  padding-bottom:    calc(25px * var(--col-spacing-multiplier));\r\n}\r\n.row.border,\r\n.row.border-left {\r\n  --has-fill-left: 1 !important;\r\n  padding-left:    calc(25px * var(--col-spacing-multiplier));\r\n}\r\n.row.border::before,\r\n.row.border-top::before {\r\n  --has-fill-top:     1;\r\n  border-top-width:   1.5px;\r\n  border-top-style:   solid;\r\n}\r\n.row.border::before,\r\n.row.border-right::before {\r\n  --has-fill-right:     1;\r\n  border-right-width:   1.5px;\r\n  border-right-style:   solid;\r\n}\r\n.row.border::before,\r\n.row.border-bottom::before {\r\n  --has-fill-bottom:     1;\r\n  border-bottom-width:   1.5px;\r\n  border-bottom-style:   solid;\r\n}\r\n.row.border::before,\r\n.row.border-left::before {\r\n  --has-fill-left:     1;\r\n  border-left-width:   1.5px;\r\n  border-left-style:   solid;\r\n}\r\n.border-solid:not(.row), .border-top-solid:not(.row) {\r\n  border-top-style: solid;\r\n}\r\n.border-solid:not(.row), .border-right-solid:not(.row) {\r\n  border-right-style: solid;\r\n}\r\n.border-solid:not(.row), .border-bottom-solid:not(.row) {\r\n  border-bottom-style: solid;\r\n}\r\n.border-solid:not(.row), .border-left-solid:not(.row) {\r\n  border-left-style: solid;\r\n}\r\n.row.border-solid::before, .row.border-top-solid::before {\r\n  border-top-style: solid;\r\n}\r\n.row.border-solid::before, .row.border-right-solid::before {\r\n  border-right-style: solid;\r\n}\r\n.row.border-solid::before, .row.border-bottom-solid::before {\r\n  border-bottom-style: solid;\r\n}\r\n.row.border-solid::before, .row.border-left-solid::before {\r\n  border-left-style: solid;\r\n}\r\n.border-dashed:not(.row), .border-top-dashed:not(.row) {\r\n  border-top-style: dashed;\r\n}\r\n.border-dashed:not(.row), .border-right-dashed:not(.row) {\r\n  border-right-style: dashed;\r\n}\r\n.border-dashed:not(.row), .border-bottom-dashed:not(.row) {\r\n  border-bottom-style: dashed;\r\n}\r\n.border-dashed:not(.row), .border-left-dashed:not(.row) {\r\n  border-left-style: dashed;\r\n}\r\n.row.border-dashed::before, .row.border-top-dashed::before {\r\n  border-top-style: dashed;\r\n}\r\n.row.border-dashed::before, .row.border-right-dashed::before {\r\n  border-right-style: dashed;\r\n}\r\n.row.border-dashed::before, .row.border-bottom-dashed::before {\r\n  border-bottom-style: dashed;\r\n}\r\n.row.border-dashed::before, .row.border-left-dashed::before {\r\n  border-left-style: dashed;\r\n}\r\n.border-dotted:not(.row), .border-top-dotted:not(.row) {\r\n  border-top-style: dotted;\r\n}\r\n.border-dotted:not(.row), .border-right-dotted:not(.row) {\r\n  border-right-style: dotted;\r\n}\r\n.border-dotted:not(.row), .border-bottom-dotted:not(.row) {\r\n  border-bottom-style: dotted;\r\n}\r\n.border-dotted:not(.row), .border-left-dotted:not(.row) {\r\n  border-left-style: dotted;\r\n}\r\n.row.border-dotted::before, .row.border-top-dotted::before {\r\n  border-top-style: dotted;\r\n}\r\n.row.border-dotted::before, .row.border-right-dotted::before {\r\n  border-right-style: dotted;\r\n}\r\n.row.border-dotted::before, .row.border-bottom-dotted::before {\r\n  border-bottom-style: dotted;\r\n}\r\n.row.border-dotted::before, .row.border-left-dotted::before {\r\n  border-left-style: dotted;\r\n}<\/code><\/tw-pre><p>The CSS code above sets variables <code class=\"css-code\">--has-fill-top<\/code>, <code class=\"css-code\">--has-fill-right<\/code>, <code class=\"css-code\">--has-fill-bottom<\/code>, and <code class=\"css-code\">--has-fill-left<\/code> for each corresponding side of the border a class refers to, because the variable's value does not cascade towards pseudo-elements.<\/p><p>Earlier in this article I talked about spacing between nested rows that had a background color, but were surrounded by paragraphs or any other element that's not a row or column. Since rows with borders now have padding too, just like rows with a background color, these should also be taken into account for those spacing rules in your CSS design system.<\/p><p>So let's update the selector of the following rule sets:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row[class^='bg-'] + .row,\r\n.row[class*=' bg-'] + .row,\r\n.row.border + .row<\/span><ins>,\r\n.row.border-bottom + .row<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: calc(25px * 2 * var(--col-spacing-multiplier));\r\n}\r\n:not(.row):not(.col) + .row[class^='bg-'],\r\n:not(.row):not(.col) + .row[class*=' bg-']<\/span><ins>,\r\n:not(.row):not(.col) + .row.border,\r\n:not(.row):not(.col) + .row.border-top<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: max(12.5px, calc(25px * 2 * var(--col-spacing-multiplier)));\r\n}\r\n.row[class^='bg-'] + :not(.row):not(.col),\r\n.row[class*=' bg-'] + :not(.row):not(.col)<\/span><ins>,\r\n.row.border + :not(.row):not(.col),\r\n.row.border-bottom + :not(.row):not(.col)<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: max(12.5px, calc(25px * var(--col-spacing-multiplier)));\r\n}<\/span><\/code><\/tw-pre><p>Borders should also be taken into account for automatic border radiuses, update the following 5 rule sets:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) {\r\n  --border-radius-depth: 1;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) {\r\n  --border-radius-depth: 2;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) {\r\n  --border-radius-depth: 3;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) {\r\n  --border-radius-depth: 4;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) :is([class^='bg-'], [class*=' bg-'], img<\/span><ins>, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/ins><span class=\"semi-opaque\">) {\r\n  --border-radius-depth: 5;\r\n}<\/span><\/code><\/tw-pre><p>After that, add 4 new rule sets below them:<\/p><tw-pre><code class=\"css-code\">.border, .border-top.border-left {\r\n  border-top-left-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border, .border-top.border-right {\r\n  border-top-right-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border, .border-bottom.border-left {\r\n  border-bottom-left-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border, .border-bottom.border-right {\r\n  border-bottom-right-radius: calc(25px \/ var(--border-radius-depth));\r\n}<\/code><\/tw-pre><p>Now, let's start with the pseudo-element within rows. First, let's apply <code class=\"css-code\">position: relative<\/code> to the rule set with selector <code class=\"css-code\">.row<\/code> and the rule set with selector <code class=\"css-code\">.col<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  display:           flex;\r\n  flex-wrap:         wrap;\r\n  flex-direction:    row;\r\n  align-items:       flex-start;<\/span><ins>\r\n  position:          relative;<\/ins><span class=\"semi-opaque\">\r\n  margin-top:        calc(25px * var(--col-spacing-multiplier));\r\n  margin-bottom:     calc(25px * var(--has-fill-bottom) * var(--col-spacing-multiplier));\r\n  margin-left:       calc((-25px + 25px * var(--has-fill-left)) * var(--col-spacing-multiplier));\r\n  margin-right:      calc((-25px + 25px * var(--has-fill-right)) * var(--col-spacing-multiplier));\r\n  padding-top:       calc(25px * 2 * var(--has-fill-top) * var(--col-spacing-multiplier));\r\n  padding-left:      calc(25px * var(--has-fill-left) * var(--col-spacing-multiplier));\r\n  padding-right:     calc(25px * var(--has-fill-right) * var(--col-spacing-multiplier));\r\n  padding-bottom:    calc(25px * var(--has-fill-bottom) * var(--col-spacing-multiplier));\r\n  --col-spacing-multiplier: 1;\r\n}\r\n.col {\r\n  --has-fill-top:    0;\r\n  --has-fill-right:  0;\r\n  --has-fill-bottom: 0;\r\n  --has-fill-left:   0;\r\n  flex-basis:        0px;\r\n  flex-grow:         1;<\/span><ins>\r\n  position:          relative;<\/ins><span class=\"semi-opaque\">\r\n  margin-left:       calc(25px * var(--col-spacing-multiplier));\r\n  margin-right:      calc(25px * var(--col-spacing-multiplier));\r\n  margin-bottom:     calc(25px * var(--col-spacing-multiplier));\r\n  max-width:         calc(100% - 50px * var(--col-spacing-multiplier));\r\n  padding:           calc(25px * 2 * var(--has-fill-top) * var(--col-spacing-multiplier))\r\n                     calc(25px * 2 * var(--has-fill-right) * var(--col-spacing-multiplier))\r\n                     calc(25px * 2 * var(--has-fill-bottom) * var(--col-spacing-multiplier))\r\n                     calc(25px * 2 * var(--has-fill-left) * var(--col-spacing-multiplier));\r\n}<\/span><\/code><\/tw-pre><p>The value of variable <code class=\"css-code\">--col-spacing-multiplier<\/code> does not cascade to psuedo-elements, so let's do this manually. Add the following CSS in below the rule set with selector <code class=\"css-code\">.row .row<\/code>:<\/p><tw-pre><code class=\"css-code\">.row .row::before {\r\n  --col-spacing-multiplier: 0.5;\r\n}<\/code><\/tw-pre><p>After that, add the following CSS below the rule set with selector <code class=\"css-code\">.row .row .row<\/code>:<\/p><tw-pre><code class=\"css-code\">.row .row .row::before {\r\n  --col-spacing-multiplier: 0.25;\r\n}<\/code><\/tw-pre><p>Finally, add the following CSS below the rule set with selector <code class=\"css-code\">.row<\/code>:<\/p><tw-pre><code class=\"css-code\">.row::before {\r\n  --col-spacing-multiplier: 1;\r\n  --has-fill-top:           0;\r\n  --has-fill-right:         0;\r\n  --has-fill-bottom:        0;\r\n  --has-fill-left:          0;\r\n  border-top-width:         0px;\r\n  border-right-width:       0px;\r\n  border-bottom-width:      0px;\r\n  border-left-width:        0px;\r\n  border-color:             inherit;\r\n  content:                  '';\r\n  display:                  block;\r\n  pointer-events:           none;\r\n  position:                 absolute;\r\n  top:                      0px;\r\n  left:                     calc(\r\n                              max(\r\n                                25px\r\n                                *\r\n                                (\r\n                                  max(\r\n                                    var(--has-fill-top),\r\n                                    var(--has-fill-bottom)\r\n                                  )\r\n                                  -\r\n                                  var(--has-fill-left)\r\n                                ),\r\n                                0px\r\n                              )\r\n                              *\r\n                              var(--col-spacing-multiplier)\r\n                            );\r\n  width:                    calc(\r\n                              100%\r\n                              -\r\n                              (\r\n                                (\r\n                                  (\r\n                                    max(\r\n                                      25px\r\n                                      *\r\n                                      (\r\n                                        max(\r\n                                          var(--has-fill-top),\r\n                                          var(--has-fill-bottom)\r\n                                        )\r\n                                        -\r\n                                        var(--has-fill-left)\r\n                                      ),\r\n                                      0px\r\n                                    )\r\n                                  )\r\n                                  *\r\n                                  var(--col-spacing-multiplier)\r\n                                )\r\n                                +\r\n                                (\r\n                                  (\r\n                                    max(\r\n                                      25px\r\n                                      *\r\n                                      (\r\n                                        max(\r\n                                          var(--has-fill-top),\r\n                                          var(--has-fill-bottom)\r\n                                        )\r\n                                        -\r\n                                        var(--has-fill-right)\r\n                                      ),\r\n                                      0px\r\n                                    )\r\n                                  )\r\n                                  *\r\n                                  var(--col-spacing-multiplier)\r\n                                )\r\n                              )\r\n                            );\r\n  \r\n  height:                   calc(\r\n                              100%\r\n                              +\r\n                              (\r\n                                -25px\r\n                                +\r\n                                25px\r\n                                *\r\n                                var(--has-fill-bottom)\r\n                              )\r\n                              *\r\n                              var(--col-spacing-multiplier)\r\n                            );\r\n  box-sizing:               border-box;\r\n}<\/code><\/tw-pre><p>Now, I know what you're thinking. What are these calculations for, and why are they so large? Well, the thing is, there are many possible variations of what sides of a row have borders. The pseudo-element within that row has to position and resize itself accordingly.<\/p><p>If a row has a border on the top or bottom, but not on the left and not on the right, then the width of the pseudo-element should be <code class=\"css-code\">50px<\/code> smaller than the row itself and should move <code class=\"css-code\">25px<\/code> to the right.<\/p><p>If a row has a border on the top or bottom and on the left side, but not on the right side, then the width of the pseudo-element should be <code class=\"css-code\">25px<\/code> smaller than the row itself, and it should not move to the right at all.<\/p><p>If a row has a border on the top or bottom and on the right side, but not on the left side, then the width of the pseudo-element should also be <code class=\"css-code\">25px<\/code> smaller than the row itself, and it should move <code class=\"css-code\">25px<\/code> to the right, instead of not moving at all, unlike a row that has only a top or bottom and a left border.<\/p><p>If a row has a border on the left, but not anywhere else, then the pseudo-element should <i>not<\/i> move to the bottom, but the height should be <code class=\"css-code\">25px<\/code> smaller than the height of the row, because otherwise the border would stick out of the bottom.<\/p><p>These were just examples for 4 out of all 16 border combinations. I won't discuss them all, because that is a waste of time. I think you understand the complexity.<\/p><p>When I tried to imagine how many possible border side combinations there were, I thought there would be a ton of combinations. Which was, as I discovered whilst writing this, not true.<\/p><p>After calculating this by pretending the zero's and one's in binary numbers are <i>no<\/i> and <i>yes<\/i> for each border side, I ended up with 16 possible border combinations:<\/p><ul><li><code class=\"css-code\">0000<\/code> = no borders<\/li><li><code class=\"css-code\">0001<\/code> = left<\/li><li><code class=\"css-code\">0010<\/code> = bottom<\/li><li><code class=\"css-code\">0011<\/code> = bottom, left<\/li><li><code class=\"css-code\">0100<\/code> = right<\/li><li><code class=\"css-code\">0101<\/code> = right, left<\/li><li><code class=\"css-code\">0110<\/code> = right, bottom<\/li><li><code class=\"css-code\">0111<\/code> = right, bottom, left<\/li><li><code class=\"css-code\">1000<\/code> = top<\/li><li><code class=\"css-code\">1001<\/code> = top, left<\/li><li><code class=\"css-code\">1010<\/code> = top, bottom<\/li><li><code class=\"css-code\">1011<\/code> = top, bottom, left<\/li><li><code class=\"css-code\">1100<\/code> = top, right<\/li><li><code class=\"css-code\">1101<\/code> = top, right, left<\/li><li><code class=\"css-code\">1110<\/code> = top, right, bottom<\/li><li><code class=\"css-code\">1111<\/code> = top, right, bottom, left<\/li><\/ul><p>I <em>did<\/em> think about doing 4 to the power of 2 to end up with 16, but for some reason, in my head, that would not make sense. It was pretty late in the evening, in my defense.<\/p><p>Anyways, using binary numbers and ridiculous calculations just makes me think I look very smart, so I will just stick with that. If you want to write 16 rule sets instead, then go ahead!<\/p><h3>Border radius<\/h3><p>As shown in chapter 8.1 <i>Border radius for rows and columns<\/i>, the deeper a row or column with a background color is nested within other rows or columns with background colors, the smaller the border radius becomes. The naming for the border radius classes that you are going to add goes from <code class=\"html-code\">border-radius-0<\/code> all the way to <code class=\"html-code\">border-radius-5<\/code> where <code class=\"html-code\">border-radius-1<\/code> is <code class=\"css-code\">25px<\/code> and <code class=\"html-code\">border-radius-5<\/code> is <code class=\"css-code\">5px<\/code> (<code class=\"css-code\">25px<\/code> divided by <code class=\"css-code\">5<\/code>).<\/p><p>Add the following below the rule set with selector <code class=\"css-code\">.row.border-dotted::before, .row.border-left-dotted::before<\/code>:<\/p><tw-pre><code class=\"css-code\">.border-radius-none, .border-radius-top-right-none {\r\n  border-top-right-radius: 0px !important;\r\n}\r\n.border-radius-none, .border-radius-bottom-right-none {\r\n  border-bottom-right-radius: 0px !important;\r\n}\r\n.border-radius-none, .border-radius-bottom-left-none {\r\n  border-bottom-left-radius: 0px !important;\r\n}\r\n.border-radius-none, .border-radius-top-left-none {\r\n  border-top-left-radius: 0px !important;\r\n}\r\n.border-rad-1, .border-rad-top-right-1 {\r\n  border-top-right-radius: 25px !important;\r\n}\r\n.border-rad-1, .border-rad-bottom-right-1 {\r\n  border-bottom-right-radius: 25px !important;\r\n}\r\n.border-rad-1, .border-rad-bottom-left-1 {\r\n  border-bottom-left-radius: 25px !important;\r\n}\r\n.border-rad-1, .border-rad-top-left-1 {\r\n  border-top-left-radius: 25px !important;\r\n}\r\n.border-rad-2, .border-rad-top-right-2 {\r\n  border-top-right-radius: calc(25px \/ 2) !important;\r\n}\r\n.border-rad-2, .border-rad-bottom-right-2 {\r\n  border-bottom-right-radius: calc(25px \/ 2) !important;\r\n}\r\n.border-rad-2, .border-rad-bottom-left-2 {\r\n  border-bottom-left-radius: calc(25px \/ 2) !important;\r\n}\r\n.border-rad-2, .border-rad-top-left-2 {\r\n  border-top-left-radius: calc(25px \/ 2) !important;\r\n}\r\n.border-rad-3, .border-rad-top-right-3 {\r\n  border-top-right-radius: calc(25px \/ 3) !important;\r\n}\r\n.border-rad-3, .border-rad-bottom-right-3 {\r\n  border-bottom-right-radius: calc(25px \/ 3) !important;\r\n}\r\n.border-rad-3, .border-rad-bottom-left-3 {\r\n  border-bottom-left-radius: calc(25px \/ 3) !important;\r\n}\r\n.border-rad-3, .border-rad-top-left-3 {\r\n  border-top-left-radius: calc(25px \/ 3) !important;\r\n}\r\n.border-rad-4, .border-rad-top-right-4 {\r\n  border-top-right-radius: calc(25px \/ 4) !important;\r\n}\r\n.border-rad-4, .border-rad-bottom-right-4 {\r\n  border-bottom-right-radius: calc(25px \/ 4) !important;\r\n}\r\n.border-rad-4, .border-rad-bottom-left-4 {\r\n  border-bottom-left-radius: calc(25px \/ 4) !important;\r\n}\r\n.border-rad-4, .border-rad-top-left-4 {\r\n  border-top-left-radius: calc(25px \/ 4) !important;\r\n}\r\n.border-rad-5, .border-rad-top-right-5 {\r\n  border-top-right-radius: calc(25px \/ 5) !important;\r\n}\r\n.border-rad-5, .border-rad-bottom-right-5 {\r\n  border-bottom-right-radius: calc(25px \/ 5) !important;\r\n}\r\n.border-rad-5, .border-rad-bottom-left-5 {\r\n  border-bottom-left-radius: calc(25px \/ 5) !important;\r\n}\r\n.border-rad-5, .border-rad-top-left-5 {\r\n  border-top-left-radius: calc(25px \/ 5) !important;\r\n}<\/code><\/tw-pre><h3>Margins and paddings<\/h3><p>Add the following below the rule set with selector <code class=\"css-code\">.border-rad-5, .border-rad-top-left-5<\/code>:<\/p><tw-pre><code class=\"css-code\">.mar-auto, .mar-top-auto {\r\n  margin-top: auto !important;\r\n}\r\n.mar-auto, .mar-right-auto {\r\n  margin-right: auto !important;\r\n}\r\n.mar-auto, .mar-bottom-auto {\r\n  margin-bottom: auto !important;\r\n}\r\n.mar-auto, .mar-left-auto {\r\n  margin-left: auto !important;\r\n}\r\n.mar-0, .mar-top-0 {\r\n  margin-top: 0px !important;\r\n}\r\n.mar-0, .mar-right-0 {\r\n  margin-right: 0px !important;\r\n}\r\n.mar-0, .mar-bottom-0 {\r\n  margin-bottom: 0px !important;\r\n}\r\n.mar-0, .mar-left-0 {\r\n  margin-left: 0px !important;\r\n}\r\n.mar-1, .mar-top-1 {\r\n  margin-top: 50px !important;\r\n}\r\n.mar-1, .mar-right-1 {\r\n  margin-right: 50px !important;\r\n}\r\n.mar-1, .mar-bottom-1 {\r\n  margin-bottom: 50px !important;\r\n}\r\n.mar-1, .mar-left-1 {\r\n  margin-left: 50px !important;\r\n}\r\n.mar-2, .mar-top-2 {\r\n  margin-top: 25px !important;\r\n}\r\n.mar-2, .mar-right-2 {\r\n  margin-right: 25px !important;\r\n}\r\n.mar-2, .mar-bottom-2 {\r\n  margin-bottom: 25px !important;\r\n}\r\n.mar-2, .mar-left-2 {\r\n  margin-left: 25px !important;\r\n}\r\n.mar-3, .mar-top-3 {\r\n  margin-top: 12.5px !important;\r\n}\r\n.mar-3, .mar-right-3 {\r\n  margin-right: 12.5px !important;\r\n}\r\n.mar-3, .mar-bottom-3 {\r\n  margin-bottom: 12.5px !important;\r\n}\r\n.mar-3, .mar-left-3 {\r\n  margin-left: 12.5px !important;\r\n}\r\n.mar-4, .mar-top-4 {\r\n  margin-top: 6.25px !important;\r\n}\r\n.mar-4, .mar-right-4 {\r\n  margin-right: 6.25px !important;\r\n}\r\n.mar-4, .mar-bottom-4 {\r\n  margin-bottom: 6.25px !important;\r\n}\r\n.mar-4, .mar-left-4 {\r\n  margin-left: 6.25px !important;\r\n}\r\n.mar-n1,\r\n.mar-top-n1 {\r\n  margin-top: -50px !important;\r\n}\r\n.mar-n1,\r\n.mar-right-n1 {\r\n  margin-right: -50px !important;\r\n}\r\n.mar-n1,\r\n.mar-bottom-n1 {\r\n  margin-bottom: -50px !important;\r\n}\r\n.mar-n1,\r\n.mar-left-n1 {\r\n  margin-left: -50px !important;\r\n}\r\n.mar-n2,\r\n.mar-top-n2 {\r\n  margin-top: -25px !important;\r\n}\r\n.mar-n2,\r\n.mar-right-n2 {\r\n  margin-right: -25px !important;\r\n}\r\n.mar-n2,\r\n.mar-bottom-n2 {\r\n  margin-bottom: -25px !important;\r\n}\r\n.mar-n2,\r\n.mar-left-n2 {\r\n  margin-left: -25px !important;\r\n}\r\n.mar-n3,\r\n.mar-top-n3 {\r\n  margin-top: -12.5px !important;\r\n}\r\n.mar-n3,\r\n.mar-right-n3 {\r\n  margin-right: -12.5px !important;\r\n}\r\n.mar-n3,\r\n.mar-bottom-n3 {\r\n  margin-bottom: -12.5px !important;\r\n}\r\n.mar-n3,\r\n.mar-left-n3 {\r\n  margin-left: -12.5px !important;\r\n}\r\n.mar-n4,\r\n.mar-top-n4 {\r\n  margin-top: -6.25px !important;\r\n}\r\n.mar-n4,\r\n.mar-right-n4 {\r\n  margin-right: -6.25px !important;\r\n}\r\n.mar-n4,\r\n.mar-bottom-n4 {\r\n  margin-bottom: -6.25px !important;\r\n}\r\n.mar-n4,\r\n.mar-left-n4 {\r\n  margin-left: -6.25px !important;\r\n}\r\n.pad-0, .pad-top-0 {\r\n  padding-top: 0px !important;\r\n}\r\n.pad-0, .pad-right-0 {\r\n  padding-right: 0px !important;\r\n}\r\n.pad-0, .pad-bottom-0 {\r\n  padding-bottom: 0px !important;\r\n}\r\n.pad-0, .pad-left-0 {\r\n  padding-left: 0px !important;\r\n}\r\n.pad-1, .pad-top-1 {\r\n  padding-top: 50px !important;\r\n}\r\n.pad-1, .pad-right-1 {\r\n  padding-right: 50px !important;\r\n}\r\n.pad-1, .pad-bottom-1 {\r\n  padding-bottom: 50px !important;\r\n}\r\n.pad-1, .pad-left-1 {\r\n  padding-left: 50px !important;\r\n}\r\n.pad-2, .pad-top-2 {\r\n  padding-top: 25px !important;\r\n}\r\n.pad-2, .pad-right-2 {\r\n  padding-right: 25px !important;\r\n}\r\n.pad-2, .pad-bottom-2 {\r\n  padding-bottom: 25px !important;\r\n}\r\n.pad-2, .pad-left-2 {\r\n  padding-left: 25px !important;\r\n}\r\n.pad-3, .pad-top-3 {\r\n  padding-top: 12.5px !important;\r\n}\r\n.pad-3, .pad-right-3 {\r\n  padding-right: 12.5px !important;\r\n}\r\n.pad-3, .pad-bottom-3 {\r\n  padding-bottom: 12.5px !important;\r\n}\r\n.pad-3, .pad-left-3 {\r\n  padding-left: 12.5px !important;\r\n}\r\n.pad-4, .pad-top-4 {\r\n  padding-top: 6.25px !important;\r\n}\r\n.pad-4, .pad-right-4 {\r\n  padding-right: 6.25px !important;\r\n}\r\n.pad-4, .pad-bottom-4 {\r\n  padding-bottom: 6.25px !important;\r\n}\r\n.pad-4, .pad-left-4 {\r\n  padding-left: 6.25px !important;\r\n}<\/code><\/tw-pre><h3>Full-width rows<\/h3><p>First, let's address a problem with full-width rows. Full-width rows require JavaScript to get the correct width when placed inside of a container. You can't just set the width of full-width rows to <code class=\"css-code\">100vw<\/code>, because <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/viewport-relative-fluid-responsive-web-design\/#excluding-scrollbar-from-viewport-width-css-100vw-minus-scrollbar-width\" target=\"_blank\" rel=\"noopener\"><code class=\"css-code\">100vw<\/code> includes the width of the scrollbar<\/a>.<\/p><p>That's why I decided to measure the width of the scrollbar and redefine the CSS unit <code class=\"css-code\">vw<\/code> as a CSS variable called <code class=\"css-code\">--vw<\/code> that takes the width of the scrollbar into account.<\/p><p>First, force a scrollbar to appear and define CSS variable <code class=\"css-code\">--scrollbar-width<\/code> by adding the following style-attribute to the <code class=\"html-code\">&lt;html&gt;<\/code>-element:<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;html<\/span><ins> style=\"min-height: 101vh; --scrollbar-width: 0px;\"<\/ins><span class=\"semi-opaque\">&gt;<\/span><\/code><\/tw-pre><p>Now, let's add a little bit of JavaScript all the way in the top of the <code class=\"html-code\">&lt;head&gt;<\/code>-element:<\/p><tw-pre><code class=\"html-code\">&lt;script type=\"text\/javascript\"&gt;\r\nvar scrollbarWidth = 0;\r\nfunction measureScrollbarWidth() {\r\n  var newScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\r\n  if(newScrollbarWidth !== scrollbarWidth) {\r\n    document.documentElement.style.setProperty('--scrollbar-width', newScrollbarWidth + 'px');\r\n    scrollbarWidth = newScrollbarWidth;\r\n  }\r\n}\r\nmeasureScrollbarWidth();\r\nwindow.addEventListener('resize', measureScrollbarWidth);\r\n&lt;\/script&gt;<\/code><\/tw-pre><p>The script above measures the width of the scrollbar and updates CSS variable <code class=\"css-code\">--scrollbar-width<\/code> if the width of the scrollbar is different from its last width, which is <code class=\"css-code\">0px<\/code> by default.<\/p><p>Now, define variable <code class=\"css-code\">--vw<\/code> in a new rule set below the rule set with selector <code class=\"css-code\">:root<\/code>:<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --vw: calc((100vw - var(--scrollbar-width)) \/ 100);\r\n}<\/code><\/tw-pre><p>Now you can make use of the CSS variable <code class=\"css-code\">--vw<\/code> to set the width of full-width rows and make sure that they are positioned on the left of the screen instead of at the left of the container. Add the following below the rule set with selector <code class=\"css-code\">.pad-4, .pad-left-4<\/code>:<\/p><tw-pre><code class=\"css-code\">.row.full-width {\r\n  margin-left:  calc(50% - 50 * var(--vw));\r\n  margin-right: calc(50% - 50 * var(--vw));\r\n}<\/code><\/tw-pre><p>Another important detail is that full-width rows do not need a border radius, because that would look strange, so extend the following selectors:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  --border-radius-depth: 1;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  --border-radius-depth: 2;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  --border-radius-depth: 3;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  --border-radius-depth: 4;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right)<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  --border-radius-depth: 5;\r\n}\r\n.border<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">, .border-top.border-left<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  border-top-left-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">, .border-top.border-right<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  border-top-right-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">, .border-bottom.border-left<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  border-bottom-left-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.border<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">, .border-bottom.border-right<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\"> {\r\n  border-bottom-right-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.row[class^='bg-']<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">,\r\n.row[class*=' bg-']<\/span><ins>:not(.full-width)<\/ins><span class=\"semi-opaque\">,\r\n.col[class^='bg-'],\r\n.col[class*=' bg-'] {\r\n  border-radius: calc(25px \/ var(--border-radius-depth));\r\n}<\/span><\/code><\/tw-pre><p>You might also want rows of which the width of its contents are as wide as the container, so add the following below the rule set with selector <code class=\"css-code\">.row.full-width<\/code>:<\/p><tw-pre><code class=\"css-code\">.row.full-width.content-in-container {\r\n  padding-left:  calc(50 * var(--vw) - 50% - 25px * var(--col-spacing-multiplier));\r\n  padding-right: calc(50 * var(--vw) - 50% - 25px * var(--col-spacing-multiplier));\r\n}<\/code><\/tw-pre><p>Also, if the first row is full width and has a background color, then make sure there is no space between the header and that row. Add the following below the rule set with selector <code class=\"css-code\">.row.full-width.content-in-container<\/code>: <\/p><tw-pre><code class=\"css-code\">main &gt; article &gt; .container &gt; .row.full-width:first-child {\r\n  margin-top: calc(-50px * var(--has-fill-top));\r\n}<\/code><\/tw-pre><p>There is a scenario where a full width row with a background color is followed by another full width row by a background color. In this case, there should be no margin between them.<\/p><p>Add the following CSS rule set below the rule set with selector <code class=\"css-code\">main &gt; article &gt; .container &gt; .row.full-width:first-child<\/code>:<\/p><tw-pre><code class=\"css-code\">.row.full-width[class^='bg-'] + .row.full-width[class^='bg-'],\r\n.row.full-width[class^='bg-'] + .row.full-width[class*=' bg-'],\r\n.row.full-width[class*=' bg-'] + .row.full-width[class^='bg-'],\r\n.row.full-width[class*=' bg-'] + .row.full-width[class*=' bg-'] {\r\n  margin-top: calc(-25px * var(--col-spacing-multiplier));\r\n}<\/code><\/tw-pre><h3>Full height for rows<\/h3><p>Making a row full height is easy, just add the following below rule set with selector <code class=\"css-code\">.row.full-width[class^='bg-'] + .row.full-width[class^='bg-'], .row.full-width[class^='bg-'] + .row.full-width[class*=' bg-'], .row.full-width[class*=' bg-'] + .row.full-width[class^='bg-'], .row.full-width[class*=' bg-'] + .row.full-width[class*=' bg-']<\/code>:<\/p><tw-pre><code class=\"css-code\">.row.full-height {\r\n  min-height: calc(100vh - var(--header-height) - var(--top-bar-height));\r\n}<\/code><\/tw-pre><p>In chapter 16&nbsp;<i>Creating a header<\/i> we define the height of the header as CSS variable <code class=\"css-code\">--header-height<\/code> for every breakpoint. For now, set variable <code class=\"css-code\">--header-height<\/code> and <code class=\"css-code\">--top-bar-height<\/code> to <code class=\"css-code\">0px<\/code> in the rule set with selector <code class=\"css-code\">:root<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:root {\r\n  --vw:              calc((100vw - var(--scrollbar-width)) \/ 100);<\/span><ins>\r\n  --header-height:   0px;\r\n  --top-bar-height:  0px;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><h3>Box shadow<\/h3><p>Add the following below the rule set:<\/p><tw-pre><code class=\"css-code\">.box-shadow {\r\n  --has-fill-top:    1 !important;\r\n  --has-fill-right:  1 !important;\r\n  --has-fill-bottom: 1 !important;\r\n  --has-fill-left:   1 !important;\r\n  box-shadow:        0px 0px 6.25px 6.25px rgba(0, 0, 0, 0.03);\r\n}<\/code><\/tw-pre><p>If you want to use this class, please extend the following selectors:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) {\r\n  --border-radius-depth: 1;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) {\r\n  --border-radius-depth: 2;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) {\r\n  --border-radius-depth: 3;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) {\r\n  --border-radius-depth: 4;\r\n}\r\n:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right<\/span><ins>, .box-shadow<\/ins><span class=\"semi-opaque\">):not(.full-width) {\r\n  --border-radius-depth: 5;\r\n}\r\n.row[class^='bg-']:not(.full-width),\r\n.row[class*=' bg-']:not(.full-width),\r\n.col[class^='bg-'],\r\n.col[class*=' bg-']<\/span><ins>,\r\n.row.box-shadow:not(.full-width),\r\n.col.box-shadow<\/ins><span class=\"semi-opaque\"> {\r\n  border-radius: calc(25px \/ var(--border-radius-depth));\r\n}\r\n.row[class^='bg-'] + .row,\r\n.row[class*=' bg-'] + .row,\r\n.row.border + .row,\r\n.row.border-bottom + .row<\/span><ins>,\r\n.row.box-shadow + .row<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: calc(25px * 2 * var(--col-spacing-multiplier));\r\n}\r\n:not(.row):not(.col) + .row[class^='bg-'],\r\n:not(.row):not(.col) + .row[class*=' bg-'],\r\n:not(.row):not(.col) + .row.border,\r\n:not(.row):not(.col) + .row.border-top<\/span><ins>,\r\n:not(.row):not(.col) + .row.box-shadow<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: max(12.5px, calc(25px * 2 * var(--col-spacing-multiplier)));\r\n}\r\n.row[class^='bg-'] + :not(.row):not(.col),\r\n.row[class*=' bg-'] + :not(.row):not(.col),\r\n.row.border + :not(.row):not(.col),\r\n.row.border-bottom + :not(.row):not(.col)<\/span><ins>,\r\n.row.box-shadow + :not(.row):not(.col)<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: max(12.5px, calc(25px * var(--col-spacing-multiplier)));\r\n}<\/span><\/code><\/tw-pre><h3>Positioning<\/h3><p>CSS has 5 types of positioning:<\/p><ol><li><code class=\"css-code\">absolute<\/code><\/li><li><code class=\"css-code\">fixed<\/code><\/li><li><code class=\"css-code\">relative<\/code><\/li><li><code class=\"css-code\">static<\/code> (default)<\/li><li><code class=\"css-code\">sticky<\/code><\/li><\/ol><p>Add the following below the rule set with selector <code class=\"css-code\">.row.full-width.content-in-container<\/code>:<\/p><tw-pre><code class=\"css-code\">.absolute {\r\n  position: absolute !important;\r\n}\r\n.fixed {\r\n  position: fixed !important;\r\n}\r\n.relative {\r\n  position: relative !important;\r\n}\r\n.static {\r\n  position: static !important;\r\n}\r\n.sticky {\r\n  position: sticky !important;\r\n}\r\n.top {\r\n  top:    0px;\r\n  bottom: auto;\r\n}\r\n.right {\r\n  right: 0px;\r\n  left:  auto;\r\n}\r\n.bottom {\r\n  bottom: 0px;\r\n  top:    auto;\r\n}\r\n.left {\r\n  left:  0px;\r\n  right: auto;\r\n}\r\n.top-out {\r\n  bottom: 100%;\r\n  top:    auto;\r\n}\r\n.right-out {\r\n  left:  100%;\r\n  right: auto;\r\n}\r\n.bottom-out {\r\n  top:    100%;\r\n  bottom: auto;\r\n}\r\n.left-out {\r\n  right: 100%;\r\n  left:  auto;\r\n}<\/code><\/tw-pre><h3>Move element out of the container on the left or right<\/h3><p>A nice effect can be to have an image fill the entire available width on the right side, while the left column contains text that is aligned with the container. Before we can do this, however, we need to know the width of the container.<\/p><p>We can't just use <code class=\"css-code\">100%<\/code> to refer to the width of the container, because the elements that you want to move out of the container on the left or right side, can be placed within columns. <\/p><p>First, let's set the default container width as a CSS variable called <code class=\"css-code\">--container-width<\/code> in the rule set with selector <code class=\"css-code\">:root<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:root {\r\n  --vw:              calc((100vw - var(--scrollbar-width)) \/ 100);<\/span><ins>\r\n  --container-width: 1570px;<\/ins><span class=\"semi-opaque\">\r\n  --header-height:   0px;\r\n  --top-bar-height:  0px;\r\n}<\/span><\/code><\/tw-pre><p>Change value <code class=\"css-code\">1570px<\/code> to <code class=\"css-code\">var(--container-width)<\/code> in the first rule set with selector <code class=\"css-code\">.container<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">\/* DT - Desktop *\/\r\n.container {\r\n  width:         <\/span><ins>var(--container-width)<\/ins><span class=\"semi-opaque\">;\r\n  margin-left:   auto;\r\n  margin-right:  auto;\r\n  padding-left:  25px;\r\n  padding-right: 25px;\r\n}<\/span><\/code><\/tw-pre><p>Now, override variable <code class=\"css-code\">--container-width<\/code> in the remainder of the rule sets with selector <code class=\"css-code\">.container<\/code> by simply adding <code class=\"css-code\">--container-<\/code> in front of property <code class=\"css-code\">width<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.container {\r\n  <\/span><ins>--container-<\/ins><span class=\"semi-opaque\">width: 1170px;\r\n}\r\n.container {\r\n  <\/span><ins>--container-<\/ins><span class=\"semi-opaque\">width: 962px;\r\n}\r\n.container {\r\n  <\/span><ins>--container-<\/ins><span class=\"semi-opaque\">width: calc(100 * var(--vw));\r\n}\r\n.container {\r\n  <\/span><ins>--container-<\/ins><span class=\"semi-opaque\">width: calc(100 * var(--vw));\r\n}\r\n.container {\r\n  <\/span><ins>--container-<\/ins><span class=\"semi-opaque\">width: calc(100 * var(--vw));\r\n}<\/span><\/code><\/tw-pre><p>Notice that the last three rule sets use value <code class=\"css-code\">calc(100 * var(--vw))<\/code> instead of <code class=\"css-code\">100%<\/code> for variable <code class=\"css-code\">--container-width<\/code>, because we can't just refer to <code class=\"css-code\">100%<\/code> for the container width, because the element is most likely not a direct parent of the container.<\/p><p>Finally, we can use the variable <code class=\"css-code\">--container-width<\/code> to move elements out of the container on the left or on the right. Add the following below the rule set with selector <code class=\"css-code\">.left-out<\/code>:<\/p><tw-pre><code class=\"css-code\">.out-container-left {\r\n  margin-left: calc((var(--container-width) - var(--vw) * 100) \/ 2 - 25px);\r\n  max-width:   calc(100% + (var(--vw) * 100 - var(--container-width)) \/ 2 + 25px);\r\n}\r\n.out-container-right {\r\n  margin-right: calc((var(--container-width) - var(--vw) * 100) \/ 2 - 25px);\r\n  max-width:    calc(100% + (var(--vw) * 100 - var(--container-width)) \/ 2 + 25px);\r\n}<\/code><\/tw-pre><tw-shortcode-wrapper data-id=\"19\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Styling for less common elements<\/h2><h3>abbr<\/h3><p><dfn>abbr <\/dfn>is an inline HTML-element that defines an abbreviation. Each <code class=\"html-code\">&lt;abbr&gt;<\/code>-element has a <code class=\"html-code\">title<\/code>-attribute that shows when you hover on the element. Since mobile devices do not have a hover-function to be able to show the contents of the <code class=\"html-code\">title<\/code>-attribute, we can make use of CSS function <code class=\"css-code\">attr<\/code> to refer to attribute <code class=\"html-code\">title<\/code> and use its value for the value of the <code class=\"css-code\">content<\/code>-property of pseudo-element <code class=\"css-code\">::after<\/code>:<\/p><tw-pre><code class=\"css-code\">@media (hover: none) {\r\n  abbr[title] {\r\n    text-decoration: none;\r\n  }\r\n  abbr[title]::after {\r\n    content: ' (' attr(title) ')';\r\n  }\r\n}<\/code><\/tw-pre><h3>address<\/h3><p><dfn><code class=\"html-code\">&lt;address&gt;<\/code><\/dfn> is a block-level HTML-element that defines an address. The styling is not that exciting, it's just italic:<\/p><tw-pre><code class=\"css-code\">address {\r\n  font-style: italic;\r\n}\r\naddress:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}<\/code><\/tw-pre><h3>b, strong<\/h3><p><dfn><code class=\"html-code\">&lt;b&gt;<\/code><\/dfn> is an inline HTML-element that defines <b>bold<\/b> text without adding any importance to it. <dfn><code class=\"html-code\">&lt;strong&gt;<\/code><\/dfn> is an inline HTML-element that defines <b>important text<\/b>. Both elements have the same styling, but semantically they have different use cases.<\/p><p>Use element <code class=\"html-code\">&lt;b&gt;<\/code> to draw attention to something:<\/p><p><q>By using the <b>b-element<\/b> you draw attention to a certain element.<\/q><\/p><p>Use element <code class=\"html-code\">&lt;strong&gt;<\/code> to mark something important:<\/p><p><q>Heat the oatmeal in the microwave on 600W for 4 minutes.<br>\r\n<b>Remove the spoon before microwaving the oatmeal.<\/b><\/q><\/p><h3>blockquote<\/h3><p><dfn><code class=\"html-code\">&lt;blockquote&gt;<\/code><\/dfn> is a block-level HTML-element that defines a text that is quoted from another source. You can refer to the source by using attribute <code class=\"html-code\">&lt;cite&gt;<\/code> and the URL as the value.<\/p><blockquote cite=\"https:\/\/www.w3.org\/html\/wiki\/Elements\/blockquote\"><p>The &lt;blockquote&gt; element represents a quoted section.<\/p><\/blockquote><tw-pre><code class=\"css-code\">blockquote {\r\n  display:      block;\r\n  font-style:   italic;\r\n  padding-left: calc(3em + 25px);\r\n  position:     relative;\r\n  quotes:       none;\r\n}\r\nblockquote:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}\r\nblockquote::before {\r\n  content:     '\u201c';\r\n  display:     block;\r\n  font-size:   10em;\r\n  margin-top:  0.32em;\r\n  color:       var(--blockquote-decoration-color);\r\n  font-style:  normal;\r\n  position:    absolute;\r\n  left:        0px;\r\n  top:         0px;\r\n}\r\nblockquote::after {\r\n  content: '';\r\n  content: none;\r\n}<\/code><\/tw-pre><p>Please define CSS variable <code class=\"css-code\">--blockquote-decoration-color<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:                var(--light-blue);\r\n  --hyperlink-color:             var(--dark-blue);\r\n  --field-color:                 var(--black);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");<\/span><ins>\r\n  --blockquote-decoration-color: var(--light-blue);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:                var(--lighter-blue);\r\n  --hyperlink-color:             var(--lighter-blue);\r\n  --field-color:                 var(--white);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--light-gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");<\/span><ins>\r\n  --blockquote-decoration-color: var(--light-blue);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><h3>cite<\/h3><p><dfn><code class=\"html-code\">&lt;cite&gt;<\/code><\/dfn> is an inline HTML-element that defines the title of a work.<\/p><tw-pre><code class=\"css-code\">cite {\r\n  font-style: italic;\r\n}<\/code><\/tw-pre><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/combhommes-desktop-new.png\" width=\"3840\" height=\"2160\" alt=\"Comb Hommes by Terluin Webdesign\" class=\"softer-shadow mar-bottom-xs\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2020\/04\/combhommes-desktop-new-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"374.7734375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"282.3671875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"211.4375\" data-img-of-m=\"fill\"><p><cite>Comb Hommes<\/cite> by Terluin Webdesign.<\/p><h3>code, pre<\/h3><p><dfn><code class=\"html-code\">&lt;code&gt;<\/code><\/dfn> is an inline HTML-element that defines computer code. This element can also be used within a <code class=\"html-code\">&lt;pre&gt;<\/code>-element. <dfn><code class=\"html-code\">&lt;pre&gt;<\/code><\/dfn> is a block-level HTML-element that defines preformatted text. This means that every single line-break and space inside of that element is taken into account. Both elements use a monospace font.<\/p><p>Element <code class=\"html-code\">&lt;code&gt;<\/code> can be placed inside <code class=\"html-code\">&lt;pre&gt;<\/code> to define block-level computer code, as shown in the following CSS code example:<\/p><tw-pre><code class=\"css-code\">code {\r\n  font-size:        0.8em;\r\n  font-family:      monospace;\r\n  padding:          0.125em;\r\n  background-color: var(--code-background-color);\r\n}\r\npre {\r\n  display:    block;\r\n  margin-top: 0px;\r\n}\r\npre:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}\r\npre &gt; code {\r\n  display:     block;\r\n  padding:     1em;\r\n  white-space: pre;\r\n  overflow-x:  auto;\r\n}<\/code><\/tw-pre><p>Please define CSS variable <code class=\"css-code\">--code-background-color<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:                var(--light-blue);\r\n  --hyperlink-color:             var(--dark-blue);\r\n  --field-color:                 var(--black);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color: var(--light-blue);<\/span><ins>\r\n  --code-background-color:       var(--lighter-gray);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:                var(--lighter-blue);\r\n  --hyperlink-color:             var(--lighter-blue);\r\n  --field-color:                 var(--white);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--light-gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color: var(--light-blue);<\/span><ins>\r\n  --code-background-color:       var(--dark-blue);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><h3>dd, dl, dt<\/h3><p>The definitions of the following three terms are displayed using&nbsp;<code class=\"html-code\">&lt;dd&gt;<\/code>, <code class=\"html-code\">&lt;dl&gt;<\/code>, and <code class=\"html-code\">&lt;dt&gt;<\/code>:<\/p><dl><dt>dd<\/dt><dd>Element <code class=\"html-code\">&lt;dd&gt;<\/code> defines a definition description.<\/dd><dt>dl<\/dt><dd>Element <code class=\"html-code\">&lt;dl&gt;<\/code> defines a definition list.<\/dd><dt>dt<\/dt><dd>Element <code class=\"html-code\">&lt;dt&gt;<\/code> defines a definition term.<\/dd><tw-pre><code class=\"css-code\">dd {\r\n  margin-left: 0.75em;\r\n}\r\ndd:not(:last-child) {\r\n  margin-bottom: 6.25px;\r\n}\r\ndl:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}\r\ndt {\r\n  font-weight: bold;\r\n}<\/code><\/tw-pre><h3>del, s, ins<\/h3><p><dfn><code class=\"html-code\">&lt;del&gt;<\/code><\/dfn> is an inline HTML-element that represents text that is deleted. This is often used to strike through the original price. <dfn><code class=\"html-code\">&lt;s&gt;<\/code><\/dfn> is an inline-element that defines text that is no longer correct. <dfn><code class=\"html-code\">&lt;ins&gt;<\/code><\/dfn> is an inline HTML-element that represents text that is inserted into the document, for instance the sale price that follows the original price.<\/p><p><del>\u20ac100<\/del> <ins>\u20ac75<\/ins><\/p><tw-pre><code class=\"css-code\">del, s {\r\n  text-decoration: line-through;\r\n}\r\nins {\r\n  text-decoration: underline;\r\n}<\/code><\/tw-pre><h3>details, summary<\/h3><p><dfn><code class=\"html-code\">&lt;details&gt;<\/code><\/dfn> is a block-level HTML-element that allows the user to open and close additional text or details on click. <dfn><code class=\"html-code\">&lt;summary&gt;<\/code><\/dfn> is a block-level HTML-element that displays text inside of the <code class=\"html-code\">&lt;details&gt;<\/code>-element by default, regardless of whether the <code class=\"html-code\">&lt;details&gt;<\/code>-element is opened or closed.<\/p><details class=\"accordion\" data-open-by-default=\"\">\r\n  \r\n<summary>Show CSS<\/summary><tw-pre class=\"mar-top-xs\"><code class=\"css-code\">details:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}\r\ndetails summary {\r\n  cursor: help;\r\n  background-image: var(--selectbox-caret-url);\r\n  background-size: 0px;\r\n}\r\ndetails summary::marker {\r\n  content: '';\r\n  display: none;\r\n}\r\ndetails:not(.read-more) summary::before {\r\n  content: '';\r\n  display: inline-block;\r\n  width: 1em;\r\n  height: 1em;\r\n  background-image: inherit;\r\n  background-size: auto 0.5em;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  transform: rotate(-90deg);\r\n  margin-bottom: -0.15em;\r\n  margin-right: 6.25px;\r\n}\r\ndetails[open] summary::before {\r\n  transform: rotate(0deg);\r\n}\r\ndetails[open] summary {\r\n  margin-bottom: 6.25px;\r\n}\r\ndetails.read-more &gt; summary {\r\n  font-weight: 600;\r\n}\r\ndetails.read-more &gt; summary::after {\r\n  content: ' ...';\r\n}\r\ndetails.read-more[open] &gt; summary {\r\n  display: none;\r\n}<\/code><\/tw-pre>\r\n<\/details><h3>dfn<\/h3><p><dfn><code class=\"html-code\">&lt;dfn&gt;<\/code><\/dfn> is an inline HTML-element that specifies a term that is going to be defined within the content. The sentence you just read started with a <code class=\"html-code\">&lt;dfn&gt;<\/code>-element that wrapped the word <i>&lt;dfn&gt;<\/i>. It is shown in italic font style.<\/p><tw-pre><code class=\"css-code\">dfn {\r\n  font-style: italic;\r\n}<\/code><\/tw-pre><h3>dialog<\/h3><p><dfn><code class=\"html-code\">&lt;dialog&gt;<\/code><\/dfn> is a block-level HTML-element that defines a dialog box, but it can also be used to create a subwindow.<\/p><tw-pre><code class=\"css-code\">dialog {\r\n  padding:          50px;\r\n  color:            var(--txt-color);\r\n  background-color: var(--bg-color);\r\n  border:           1.5px solid currentColor;\r\n  border-radius:    25px;\r\n}\r\ndialog::backdrop {\r\n  background-color: rgba(0, 0, 0, .5);\r\n}\r\ndialog .row,\r\ndialog .row::before {\r\n  --col-spacing-multiplier: 1;\r\n}\r\ndialog .row .row,\r\ndialog .row .row::before {\r\n  --col-spacing-multiplier: 0.5;\r\n}\r\ndialog .row .row .row,\r\ndialog .row .row .row::before {\r\n  --col-spacing-multiplier: 0.25;\r\n}\r\ndialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n  --border-radius-depth: 2;\r\n}\r\ndialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n  --border-radius-depth: 3;\r\n}\r\ndialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n  --border-radius-depth: 4;\r\n}\r\ndialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n  --border-radius-depth: 5;\r\n}<\/code><\/tw-pre><h3>em, i<\/h3><p><dfn><code class=\"html-code\">&lt;em&gt;<\/code><\/dfn> is an inline HTML-element that is used to emphasize text. <dfn><code class=\"html-code\">&lt;i&gt;<\/code><\/dfn> is an inline HTML-element that defines a part of text in an alternate voice or mood. Both elements are displayed in <i>italic<\/i>.<\/p><p>The <code class=\"html-code\">&lt;em&gt;<\/code>-element can be used to give verbal stress to a word in a sentence like <q>Is it necessary to style <em>all<\/em> HTML-elements that exist? No, not all of them, because some elements are hidden and some elements are not supported in HTML5.<\/q>.<\/p><p>The <code class=\"html-code\">&lt;i&gt;<\/code>-element can be used to markup a (technical) term, a phrase in a different language, the binomial name of a plant (<i>Helianthus annuus<\/i>, for instance), and so on.<\/p><tw-pre><code class=\"css-code\">em, i {\r\n  font-style: italic;\r\n}<\/code><\/tw-pre><h3>fieldset, legend<\/h3><p><dfn><code class=\"html-code\">&lt;fieldset&gt;<\/code><\/dfn> is a block-level HTML-element that groups elements in a form that are related to each other and is shown as a bordered box around the elements.<\/p><tw-pre><code class=\"css-code\">fieldset {\r\n  padding:       12.5px;\r\n  border:        1.5px solid currentColor;\r\n  border-radius: 8.33px;\r\n}\r\nfieldset &gt; legend {\r\n  padding-left:  6.25px;\r\n  padding-right: 6.25px;\r\n}\r\nfieldset &gt; legend + .row {\r\n  margin-top: 0px;\r\n}<\/code><\/tw-pre><p>The form below contains a fieldset and is a functioning form, so if you want to share your feedback on this article, please use the form below.<\/p><\/dl><tw-shortcode-wrapper data-id=\"20\" data-esi=\"0\"><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\nvar gform;gform||(document.addEventListener(\"gform_main_scripts_loaded\",function(){gform.scriptsLoaded=!0}),document.addEventListener(\"gform\/theme\/scripts_loaded\",function(){gform.themeScriptsLoaded=!0}),window.addEventListener(\"DOMContentLoaded\",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,themeScriptsLoaded:!1,isFormEditor:()=>\"function\"==typeof InitializeEditor,callIfLoaded:function(o){return!(!gform.domLoaded||!gform.scriptsLoaded||!gform.themeScriptsLoaded&&!gform.isFormEditor()||(gform.isFormEditor()&&console.warn(\"The use of gform.initializeOnLoaded() is deprecated in the form editor context and will be removed in Gravity Forms 3.1.\"),o(),0))},initializeOnLoaded:function(o){gform.callIfLoaded(o)||(document.addEventListener(\"gform_main_scripts_loaded\",()=>{gform.scriptsLoaded=!0,gform.callIfLoaded(o)}),document.addEventListener(\"gform\/theme\/scripts_loaded\",()=>{gform.themeScriptsLoaded=!0,gform.callIfLoaded(o)}),window.addEventListener(\"DOMContentLoaded\",()=>{gform.domLoaded=!0,gform.callIfLoaded(o)}))},hooks:{action:{},filter:{}},addAction:function(o,r,e,t){gform.addHook(\"action\",o,r,e,t)},addFilter:function(o,r,e,t){gform.addHook(\"filter\",o,r,e,t)},doAction:function(o){gform.doHook(\"action\",o,arguments)},applyFilters:function(o){return gform.doHook(\"filter\",o,arguments)},removeAction:function(o,r){gform.removeHook(\"action\",o,r)},removeFilter:function(o,r,e){gform.removeHook(\"filter\",o,r,e)},addHook:function(o,r,e,t,n){null==gform.hooks[o][r]&&(gform.hooks[o][r]=[]);var d=gform.hooks[o][r];null==n&&(n=r+\"_\"+d.length),gform.hooks[o][r].push({tag:n,callable:e,priority:t=null==t?10:t})},doHook:function(r,o,e){var t;if(e=Array.prototype.slice.call(e,1),null!=gform.hooks[r][o]&&((o=gform.hooks[r][o]).sort(function(o,r){return o.priority-r.priority}),o.forEach(function(o){\"function\"!=typeof(t=o.callable)&&(t=window[t]),\"action\"==r?t.apply(null,e):e[0]=t.apply(null,e)})),\"filter\"==r)return e[0]},removeHook:function(o,r,t,n){var e;null!=gform.hooks[o][r]&&(e=(e=gform.hooks[o][r]).filter(function(o,r,e){return!!(null!=n&&n!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][r]=e)}});\n\/* ]]> *\/\n<\/script>\n\n                <div class='gf_browser_gecko gform_wrapper gravity-theme gform-theme--no-framework' data-form-theme='gravity-theme' data-form-index='0' id='gform_wrapper_2' >\n                        <div class='gform_heading'>\n                            <p class='gform_description'><\/p>\n\t\t\t\t\t\t\t<p class='gform_required_legend'>&quot;<span class=\"gfield_required gfield_required_asterisk\">*<\/span>&quot; indicates required fields<\/p>\n                        <\/div><form method='post' enctype='multipart\/form-data'  id='gform_2'  action='\/en\/wp-json\/wp\/v2\/posts\/8543' data-formid='2' novalidate>\n                        <div class='gform-body gform_body'><div id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below validation_below'><div id=\"field_2_9\" class=\"gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_9'>Phone<\/label><div class='ginput_container'><input name='input_9' id='input_2_9' type='text' value='' autocomplete='new-password'\/><\/div><div class='gfield_description' id='gfield_description_2_9'>This field is for validation purposes and should be left unchanged.<\/div><\/div><div id=\"field_2_1\" class=\"gfield gfield--type-text gfield--input-type-text gfield--width-half anim-fade-in gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_1'>First name<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_2_1' type='text' value='' class='large'     aria-required=\"true\" aria-invalid=\"false\"   \/><\/div><\/div><div id=\"field_2_3\" class=\"gfield gfield--type-text gfield--input-type-text gfield--width-half anim-fade-in gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_3'>Last name<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='ginput_container ginput_container_text'><input name='input_3' id='input_2_3' type='text' value='' class='large'     aria-required=\"true\" aria-invalid=\"false\"   \/><\/div><\/div><div id=\"field_2_4\" class=\"gfield gfield--type-email gfield--input-type-email gfield--width-half anim-fade-in gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_4'>Email address<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='ginput_container ginput_container_email'>\n                            <input name='input_4' id='input_2_4' type='email' value='' class='large'    aria-required=\"true\" aria-invalid=\"false\"  \/>\n                        <\/div><\/div><div id=\"field_2_6\" class=\"gfield gfield--type-text gfield--input-type-text gfield--width-half anim-fade-in field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_6'>Phone number (optional)<\/label><div class='ginput_container ginput_container_text'><input name='input_6' id='input_2_6' type='text' value='' class='large'      aria-invalid=\"false\"   \/><\/div><\/div><div id=\"field_2_7\" class=\"gfield gfield--type-textarea gfield--input-type-textarea gfield--width-full anim-fade-in field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_7'>Your message<\/label><div class='ginput_container ginput_container_textarea'><textarea name='input_7' id='input_2_7' class='textarea large'      aria-invalid=\"false\"   rows='10' cols='50'><\/textarea><\/div><\/div><fieldset id=\"field_2_8\" class=\"gfield gfield--type-consent gfield--type-choice gfield--input-type-consent gfield--width-full anim-fade-in gfield_contains_required field_sublabel_below gfield--no-description field_description_below hidden_label field_validation_below gfield_visibility_visible\"  ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Agreement<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/legend><div class='ginput_container ginput_container_consent'><input name='input_8.1' id='input_2_8_1' type='checkbox' value='1'   aria-required=\"true\" aria-invalid=\"false\"   \/> <label class=\"gform-field-label gform-field-label--type-inline gfield_consent_label\" for='input_2_8_1' >I agree with the <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/privacy-policy\/\" target=\"_blank\">privacy policy<\/a><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/label><input type='hidden' name='input_8.2' value='I agree with the &lt;a href=&quot;https:\/\/www.terluinwebdesign.nl\/en\/privacy-policy\/&quot; target=&quot;_blank&quot;&gt;privacy policy&lt;\/a&gt;' class='gform_hidden' \/><input type='hidden' name='input_8.3' value='1' class='gform_hidden' \/><\/div><\/fieldset><\/div><\/div>\n        <div class='gform-footer gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' onclick='gform.submission.handleButtonClick(this);' data-submission-type='submit' value='Send'  \/> \n            <input type='hidden' class='gform_hidden' name='gform_submission_method' data-js='gform_submission_method_2' value='postback' \/>\n            <input type='hidden' class='gform_hidden' name='gform_theme' data-js='gform_theme_2' id='gform_theme_2' value='gravity-theme' \/>\n            <input type='hidden' class='gform_hidden' name='gform_style_settings' data-js='gform_style_settings_2' id='gform_style_settings_2' value='[]' \/>\n            <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submit' value='2' \/>\n            \n            <input type='hidden' class='gform_hidden' name='gform_currency' data-currency='EUR' value='kj0m4EnvDMqtAaHl7owIlYt\/KXGd19ZdLFAtUUJhpe2JS7bgxmF55m6uDJo3iyTtnYbeRx\/3JQjwWY\/FPs770cOPZzhmK5YN8skfjN8piq2f6vA=' \/>\n            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' \/>\n            <input type='hidden' class='gform_hidden' name='state_2' value='WyJ7XCI4LjFcIjpcIjZjOThmOWRmN2FkNjU1YzMzYjNlZDk1OTA5YmQzZmVhXCIsXCI4LjJcIjpcImU3OGQzOTNjODZhOTMwNTJjZDA3MTY5MjY1ODQ1ZjAwXCIsXCI4LjNcIjpcIjZjOThmOWRmN2FkNjU1YzMzYjNlZDk1OTA5YmQzZmVhXCJ9IiwiMzEzNWQ3YTE2N2YzNWIwZTI3MTRkZjE1NmRlMDRhNDciXQ==' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' \/>\n            <input type='hidden' name='gform_field_values' value='' \/>\n            \n        <\/div>\n                        <\/form>\n                        <\/div><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { \/* delay the scroll by 50 milliseconds to fix a bug in chrome *\/  }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger(\"gform_pre_post_render\", [{ formId: \"2\", currentPage: \"current_page\", abort: function() { this.preventDefault(); } }]);        if (event && event.defaultPrevented) {                return;        }        const gformWrapperDiv = document.getElementById( \"gform_wrapper_2\" );        if ( gformWrapperDiv ) {            const visibilitySpan = document.createElement( \"span\" );            visibilitySpan.id = \"gform_visibility_test_2\";            gformWrapperDiv.insertAdjacentElement( \"afterend\", visibilitySpan );        }        const visibilityTestDiv = document.getElementById( \"gform_visibility_test_2\" );        let postRenderFired = false;        function triggerPostRender() {            if ( postRenderFired ) {                return;            }            postRenderFired = true;            gform.core.triggerPostRenderEvents( 2, current_page );            if ( visibilityTestDiv ) {                visibilityTestDiv.parentNode.removeChild( visibilityTestDiv );            }        }        function debounce( func, wait, immediate ) {            var timeout;            return function() {                var context = this, args = arguments;                var later = function() {                    timeout = null;                    if ( !immediate ) func.apply( context, args );                };                var callNow = immediate && !timeout;                clearTimeout( timeout );                timeout = setTimeout( later, wait );                if ( callNow ) func.apply( context, args );            };        }        const debouncedTriggerPostRender = debounce( function() {            triggerPostRender();        }, 200 );        if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) {            const observer = new MutationObserver( ( mutations ) => {                mutations.forEach( ( mutation ) => {                    if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) {                        debouncedTriggerPostRender();                        observer.disconnect();                    }                });            });            observer.observe( document.body, {                attributes: true,                childList: false,                subtree: true,                attributeFilter: [ 'style', 'class' ],            });        } else {            triggerPostRender();        }    } );} ); \n\/* ]]> *\/\n<\/script>\n<\/tw-shortcode-wrapper><h3>figure, figcaption<\/h3><p><dfn><code class=\"html-code\">&lt;figure&gt;<\/code><\/dfn> is a block-level HTML-element that defines content like images that have a caption, but removing the element itself should not affect the flow of the document. <dfn><code class=\"html-code\">&lt;figcaption&gt;<\/code><\/dfn> is a block-level HTML-element that is used within <code class=\"html-code\">&lt;figure&gt;<\/code>-elements to define a caption.<\/p><figure>\r\n  <img decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/combhommes-desktop-new.png\" alt=\"Pidgeon website\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"375.1015625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"282.6171875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"211.625\" data-img-of-m=\"fill\"><figcaption><i>Figure 1<\/i>. Pidgeon website<\/figcaption><\/figure><p>The CSS below styles <code class=\"html-code\">&lt;figure&gt;<\/code>-elements and <code class=\"html-code\">&lt;figcaption&gt;<\/code>-elements and also automatically numbers the figures using CSS' <code class=\"css-code\">counter<\/code>-function.<\/p><tw-pre><code class=\"css-code\">body {\r\n  counter-reset: figcaption;\r\n}\r\nfigure &gt; figcaption::before {\r\n  content:           \"Figure \" counter(figcaption) \". \";\r\n  counter-increment: figcaption;\r\n  font-style:        italic;\r\n}\r\nfigure:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}\r\nfigure &gt; img ~ figcaption {\r\n  margin-top: -6.25px;\r\n}<\/code><\/tw-pre><h3>hr<\/h3><p><dfn><code class=\"html-code\">&lt;hr&gt;<\/code><\/dfn> is a block-level HTML-element that defines a thematic change in the contents of a document (going off-topic, for instance). It is displayed as a horizontal rule to separate two pieces of content or to define a change in the HTML document.<\/p><tw-pre><code class=\"css-code\">hr {\r\n  margin-top:          25px;\r\n  margin-bottom:       25px;\r\n  border-top-width:    0px;\r\n  border-right-width:  0px;\r\n  border-bottom-width: 1.5px;\r\n  border-left-width:   0px;\r\n  border-style:        solid;\r\n  border-color:        currentColor;\r\n  background:          currentColor;\r\n  opacity:             0.2;\r\n}<\/code><\/tw-pre><div class=\"hr\"><\/div><aside><p>By the way, could you believe I still use <i>Notepad++<\/i>? Please, don't hate me for it!<\/p><\/aside><div class=\"hr\"><\/div><h3>iframe<\/h3><p><dfn><code class=\"html-code\">&lt;iframe&gt;<\/code><\/dfn> is a block-level HTML-element that defines an inline frame. It can contain another document, but without having access to the document itself (for security reasons).<\/p><tw-pre><code class=\"css-code\">iframe {\r\n  display:      block;\r\n  width:        100%;\r\n  aspect-ratio: 16\/9;\r\n  border:       1.5px solid var(--light-gray);\r\n}<\/code><\/tw-pre><h3>kbd<\/h3><p><dfn><code class=\"html-code\">&lt;kbd&gt;<\/code><\/dfn> is an inline HTML-element that represents a key on your keyboard, for instance: <kbd>Enter<\/kbd>, <kbd>Shift<\/kbd>, <kbd>Ctrl<\/kbd>, <kbd>Alt<\/kbd>, and <kbd>F4<\/kbd>. This is how I decided to style these elements:<\/p><tw-pre><code class=\"css-code\">kbd {\r\n  display:          inline-block;\r\n  font-size:        0.8em;\r\n  font-family:      monospace;\r\n  padding:          0.125em 0.375em;\r\n  margin-right:     0.25em;\r\n  background-color: var(--kbd-background-color);\r\n  line-height:      1.25em;\r\n  border-radius:    0.5em;\r\n  box-shadow:       .09375em .09375em currentColor;\r\n}<\/code><\/tw-pre><p>Please define CSS variable <code class=\"css-code\">--kbd-background-color<\/code> in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:                var(--light-blue);\r\n  --hyperlink-color:             var(--dark-blue);\r\n  --field-color:                 var(--black);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color: var(--light-blue);\r\n  --code-background-color:       var(--lighter-gray);<\/span><ins>\r\n  --kbd-background-color:        var(--lighter-gray);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:                var(--lighter-blue);\r\n  --hyperlink-color:             var(--lighter-blue);\r\n  --field-color:                 var(--white);\r\n  --field-background-color:      transparent;\r\n  --field-border-color:          var(--light-gray);\r\n  --checkbox-check-url:          url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:         url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color: var(--light-blue);\r\n  --code-background-color:       var(--dark-blue);<\/span><ins>\r\n  --kbd-background-color:        var(--dark-blue);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                   var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><h3>li, ol, ul, nav<\/h3><p><dfn><code class=\"html-code\">&lt;li&gt;<\/code><\/dfn> is a block-level HTML-element that defines list items. <dfn><code class=\"css-code\">&lt;ol&gt;<\/code><\/dfn> is a block-level HTML-element that defines an ordered list of list items. <dfn><code class=\"css-code\">&lt;ul&gt;<\/code><\/dfn> is a block-level HTML-element that defines an <em>unordered<\/em> list of list items. <dfn><code class=\"html-code\">&lt;nav&gt;<\/code><\/dfn> is a block-level HTML-element that defines a set of navigation links. <code class=\"html-code\">&lt;nav&gt;<\/code>-elements are often found inside of a <code class=\"html-code\">&lt;header&gt;<\/code>-element (the main header, for instance) and often contain <code class=\"html-code\">&lt;ul&gt;<\/code>-elements with <code class=\"html-code\">&lt;li&gt;<\/code>-elements inside of those unordered lists. Instead of targeting the <code class=\"html-code\">&lt;header&gt;<\/code>-tag, I decided to target the element with ID <code class=\"html-code\">&lt;header&gt;<\/code>, which I will discuss later in this article.<\/p><tw-pre><code class=\"css-code\">#header nav ul,\r\n#top-bar nav ul,\r\n#footer nav ul {\r\n  list-style:    none;\r\n  margin-bottom: 0px;\r\n  display:       flex;\r\n  flex-wrap:     wrap;\r\n}\r\n#header nav ul,\r\n#top-bar nav ul {\r\n  align-items:   center;\r\n}\r\n#footer nav ul {\r\n  flex-direction: column;\r\n  margin-left:    0px;\r\n}\r\n#copyright-bar nav ul {\r\n  flex-direction: row;\r\n}\r\n#header nav ul {\r\n  margin-left:  -12.5px;\r\n  margin-right: -12.5px;\r\n}\r\n#top-bar nav ul,\r\n#copyright-bar nav ul {\r\n  margin-left:  -6.25px;\r\n  margin-right: -6.25px;\r\n}\r\n#header nav ul li,\r\n#top-bar nav ul li,\r\n#copyright-bar nav ul li {\r\n  margin: 0px;\r\n}\r\n#header nav ul li &gt; a,\r\n#top-bar nav ul li &gt; a,\r\n#footer nav ul li &gt; a {\r\n  text-decoration: none;\r\n  display:         block;\r\n  color:           var(--txt-color);\r\n}\r\n#header nav ul li &gt; a {\r\n  padding: 6.25px 12.5px;\r\n}\r\n#top-bar nav ul li &gt; a,\r\n#copyright-bar nav ul li &gt; a {\r\n  padding-left:  6.25px;\r\n  padding-right: 6.25px;\r\n}<\/code><\/tw-pre><h3>mark<\/h3><p><dfn><code class=\"html-code\">&lt;mark&gt;<\/code><\/dfn> is an inline HTML-element that marks parts of text. I decided to leave the background color as is, but I added a little bit of padding to make it stand out.<\/p><tw-pre><code class=\"css-code\">mark {\r\n  padding: 3.125px 6.25px;\r\n}<\/code><\/tw-pre><h3>meter, progress<\/h3><p><dfn><code class=\"html-code\">&lt;meter&gt;<\/code><\/dfn> is an inline HTML-element that is used to display a scalar value within a given range (a gauge). While this is not a form element, <code class=\"html-code\">&lt;label&gt;<\/code>-elements are used to label <code class=\"html-code\">&lt;meter&gt;<\/code>-elements the same way as labels refer to their related form element.<\/p><p><label for=\"c_disk_usage\" class=\"MAR-SMALL-RIGHT\">Disk usage C:<\/label><meter id=\"c_disk_usage\" value=\"226\" min=\"0\" max=\"237\">95%<\/meter><\/p><p><dfn><code class=\"html-code\">&lt;progress&gt;<\/code><\/dfn> is an inline HTML-element that is used to display the progress of completing a task. This is also not a form element, but <code class=\"html-code\">&lt;label&gt;<\/code>-elements are also used to label these elements.<\/p><p><label for=\"article_progress\" class=\"MAR-SMALL-RIGHT\">Article progress (55%):<\/label><progress id=\"article_progress\" value=\"55\" max=\"100\">55%<\/progress>\r\n<\/p><h3>samp<\/h3><p><dfn><code class=\"html-code\">&lt;samp&gt;<\/code><\/dfn> is an inline HTML-element that defines that that is the output of a computer program, for instance: <samp>Boot Device Not Found<\/samp>. It is displayed in a monospace font.<\/p><tw-pre><code class=\"css-code\">samp {\r\n  font-family: monospace;\r\n}<\/code><\/tw-pre><h3>small<\/h3><p><dfn><code class=\"html-code\">&lt;small&gt;<\/code><\/dfn> is an inline HTML-element that defines smaller text. This can be used for copyright text and side-comments that companies want you to accidentally not read, for instance:<\/p><p><small><q>Payment plans renew automatically. Change plans or cancel anytime.<\/q><\/small><\/p><tw-pre><code class=\"css-code\">small {\r\n  font-size: 0.8em;\r\n}<\/code><\/tw-pre><h3>sub, sup<\/h3><p><dfn><code class=\"html-code\">&lt;sub&gt;<\/code><\/dfn> is an inline HTML-element that defines subscripted text, for instance the zero in H<sub>2<\/sub>O. <dfn><code class=\"html-code\">&lt;sup&gt;<\/code><\/dfn> is an inline HTML-element that defines superscripted text, for instance the two in x<sup>2<\/sup>.<\/p><tw-pre><code class=\"css-code\">sub {\r\n  font-size: 0.8em;\r\n  vertical-align: sub;\r\n}\r\nsup {\r\n  font-size: 0.8em;\r\n  vertical-align: super;\r\n}<\/code><\/tw-pre><h3>svg<\/h3><p><dfn><code class=\"html-code\">&lt;svg&gt;<\/code><\/dfn> is an HTML-element that serves as a container for SVG graphics:<\/p><p><tw-shortcode-wrapper data-id=\"21\" data-esi=\"0\"><a href=\"https:\/\/www.buymeacoffee.com\/thijsterluin\" rel=\"nofollow\" target=\"_blank\" class=\"inline-block\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/other\/buymeacoffee-button.svg\" alt=\"Buy Me a Coffee\" width=\"260\" height=\"73\" class=\"h-space-m w-auto inline-block vert-al-middle\"><\/a><\/tw-shortcode-wrapper><\/p><tw-pre><code class=\"css-code\">svg {\r\n  display:   block;\r\n  max-width: 100%;\r\n}\r\nsvg:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}<\/code><\/tw-pre><h3>table, tbody, td, tfoot, th, thead, tr<\/h3><p><dfn><code class=\"html-code\">&lt;table&gt;<\/code><\/dfn> is an HTML-element that defines a table, hence the name <i>table<\/i>. <dfn><code class=\"html-code\">&lt;tbody&gt;<\/code><\/dfn> is an HTML-element that defines the <i>body<\/i> of the <code class=\"html-code\">&lt;table&gt;<\/code>-element.<\/p><p><dfn><code class=\"html-code\">&lt;td&gt;<\/code><\/dfn> is an HTML-element that defines a table data cell, for instance <i>114.2<\/i>, to be placed inside a table row.<\/p><p><dfn><code class=\"html-code\">&lt;tfoot&gt;<\/code><\/dfn> is an HTML-element that defines the footer of a <code class=\"html-code\">&lt;table&gt;<\/code>-element. For example, a table footer could contain the sum of the values inside the <code class=\"html-code\">&lt;tbody&gt;<\/code>-element.<\/p><p><dfn><code class=\"html-code\">&lt;th&gt;<\/code><\/dfn> is an HTML-element that behaves the same as the <code class=\"html-code\">&lt;td&gt;<\/code>-element, but is used as a table heading, for instance <i>Process<\/i>, to be placed inside a table row.<\/p><p><dfn><code class=\"html-code\">&lt;thead&gt;<\/code><\/dfn> is an HTML-element that serves as the header of a <code class=\"html-code\">&lt;table&gt;<\/code>-element. This element contains a table row that contains <code class=\"html-code\">&lt;th&gt;<\/code>-elements like <i>Process<\/i> and <i>Time (ms)<\/i>.<\/p><p><dfn><code class=\"html-code\">&lt;tr&gt;<\/code><\/dfn> is an HTML-element that defines a table row. This element can contain both <code class=\"html-code\">&lt;td&gt;<\/code>-elements and <code class=\"html-code\">&lt;th&gt;<\/code>-elements and can be placed in both <code class=\"html-code\">&lt;thead&gt;<\/code>, <code class=\"html-code\">&lt;tbody&gt;<\/code>, and in <code class=\"html-code\">&lt;tfoot&gt;<\/code>-elements.<\/p><table><thead><tr><th>Process<\/th><th>Time (ms)<\/th><\/tr><\/thead><tbody><tr><td>Loading<\/td><td>19<\/td><\/tr><tr><td>Scripting\r\n<\/td><td>92.4<\/td><\/tr><tr><td>Rendering<\/td><td>114.2<\/td><\/tr><tr><td>Painting<\/td><td>14.6<\/td><\/tr><tr><td>System<\/td><td>51.8<\/td><\/tr><\/tbody><tfoot><tr><td>Total (ms)<\/td><td>292<\/td><\/tr><\/tfoot><\/table><tw-pre><code class=\"css-code\">table {\r\n  border-collapse: collapse;\r\n  border-spacing:  0px;\r\n  border:          1.5px solid var(--table-border-color);\r\n  box-sizing:      border-box;\r\n}\r\ntd, th {\r\n  padding:    6.25px 12.5px;\r\n  text-align: left;\r\n}\r\ntd {\r\n  background-color: var(--table-data-cell-background-color);\r\n  color:            var(--table-data-cell-text-color);\r\n}\r\nth {\r\n  background-color: var(--table-header-cell-background-color);\r\n  color:            var(--table-header-cell-text-color);\r\n}\r\nth:not(:first-child),\r\ntd:not(:first-child) {\r\n  border-left: 1.5px solid var(--table-border-color);\r\n}\r\nthead:not(:last-child) &gt; tr &gt; td,\r\nthead:not(:last-child) &gt; tr &gt; th,\r\ntbody:not(:last-child) &gt; tr &gt; td,\r\ntbody:not(:last-child) &gt; tr &gt; th,\r\ntfoot:not(:last-child) &gt; tr &gt; td,\r\ntfoot:not(:last-child) &gt; tr &gt; th,\r\nthead:last-child &gt; tr:not(:last-child) &gt; td,\r\nthead:last-child &gt; tr:not(:last-child) &gt; th,\r\ntbody:last-child &gt; tr:not(:last-child) &gt; td,\r\ntbody:last-child &gt; tr:not(:last-child) &gt; th,\r\ntfoot:last-child &gt; tr:not(:last-child) &gt; td,\r\ntfoot:last-child &gt; tr:not(:last-child) &gt; th {\r\n  border-bottom: 1.5px solid var(--table-border-color);\r\n}\r\ntfoot &gt; tr &gt; :not(th) {\r\n  background-color: var(--table-footer-cell-background-color);\r\n  color:            var(--table-footer-cell-text-color);\r\n}<\/code><\/tw-pre><p>Please define the following CSS variables in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:                       var(--light-blue);\r\n  --hyperlink-color:                    var(--dark-blue);\r\n  --field-color:                        var(--black);\r\n  --field-background-color:             transparent;\r\n  --field-border-color:                 var(--gray);\r\n  --checkbox-check-url:                 url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:                url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color:        var(--light-blue);\r\n  --code-background-color:              var(--lighter-gray);\r\n  --kbd-background-color:               var(--lighter-gray);<\/span><ins>\r\n  --table-border-color:                 var(--lighter-gray);\r\n  --table-header-cell-background-color: var(--lighter-gray);\r\n  --table-header-cell-text-color:       var(--black);\r\n  --table-data-cell-background-color:   transparent;\r\n  --table-data-cell-text-color:         var(--black);\r\n  --table-footer-cell-background-color: var(--off-white);\r\n  --table-footer-cell-text-color:       var(--black);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                          var(--black);\r\n}\r\n.color-scheme-light {\r\n  --accent-color:                       var(--lighter-blue);\r\n  --hyperlink-color:                    var(--lighter-blue);\r\n  --field-color:                        var(--white);\r\n  --field-background-color:             transparent;\r\n  --field-border-color:                 var(--light-gray);\r\n  --checkbox-check-url:                 url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --selectbox-caret-url:                url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");\r\n  --blockquote-decoration-color:        var(--light-blue);\r\n  --code-background-color:              var(--dark-blue);\r\n  --kbd-background-color:               var(--dark-blue);<\/span><ins>\r\n  --table-border-color:                 var(--dark-blue);\r\n  --table-header-cell-background-color: var(--dark-blue);\r\n  --table-header-cell-text-color:       var(--white);\r\n  --table-data-cell-background-color:   transparent;\r\n  --table-data-cell-text-color:         var(--white);\r\n  --table-footer-cell-background-color: var(--darker-blue);\r\n  --table-footer-cell-text-color:       var(--white);<\/ins><span class=\"semi-opaque\">\r\n  --txt-color:                          var(--white-a90);\r\n}<\/span><\/code><\/tw-pre><h3>u<\/h3><p><dfn><code class=\"html-code\">&lt;u&gt;<\/code><\/dfn> is an inline HTML-element that is used to mark up <u>mispeld<\/u> text.<\/p><tw-pre><code class=\"css-code\">u {\r\n  text-decoration-line:  underline;\r\n  text-decoration-style: wavy;\r\n  text-decoration-color: red;\r\n}<\/code><\/tw-pre><h3>var<\/h3><p><dfn><code class=\"html-code\">&lt;var&gt;<\/code><\/dfn> is an inline HTML-element that is used to mark up a variable. The hypotenuse of a triangle where side <var>A<\/var> and side <var>B<\/var> are both 1 centimeter, is <output>1.4142<\/output>. It is displayed in italic.<\/p><tw-pre><code class=\"css-code\">var {\r\n  font-style: italic;\r\n}<\/code><\/tw-pre><h3>video<\/h3><p><dfn><code class=\"html-code\">&lt;video&gt;<\/code><\/dfn> is an HTML-element that is used to display a video. This element needs a <code class=\"html-code\">&lt;source&gt;<\/code>-element with a valid <code class=\"html-code\">src<\/code>-attribute. In order to automatically play a video, you can add the following attributes (with a blank value): <code class=\"html-code\">autoplay<\/code>, <code class=\"html-code\">defaultmuted<\/code>, <code class=\"html-code\">muted<\/code>.<\/p><tw-pre><code class=\"css-code\">video {\r\n  display: block;\r\n  width:   100%;\r\n}\r\nvideo:not(:last-child) {\r\n  margin-bottom: 12.5px;\r\n}<\/code><\/tw-pre><h2>Utility classes for advanced layouts<\/h2><h3>Reversing, direction, alignment, and RTL layouts<\/h3><p>Advanced layouts are layouts that can move columns to the left, to the right, in the center, to the top, to the bottom and vertically centered all while also being able to change the direction of the columns from horizontal to vertical (from <code class=\"css-code\">flex-direction: row<\/code> to <code class=\"css-code\">flex-direction: column<\/code>) and even reverse those directions. I calculated that there are 36 possibilities (2 * 2 * 3 * 3):<\/p><ol><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-left.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-left.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-left.items-bottom<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-center.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-center.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-center.items-bottom<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-right.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-right.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse):not(.vertical).content-right.items-bottom<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-left.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-left.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-left.items-bottom<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-center.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-center.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-center.items-bottom<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-right.items-top<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-right.items-center<\/code><\/li><li><code class=\"css-code\">:not(.reverse).vertical.content-right.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-left.items-top<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-left.items-center<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-left.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-center.items-top<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-center.items-center<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-center.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-right.items-top<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-right.items-center<\/code><\/li><li><code class=\"css-code\">.reverse:not(.vertical).content-right.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-left.items-top<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-left.items-center<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-left.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-center.items-top<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-center.items-center<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-center.items-bottom<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-right.items-top<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-right.items-center<\/code><\/li><li><code class=\"css-code\">.reverse.vertical.content-right.items-bottom<\/code><\/li><\/ol><p>In order to make all of these combinations possible, I wrote the CSS step by step.<\/p><p>I started by defining the row directions and reversing:<\/p><tw-pre><code class=\"css-code\">.row:not(.reverse):not(.vertical) {\r\n  flex-direction:  row;\r\n  justify-content: flex-start;\r\n}\r\n.row.reverse:not(.vertical) {\r\n  flex-direction:  row-reverse;\r\n  justify-content: flex-end;\r\n}\r\n.row:not(.reverse).vertical {\r\n  flex-direction:  column;\r\n  align-items:     flex-start;\r\n}\r\n.row.reverse.vertical {\r\n  flex-direction:  column-reverse;\r\n  align-items:     flex-start;\r\n}<\/code><\/tw-pre><p>So the code above sets the <code class=\"css-code\">flex-direction<\/code>-property and the <code class=\"css-code\">justify-content<\/code>-property and <code class=\"css-code\">align-items<\/code>-property. Property <code class=\"css-code\">justify-content<\/code> determines the horizontal alignment, while property <code class=\"css-code\">align-items<\/code> determines the vertical alignment.<\/p><p>These properties swap roles when <code class=\"css-code\">flex-direction: column<\/code> is applied instead of <code class=\"css-code\">flex-direction: row<\/code>. For rows with <code class=\"css-code\">flex-direction: column<\/code> applied, the property <code class=\"css-code\">justify-content<\/code> determines the <em>vertical<\/em> alignment, while property <code class=\"css-code\">align-items<\/code> determines the <em>horizontal<\/em> alignment.<\/p><p>That's why I used property <code class=\"css-code\">align-items<\/code> in the last two rule sets instead of <code class=\"css-code\">justify-content<\/code>.<\/p><p>Using the value <code class=\"css-code\">flex-start<\/code> indicates the start of the axis, while value <code class=\"css-code\">flex-end<\/code> indicates the end of the axis. When <code class=\"css-code\">flex-direction: row-reverse<\/code> or <code class=\"css-code\">flex-direction: column-reverse<\/code> are applied, the roles of values <code class=\"css-code\">flex-start<\/code> and <code class=\"css-code\">flex-end<\/code> are also swapped.<\/p><p>This means that, for example, for horizontally reversed rows, I have to use value <code class=\"css-code\">flex-end<\/code> for property <code class=\"css-code\">justify-content<\/code> in order to align the columns within the rows to the left. Likewise, for horizontally reversed rows, I have to use value <code class=\"css-code\">flex-start<\/code> for property <code class=\"css-code\">justify-content<\/code> in order to align the columns with the rows to the right. That's why I used value <code class=\"css-code\">flex-end<\/code> to be the default value for property <code class=\"css-code\">justify-content<\/code> for horizontally reversed rows.<\/p><p>This is not the case when using property <code class=\"css-code\">align-items<\/code>, which means that properties <code class=\"css-code\">flex-start<\/code> and <code class=\"css-code\">flex-end<\/code> do not swap roles. I think the reason behind this is for <abbr title=\"Right to Left\">RTL<\/abbr> layouts. RTL layouts go from right to left, but not from bottom to top - they still go from top to bottom.<\/p><p>When translating your website to <i>Arabic<\/i>, not only should the (horizontal) order of the columns be reversed, the horizontal alignment should also be reversed, which is exactly what happens by the browser.<\/p><p>What <em>does<\/em> happen, but I'm not sure whether this is intentional or not, is that when you have a <em>vertical<\/em> row with property <code class=\"css-code\">justify-content<\/code> set to <code class=\"css-code\">flex-start<\/code>, that the columns are aligned at the <em>bottom<\/em> instead of at the top.<\/p><p>This is because values <code class=\"css-code\">flex-start<\/code> and <code class=\"css-code\">flex-end<\/code> for property <code class=\"css-code\">justify-content<\/code> swap <em>regardless<\/em> of the main axis of the row, be it horizontal or vertical.<\/p><p>The way these properties work is mind blowing, so I coded the utility classes in such a way that it works great for <abbr title=\"Left to Right\">LTR<\/abbr> layouts. If you apply <code class=\"css-code\">direction: rtl<\/code> to the body, then the browser will automatically apply the quirks of RTL layouts.<\/p><p>Rule sets for left alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.reverse):not(.vertical).content-left {\r\n  justify-content: flex-start !important;\r\n}\r\n.row.reverse:not(.vertical).content-left {\r\n  justify-content: flex-end !important;\r\n}\r\n.row:not(.reverse).vertical.content-left {\r\n  align-items: flex-start !important;\r\n}\r\n.row.reverse.vertical.content-left {\r\n  align-items: flex-start !important;\r\n}<\/code><\/tw-pre><p>We could argue that I could remove the fourth rule set and remove <code class=\"css-code\">:not(.reverse)<\/code> from the selector of the third rule set, but I would like to keep these separate to avoid confusion as to why the third rule set does not take the existence of class <code class=\"css-code\">reverse<\/code> into account.<\/p><p>Rule sets for center alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.vertical).content-center {\r\n  justify-content: center !important;\r\n}\r\n.row.vertical.content-center {\r\n  align-items: center !important;\r\n}<\/code><\/tw-pre><p>The center alignment has fewer rule sets, because, unlike values <code class=\"css-code\">left<\/code> and <code class=\"css-code\">right<\/code>, the value <code class=\"css-code\">center<\/code> does not have a <i>polar opposite<\/i>. This means that there are no values for value&nbsp;<code class=\"css-code\">center<\/code> to swap with.<\/p><p>Rule sets for right alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.reverse):not(.vertical).content-right {\r\n  justify-content: flex-end !important;\r\n}\r\n.row.reverse:not(.vertical).content-right {\r\n  justify-content: flex-start !important;\r\n}\r\n.row:not(.reverse).vertical.content-right {\r\n  align-items: flex-end !important;\r\n}\r\n.row.reverse.vertical.content-right {\r\n  align-items: flex-end !important;\r\n}<\/code><\/tw-pre><p>Rule sets for top alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.reverse):not(.vertical).items-top {\r\n  align-items: flex-start !important;\r\n}\r\n.row.reverse:not(.vertical).items-top {\r\n  align-items: flex-start !important;\r\n}\r\n.row:not(.reverse).vertical.items-top {\r\n  justify-content: flex-start !important;\r\n}\r\n.row.reverse.vertical.items-top {\r\n  justify-content: flex-end !important;\r\n}<\/code><\/tw-pre><p>Rule sets for vertically centered alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.vertical).items-center {\r\n  align-items: center !important;\r\n}\r\n.row.vertical.items-center {\r\n  justify-content: center !important;\r\n}<\/code><\/tw-pre><p>Like as is the case for horizontally centered alignment, the value <code class=\"css-code\">center<\/code> does not have a polar opposite, which is the reason why vertically centered alignment has fewer rule sets.<\/p><p>Rule sets for bottom alignment:<\/p><tw-pre><code class=\"css-code\">.row:not(.reverse):not(.vertical).items-bottom {\r\n  align-items: flex-end !important;\r\n}\r\n.row.reverse:not(.vertical).items-bottom {\r\n  align-items: flex-end !important;\r\n}\r\n.row:not(.reverse).vertical.items-bottom {\r\n  justify-content: flex-end !important;\r\n}\r\n.row.reverse.vertical.items-bottom {\r\n  justify-content: flex-start !important;\r\n}<\/code><\/tw-pre><p>Now, let's add a class that indicates an RTL layout:<\/p><tw-pre><code class=\"css-code\">.rtl {\r\n  direction: rtl;\r\n}<\/code><\/tw-pre><p>Let's also add a class that indicates a LTR layout, so you can switch between LTR and RTL layouts.<\/p><tw-pre><code class=\"css-code\">.ltr {\r\n  direction: ltr;\r\n}<\/code><\/tw-pre><p>You can add these classes to the body and it will be inherited by underlying elements until a different value is provided, which starts a new waterfall\/cascade as explained in chapter 4.1 <i>Why inheritance is better than directly overriding values<\/i>.<\/p><h3>Column width<\/h3><p>A common method to define column widths in CSS is to simply hardcode all of them as a value from 1 to 12. This is <em>not<\/em> what you are going to do, but this is what I mean:<\/p><tw-pre><code class=\"css-code\">.col-12 {\r\n  width: 100%;\r\n}\r\n.col-11 {\r\n  width: 91.66666667%;\r\n}\r\n.col-10 {\r\n  width: 83.33333333%;\r\n}\r\n.col-9 {\r\n  width: 75%;\r\n}\r\n.col-8 {\r\n  width: 66.66666667%;\r\n}\r\n.col-7 {\r\n  width: 58.33333333%;\r\n}\r\n.col-6 {\r\n  width: 50%;\r\n}\r\n.col-5 {\r\n  width: 41.66666667%;\r\n}\r\n.col-4 {\r\n  width: 33.33333333%;\r\n}\r\n.col-3 {\r\n  width: 25%;\r\n}\r\n.col-2 {\r\n  width: 16.66666667%;\r\n}\r\n.col-1 {\r\n  width: 8.33333333%;\r\n}<\/code><\/tw-pre><p>Instead, I give you the ability to perform a division to set the width of columns by writing a class in the following format: <code class=\"css-code\">w-4\/\/7<\/code>. Why two slashes? Well, you can add <code class=\"css-code\">lt<\/code> between the two slashes to apply that column width only for breakpoint <i>LT - Laptop &amp; Small desktop<\/i>.<\/p><p>For now, I will show you the classes to be used to set a column width for every device, but in chapter 14 <i>Breakpoint-specific utility classes for responsive layouts<\/i>, a lot of classes will be copied to the other containers, including the classes to set column widths.<\/p><p>In contrast to the example above of what we are <em>not<\/em> going to do, the approach of using a dividend and a divisor of maximum 24 to define a column width, will make it possible to set a column width that is way more accurate than 12 hardcoded widths.<\/p><p>You have 576 combinations of which 359 are fractions that result in a value of 1 or below of which 180 values are unique values. This is how I calculated this:<\/p><tw-pre><code class=\"js-code\">aList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];\r\nbList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];\r\nvar possibilitiesString = '';\r\nvar possibilitiesCounter = 0;\r\nvar possibilityFractionList = [];\r\naList.forEach(function(aListItem) {\r\n  bList.forEach(function(bListItem) {\r\n    if (\r\n      aListItem &lt;= bListItem\r\n      &amp;&amp;\r\n      !possibilityFractionList.includes(aListItem \/ bListItem)\r\n    ) {\r\n      possibilitiesString += 'w-' + aListItem + '\/\/' + bListItem + \"rn\";\r\n      possibilitiesCounter++;\r\n      possibilityFractionList.push(aListItem \/ bListItem);\r\n    }\r\n  });\r\n});\r\nconsole.log(possibilitiesString);\r\nconsole.log(possibilitiesCounter);\r\n<\/code><\/tw-pre><p>Finally, let me show you the CSS:<\/p><tw-pre><code class=\"css-code\">[class*='w-1\/\/']{--a:1}\r\n[class*='w-2\/\/']{--a:2}\r\n[class*='w-3\/\/']{--a:3}\r\n[class*='w-4\/\/']{--a:4}\r\n[class*='w-5\/\/']{--a:5}\r\n[class*='w-6\/\/']{--a:6}\r\n[class*='w-7\/\/']{--a:7}\r\n[class*='w-8\/\/']{--a:8}\r\n[class*='w-9\/\/']{--a:9}\r\n[class*='w-10\/\/']{--a:10}\r\n[class*='w-11\/\/']{--a:11}\r\n[class*='w-12\/\/']{--a:12}\r\n[class*='w-13\/\/']{--a:13}\r\n[class*='w-14\/\/']{--a:14}\r\n[class*='w-15\/\/']{--a:15}\r\n[class*='w-16\/\/']{--a:16}\r\n[class*='w-17\/\/']{--a:17}\r\n[class*='w-18\/\/']{--a:18}\r\n[class*='w-19\/\/']{--a:19}\r\n[class*='w-20\/\/']{--a:20}\r\n[class*='w-21\/\/']{--a:21}\r\n[class*='w-22\/\/']{--a:22}\r\n[class*='w-23\/\/']{--a:23}\r\n[class*='w-24\/\/']{--a:24}\r\n[class*='\/\/1']{--b:1}\r\n[class*='\/\/2']{--b:2}\r\n[class*='\/\/3']{--b:3}\r\n[class*='\/\/4']{--b:4}\r\n[class*='\/\/5']{--b:5}\r\n[class*='\/\/6']{--b:6}\r\n[class*='\/\/7']{--b:7}\r\n[class*='\/\/8']{--b:8}\r\n[class*='\/\/9']{--b:9}\r\n[class*='\/\/10']{--b:10}\r\n[class*='\/\/11']{--b:11}\r\n[class*='\/\/12']{--b:12}\r\n[class*='\/\/13']{--b:13}\r\n[class*='\/\/14']{--b:14}\r\n[class*='\/\/15']{--b:15}\r\n[class*='\/\/16']{--b:16}\r\n[class*='\/\/17']{--b:17}\r\n[class*='\/\/18']{--b:18}\r\n[class*='\/\/19']{--b:19}\r\n[class*='\/\/20']{--b:20}\r\n[class*='\/\/21']{--b:21}\r\n[class*='\/\/22']{--b:22}\r\n[class*='\/\/23']{--b:23}\r\n[class*='\/\/24']{--b:24}\r\n.col[class*='\/\/'] {\r\n  flex-grow:  0;\r\n  flex-basis: calc(var(--a) \/ var(--b) * 100% - 25px * 2 * var(--col-spacing-multiplier));\r\n  width:      calc(var(--a) \/ var(--b) * 100% - 25px * 2 * var(--col-spacing-multiplier));\r\n}<\/code><\/tw-pre><p>Not too bad for 180 possible widths.<\/p><p>I also find it handy to set the width of specific columns to be automatic.<\/p><tw-pre><code class=\"css-code\">.col.w-auto {\r\n  flex-basis: auto;\r\n  flex-grow:  0;\r\n}<\/code><\/tw-pre><p>This way you can emulate the behavior of multiple elements that have <code class=\"css-code\">display: inline-block<\/code> applied, while instead being flex items that can take full advantage of the power of flexbox.<\/p><h3>100% width or height<\/h3><p>Being able to set the <code class=\"css-code\">height<\/code>-property to a value of <code class=\"css-code\">100%<\/code> can be useful if, for instance, you want to place a row within a column that holds an image, and center an element within that row which has to fill the full width and height of the column. That's a little bit specific, but I couldn't make up a better example. There must be better examples.<\/p><tw-pre><code class=\"css-code\">.w100 {\r\n  width: 100% !important;\r\n}\r\n.h100 {\r\n  height: 100% !important;\r\n}<\/code><\/tw-pre><p>Please don't use class <code class=\"css-code\">w100<\/code> to set the width of rows or columns. These classes are intended for other elements.<\/p><h3>Z-Index<\/h3><p>When you try to overlap an element that is placed before an element in the DOM tree, you need to set a (higher) value for property <code class=\"css-code\">z-index<\/code> to prevent that other element from overlapping it. In order for property <code class=\"css-code\">z-index<\/code> to work, the element needs to have a value other than <code class=\"css-code\">static<\/code>. The values for elements with class <code class=\"css-code\">absolute<\/code> were set with <code class=\"css-code\">!important<\/code>, so setting the value to <code class=\"css-code\">relative<\/code> without using <code class=\"css-code\">!important<\/code> won't overwrite it.<\/p><p>Since I want to have multiple values for the <code class=\"css-code\">z-index<\/code> property, I kept the class names short:<\/p><tw-pre><code class=\"css-code\">.z-1  {--z:1}  .z-2  {--z:2}  .z-3  {--z:3}\r\n.z-4  {--z:4}  .z-5  {--z:5}  .z-6  {--z:6}\r\n.z-7  {--z:7}  .z-8  {--z:8}  .z-9  {--z:9}\r\n.z-10 {--z:10} .z-11 {--z:11} .z-12 {--z:12}\r\n.z-13 {--z:13} .z-14 {--z:14} .z-15 {--z:15}\r\n.z-16 {--z:16} .z-17 {--z:17} .z-18 {--z:18}\r\n.z-19 {--z:19} .z-20 {--z:20} .z-21 {--z:21}\r\n.z-22 {--z:22} .z-23 {--z:23} .z-24 {--z:24}\r\n.z-25 {--z:25} .z-26 {--z:26} .z-27 {--z:27}\r\n.z-28 {--z:28} .z-29 {--z:29} .z-30 {--z:30}\r\n.z-31 {--z:31} .z-32 {--z:32} .z-33 {--z:33}\r\n.z-34 {--z:34} .z-35 {--z:35} .z-36 {--z:36}\r\n.z-37 {--z:37} .z-38 {--z:38} .z-39 {--z:39}\r\n.z-40 {--z:40} .z-41 {--z:41} .z-42 {--z:42}\r\n.z-43 {--z:43} .z-44 {--z:44} .z-45 {--z:45}\r\n.z-46 {--z:46} .z-47 {--z:47} .z-48 {--z:48}\r\n[class^='z-'], [class*=' z-'] {\r\n  z-index:  var(--z);\r\n  position: relative;\r\n}<\/code><\/tw-pre><p>The code above provides 48 values for property <code class=\"css-code\">z-index<\/code> and sets the <code class=\"css-code\">position<\/code> property to <code class=\"css-code\">relative<\/code> to ensure that property <code class=\"css-code\">z-index<\/code> works (any value but <code class=\"css-code\">static<\/code> for property <code class=\"css-code\">position<\/code> will allow property <code class=\"css-code\">z-index<\/code> to work). Again, this won't override the <code class=\"css-code\">position<\/code>-property for elements that have classes such as <code class=\"css-code\">absolute<\/code>.<\/p><p>You might think to yourself, why not just apply the property <code class=\"css-code\">z-index<\/code> in attribute <code class=\"html-code\">style<\/code>? Well, you <em>could<\/em> do that, but then you also need to set property <code class=\"css-code\">position<\/code> to anything but&nbsp;<code class=\"css-code\">static<\/code>.<\/p><p>It also doesn't look great, in my opinion. It becomes easier to make mistakes. If you decide to use huge numbers as a way of <q>please just work<\/q>, then one day you feel like setting the value to <code class=\"css-code\">999999<\/code> and the other day you feel like setting the value to <code class=\"css-code\">1337<\/code> ... and before you know it, there is an element that overlaps the header when scrolling past it.<\/p><p>I've done something along the lines of that, I admit. In fact, when writing PHP code in WordPress child themes, I still set the <code class=\"PHP-CODE\">priority<\/code>-parameter to <code class=\"PHP-CODE\">9001<\/code> for some <code class=\"PHP-CODE\">add_action<\/code> function calls. Luckily, that is only to ensure it's called after all other actions that have been added, so it is not supposed to be surpassed by any <em>reasonable<\/em> number.<\/p><h3>Hiding elements<\/h3><p>Let's add a class to hide elements and a class to make elements invisible:<\/p><tw-pre><code class=\"css-code\">.hide {\r\n  display: none !important;\r\n}\r\n.invisible {\r\n  visibility: hidden !important;\r\n}<\/code><\/tw-pre><p>The difference between <code class=\"css-code\">display: none<\/code> and <code class=\"css-code\">visibility: hidden<\/code> is that the latter renders the element, meaning the element is physically still there, and allowing user interaction, yet not visible, while the first completely disables the element.<\/p><h3>Preventing user interaction<\/h3><p>You can use <code class=\"css-code\">visibility: hidden<\/code> in conjunction with <code class=\"css-code\">pointer-events: none<\/code> to make sure that a cookie bar is rendered, but yet not visible and interactive until a piece of JavaScript decides to show the cookie notice after checking for a cookie in the browser that indicates that the cookie notice has not been closed yet. The advantage is that the browser has rendered the cookie notice already, allowing for a smoother process of displaying the cookie notice.<\/p><tw-pre><code class=\"css-code\">.no-pointer-events {\r\n  pointer-events: none !important;\r\n}<\/code><\/tw-pre><p>These classes get a lot more useful after we've created breakpoint-exclusive versions for in chapter 14 <i>Breakpoint-specific utility classes for responsive layouts<\/i>, since you might want to hide some elements on smaller devices if those elements aren't necessary.<\/p><h2>Creating an advanced layout<\/h2><p>I think it's safe to say that you have a good amount of utility classes to be able to create an advanced layout. Let's start with a full-width row of which its contents are aligned with the container, it has a lighter gray background color and the two columns that are inside are aligned at the bottom.<\/p><tw-pre><code class=\"html-code\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/tw-pre><p>Let's add a row within the first column that contains two columns that have an automatic width. The first column contains a paragraph that's styled like an <code class=\"html-code\">&lt;h6&gt;<\/code>-element and is uppercase with the following text content: <i>Company Name<\/i>.<\/p><p>The second column also contains a paragraph styled like an <code class=\"html-code\">&lt;h6&gt;<\/code>-element, but it's not uppercase and it has the following text content: <i>Agency in some country<\/i>.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;<\/span><ins>\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>Below the row we just added, let's add an <code class=\"html-code\">&lt;h1&gt;<\/code>-element with the top margin removed with the following text content: <i>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.<\/i>.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/span><ins>\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>Now let's add a row with two columns below that <code class=\"html-code\">&lt;h1&gt;<\/code>-element and give it a white background and center the items vertically. The first column has a width of 1\/7 and the second column has no width specified.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;<\/span><ins>\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        \r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        \r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>Add an image in the first column, I used this image: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg<\/a>.<\/p><p>Add an <code class=\"html-code\">&lt;h2&gt;<\/code>-element with the following text content to the second column: <i>WordPress websites<\/i>. Make sure that the <code class=\"html-code\">&lt;h2&gt;<\/code>-element looks like an <code class=\"html-code\">&lt;h3&gt;<\/code>-element and remove its bottom margin.<\/p><p>Add a row with two columns below the <code class=\"html-code\">&lt;h2&gt;<\/code>-element. Both columns have an automatic width. The first column contains a paragraph with the following text content: <i>from 749,-<\/i>. The second column also contains a paragraph, but it contains a hyperlink with the following text content: <i>View portfolio<\/i>. You can set the <code class=\"html-code\">href<\/code>-attribute to <code class=\"html-code\">#<\/code> for the time being.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        <\/span><ins>&lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg\"&gt;<\/ins><span class=\"semi-opaque\">\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;<\/span><ins>\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>Now, duplicate the row with the white background color and change the image to: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/woocommerce-square.svg\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/woocommerce-square.svg<\/a>.<\/p><p>Change the text content of the <code class=\"html-code\">&lt;h2&gt;<\/code>-element to <i>WooCommerce webshops<\/i> and change the price to <i>1247,-<\/i> instead of <i>749,-<\/i>.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/span><ins>\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/woocommerce-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>Now, let's add an image to the second column in the main row that we've added, I've used this image: <a href=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2022\/08\/2I4A5520.jpg\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2022\/08\/2I4A5520.jpg<\/a>.<\/p><p>Make sure that the image has a negative bottom margin of <code class=\"css-code\">-50px<\/code>, no border radius at the bottom left, no border radius at the bottom right and no border radius on the top right, and make it move itself out of the container on the right side.<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/woocommerce-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    <\/span><ins>&lt;img src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2022\/08\/2I4A5520.jpg\" class=\"mar-bottom-n1 border-rad-bottom-left-0 border-rad-bottom-right-0 border-rad-top-right-0 out-container-right\"&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>The result should look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row.png\" width=\"2855\" height=\"1002\" alt=\"First main row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"233.3984375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"175.8515625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"131.671875\" data-img-of-m=\"fill\"><p>Let's add another row with two columns below this row. In the first column, add an image that has a negative top margin of <code class=\"css-code\">-50px<\/code>, is moved out of the container on the left side, has no border radius on the top right, no border radius on the bottom left, and no border radius on the top left. This is the image I used: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/tw-img\/2022\/08\/website-webshop-and-hosting-with-1-partner-w1691.jpg.webp\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/tw-img\/2022\/08\/website-webshop-and-hosting-with-1-partner-w1691.jpg.webp<\/a>.<\/p><tw-pre><code class=\"html-code\">&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/tw-img\/2022\/08\/website-webshop-and-hosting-with-1-partner-w1691.jpg.webp\" class=\"mar-top-n1 out-container-left border-rad-top-right-0 border-rad-bottom-left-0 border-rad-top-left-0\"&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/tw-pre><p>Add an <code class=\"html-code\">&lt;h2&gt;<\/code>-element to the second column with the following text content: <i>Lorem ipsum dolor sit amet, consectetuer<\/i>.<\/p><p>Add a paragraph to the second column with the following text content: <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae.<\/i>.<\/p><p>Add an <code class=\"html-code\">&lt;h2&gt;<\/code>-element to the second column with the following text content: <i>Lorem ipsum dolor sit amet, consectetuer<\/i>.<\/p><p>Add a paragraph to the second column with the following text content: <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/i>.<\/p><p>Add a row with three columns to the second column. Give the row a top margin of <code class=\"css-code\">25px<\/code>. Give the first column in the row a lighter gray background color, a top padding of <code class=\"css-code\">12.5px<\/code> and a bottom padding of <code class=\"css-code\">12.5px<\/code>.<\/p><p>Inside of that column, add a row with two columns that are vertically centered. Give the first column of that row a width of 3\/13. In that first column, add an image without a border radius. This is the image I used: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-magnifying-glass.svg?c=%23004578\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-magnifying-glass.svg?c=%23004578<\/a><\/p><p>In the second column of that row, add an <code class=\"html-code\">&lt;h3&gt;<\/code>-element that looks like an <code class=\"html-code\">&lt;h6&gt;<\/code>-element with the following, centered, text content: <i>SEO-ready<\/i>. Now, copy the row that has the lighter gray background color and paste it twice to overwrite the other two columns within that row.<\/p><p>Change the image in the first duplicate column to: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-stopwatch.svg?c=%23004578\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-stopwatch.svg?c=%23004578<\/a>. Change the text content of the first duplicate column to: <i>Performance<\/i>.<\/p><p>Change the image in the second duplicate column to: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-devices.svg?c=%23004578\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-devices.svg?c=%23004578<\/a>. Change the text content of the second duplicate column to: <i>Responsive<\/i>.<\/p><p>Remove the right margin of the column that wraps the large image of the servers. Remove the left margin of the column that wraps the <code class=\"html-code\">&lt;h2&gt;<\/code>-elements, the paragraphs and the row and also add a left padding of <code class=\"css-code\">50px<\/code> and force the width to be 1\/2 or 50 percent.<\/p><p>Add a <code class=\"html-code\">&lt;div&gt;<\/code>-element below the large image on the right side of the first main row. Set its <code class=\"css-code\">position<\/code>-property to <code class=\"css-code\">absolute<\/code>, position it on the left side, outside of the column that wraps the image as well, position it on the bottom, give it a padding of <code class=\"css-code\">25px<\/code> on every side, give it a black background color, and a negative bottom margin of <code class=\"css-code\">-50px<\/code>.<\/p><p>Inside of that <code class=\"html-code\">&lt;div&gt;<\/code>-element, add another <code class=\"html-code\">&lt;div&gt;<\/code>-element. This one also has property <code class=\"css-code\">position<\/code> set to <code class=\"css-code\">absolute<\/code>, and is positioned on the left side <em>within<\/em> the parent <code class=\"html-code\">&lt;div&gt;<\/code>-element, positioned on the bottom, it has the same padding as the parent <code class=\"html-code\">&lt;div&gt;<\/code>-element, but it has a lighter gray background color and a border radius of <code class=\"css-code\">25px<\/code> on the bottom right.<\/p><p>Copy the parent <code class=\"html-code\">&lt;div&gt;<\/code>-element and the other <code class=\"html-code\">&lt;div&gt;<\/code>-element inside and paste it below the large image on the left side of the second main row. Change class <code class=\"html-code\">left-out<\/code> to <code class=\"html-code\">right-out<\/code>, <code class=\"html-code\">bottom<\/code> to <code class=\"html-code\">top<\/code>, <code class=\"html-code\">mar-bottom-n1<\/code> to <code class=\"html-code\">mar-top-n1<\/code>, <code class=\"html-code\">bg-lighter-gray<\/code> to <code class=\"html-code\">bg-white<\/code>, and <code class=\"html-code\">border-rad-bottom-right-1<\/code> to <code class=\"html-code\">border-rad-top-left-1<\/code>.<\/p><p>At the end, the HTML of our two main rows should look like this:<\/p><tw-pre><code class=\"html-code\"><span class=\"semi-opaque\">&lt;div class=\"row full-width content-in-container bg-lighter-gray items-bottom\"&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;div class=\"row\"&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6 uppercase\"&gt;Company Name&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col w-auto\"&gt;\r\n        &lt;p class=\"h6\"&gt;Agency in some country&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;h1 class=\"mar-top-0\"&gt;Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.&lt;\/h1&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/04\/wordpress-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WordPress websites&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 749,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"row bg-white items-center\"&gt;\r\n      &lt;div class=\"col w-1\/\/7\"&gt;\r\n        &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/woocommerce-square.svg\"&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col\"&gt;\r\n        &lt;h2 class=\"h3 mar-bottom-0\"&gt;WooCommerce webshops&lt;\/h2&gt;\r\n        &lt;div class=\"row\"&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;from 1247,-&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col w-auto\"&gt;\r\n            &lt;p&gt;&lt;a href=\"#\"&gt;View portfolio&lt;\/a&gt;&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;\r\n    &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2022\/08\/2I4A5520.jpg\" class=\"mar-bottom-n1 border-rad-bottom-left-0 border-rad-bottom-right-0 border-rad-top-right-0 out-container-right\"&gt;<\/span><ins>\r\n    &lt;div class=\"absolute left-out bottom pad-2 bg-black mar-bottom-n1\"&gt;\r\n      &lt;div class=\"absolute left bottom pad-2 bg-lighter-gray border-rad-bottom-right-1\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col mar-right-0\"&gt;\r\n    &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/tw-img\/2022\/08\/website-webshop-and-hosting-with-1-partner-w1691.jpg.webp\" class=\"mar-top-n1 out-container-left border-rad-top-right-0 border-rad-bottom-left-0 border-rad-top-left-0\"&gt;<\/span><ins>\r\n    &lt;div class=\"absolute right-out top pad-2 bg-black mar-top-n1\"&gt;\r\n      &lt;div class=\"absolute left top pad-2 bg-white border-rad-top-left-1\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col mar-left-0 pad-left-1 w-1\/\/2\"&gt;\r\n    <\/span><ins>&lt;h2&gt;Lorem ipsum dolor sit amet, consectetuer&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae.&lt;\/p&gt;\r\n    &lt;h2&gt;Lorem ipsum dolor sit amet, consectetuer&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.&lt;\/p&gt;\r\n    &lt;div class=\"row mar-top-2\"&gt;\r\n      &lt;div class=\"col bg-lighter-gray pad-top-3 pad-bottom-3\"&gt;\r\n        &lt;div class=\"row items-center\"&gt;\r\n          &lt;div class=\"col w-3\/\/13\"&gt;\r\n            &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-magnifying-glass.svg?c=%23004578\" class=\"border-rad-0\"&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col\"&gt;\r\n            &lt;h3 class=\"h6 txt-center\"&gt;SEO-ready&lt;\/h3&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col bg-lighter-gray pad-top-3 pad-bottom-3\"&gt;\r\n        &lt;div class=\"row items-center\"&gt;\r\n          &lt;div class=\"col w-3\/\/13\"&gt;\r\n            &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-stopwatch.svg?c=%23004578\" class=\"border-rad-0\"&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col\"&gt;\r\n            &lt;h3 class=\"h6 txt-center\"&gt;Performance&lt;\/h3&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"col bg-lighter-gray pad-top-3 pad-bottom-3\"&gt;\r\n        &lt;div class=\"row items-center\"&gt;\r\n          &lt;div class=\"col w-3\/\/13\"&gt;\r\n            &lt;img src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/tw-devices.svg?c=%23004578\" class=\"border-rad-0\"&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"col\"&gt;\r\n            &lt;h3 class=\"h6 txt-center\"&gt;Responsive&lt;\/h3&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/ins><span class=\"semi-opaque\">\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/span><\/code><\/tw-pre><p>The result of this HTML should look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-and-second-main-row.png\" width=\"2855\" height=\"1925\" alt=\"First and second main row\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-and-second-main-row-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"449.4609375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"338.640625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"253.5703125\" data-img-of-m=\"fill\"><h2>Breakpoint-specific utility classes for responsive layouts<\/h2><h3>Changing how color scheme variable management works<\/h3><p>The first thing that has to change, is the way the colors are defined per color scheme (dark\/light). I want you to be able to change the background color and text color of elements per device, so you also need to change the color scheme per device.<\/p><p>Since the colors are defined for elements with class <code class=\"html-code\">color-scheme-dark<\/code> or <code class=\"html-code\">color-scheme-light<\/code>, that means that I would have to copy these classes in my CSS to the other breakpoints. That's not what I want, because then you have to change the same color for 5 additional breakpoints.<\/p><p>Instead, copy all variables that are defined in the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and paste them in the rule set with selector <code class=\"css-code\">:root<\/code>. Add <code class=\"css-code\">dark__<\/code> to the start of the variable names. Do the same thing for the variables that are defined in the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code> and prepend its variable names with <code class=\"css-code\">light__<\/code>.<\/p><p>Now go back to the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> and change the values of the variables to a reference of the <code class=\"css-code\">dark__<\/code>-version of the variable. Copy these variables to the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code> and change <code class=\"css-code\">dark__<\/code> to <code class=\"css-code\">light__<\/code> in the variable references.<\/p><p>This is what the rule set with selector <code class=\"css-code\">:root<\/code> should look like:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:root {\r\n  --vw:                                       calc((100vw - var(--scrollbar-width)) \/ 100);\r\n  --container-width:                          1570px;\r\n  --header-height:                            0px;\r\n  --top-bar-height:                           0px;<\/span><ins>\r\n  \r\n  --dark__accent-color:                       var(--light-blue);\r\n  --dark__hyperlink-color:                    var(--light-blue);\r\n  --dark__field-color:                        var(--black);\r\n  --dark__field-background-color:             transparent;\r\n  --dark__field-border-color:                 var(--gray);\r\n  --dark__checkbox-check-url:                 url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23ffffff'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --dark__selectbox-caret-url:                url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23000000'\/%3E%3C\/svg%3E\");\r\n  --dark__option-color:                       var(--black);\r\n  --dark__option-background-color:            var(--white);\r\n  --dark__button-color:                       var(--white);\r\n  --dark__button-background-color:            var(--dark-blue);\r\n  --dark__button-border-color:                var(--dark-blue);\r\n  --dark__blockquote-decoration-color:        var(--light-blue);\r\n  --dark__code-background-color:              var(--lighter-gray);\r\n  --dark__kbd-background-color:               var(--lighter-gray);\r\n  --dark__table-border-color:                 var(--lighter-gray);\r\n  --dark__table-header-cell-background-color: var(--lighter-gray);\r\n  --dark__table-header-cell-text-color:       var(--black);\r\n  --dark__table-data-cell-background-color:   transparent;\r\n  --dark__table-data-cell-text-color:         var(--black);\r\n  --dark__table-footer-cell-background-color: var(--off-white);\r\n  --dark__table-footer-cell-text-color:       var(--black);\r\n  --dark__txt-color:                          var(--black);\r\n  \r\n  --light__accent-color:                       var(--lighter-blue);\r\n  --light__hyperlink-color:                    var(--lighter-blue);\r\n  --light__field-color:                        var(--white);\r\n  --light__field-background-color:             transparent;\r\n  --light__field-border-color:                 var(--light-gray);\r\n  --light__checkbox-check-url:                 url(\"data:image\/svg+xml,%3Csvg width='167' height='218' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg%3E%3Cpath stroke='%23000' id='svg_16' d='m0.000002,112.697894c0,0 73.64307,105.03828 73.64307,105.03828c0,0 42.63547,0 42.63547,0l50.46119,-217.73617c0.31377,0.38759 -43.87208,0.38759 -43.87208,0.38759c0,0 -36.82153,160.07678 -36.82153,160.07678c0,0 -45.73623,-63.95319 -46.05,-64.34078l-39.99612,16.5743z' stroke-opacity='null' stroke-width='0' fill='%23000000'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n  --light__selectbox-caret-url:                url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='141.36422' height='84.93994' viewBox='0 0 141.36422 84.93994'%3E%3Cpolygon points='0 13.542 70.625 84.94 141.364 13.542 127.293 0 70.625 59.946 14.071 0 0 13.542' fill='%23ffffff'\/%3E%3C\/svg%3E\");\r\n  --light__option-color:                       var(--white);\r\n  --light__option-background-color:            var(--black);\r\n  --light__button-color:                       var(--dark-blue);\r\n  --light__button-background-color:            var(--lighter-blue);\r\n  --light__button-border-color:                var(--lighter-blue);\r\n  --light__blockquote-decoration-color:        var(--light-blue);\r\n  --light__code-background-color:              var(--dark-blue);\r\n  --light__kbd-background-color:               var(--dark-blue);\r\n  --light__table-border-color:                 var(--dark-blue);\r\n  --light__table-header-cell-background-color: var(--dark-blue);\r\n  --light__table-header-cell-text-color:       var(--white);\r\n  --light__table-data-cell-background-color:   transparent;\r\n  --light__table-data-cell-text-color:         var(--white);\r\n  --light__table-footer-cell-background-color: var(--darker-blue);\r\n  --light__table-footer-cell-text-color:       var(--white);\r\n  --light__txt-color:                          var(--white-a90);<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>This is what the rule set with selector <code class=\"css-code\">.color-scheme-dark<\/code> should look like:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-dark {\r\n  --accent-color:                       var(--<\/span><ins>dark__accent-color<\/ins><span class=\"semi-opaque\">);\r\n  --hyperlink-color:                    var(--<\/span><ins>dark__hyperlink-color<\/ins><span class=\"semi-opaque\">);\r\n  --field-color:                        var(--<\/span><ins>dark__field-color<\/ins><span class=\"semi-opaque\">);\r\n  --field-background-color:             <\/span><ins>var(--dark__field-background-color)<\/ins><span class=\"semi-opaque\">;\r\n  --field-border-color:                 var(--<\/span><ins>dark__field-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --checkbox-check-url:                 <\/span><ins>var<\/ins><span class=\"semi-opaque\">(<\/span><ins>--dark__checkbox-check-url<\/ins><span class=\"semi-opaque\">);\r\n  --selectbox-caret-url:                <\/span><ins>var<\/ins><span class=\"semi-opaque\">(<\/span><span>--dark__selectbox-caret-url<\/span><span class=\"semi-opaque\">);\r\n  --option-color:                       var(--<\/span><ins>dark__option-color<\/ins><span class=\"semi-opaque\">);\r\n  --option-background-color:            var(--<\/span><ins>dark__option-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-color:                       var(--<\/span><ins>dark__button-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-background-color:            var(--<\/span><ins>dark__button-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-border-color:                var(--<\/span><ins>dark__button-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --blockquote-decoration-color:        var(--<\/span><ins>dark__blockquote-decoration-color<\/ins><span class=\"semi-opaque\">);\r\n  --code-background-color:              var(--<\/span><ins>dark__code-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --kbd-background-color:               var(--<\/span><ins>dark__kbd-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-border-color:                 var(--<\/span><ins>dark__table-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-header-cell-background-color: var(--<\/span><ins>dark__table-header-cell-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-header-cell-text-color:       var(--<\/span><ins>dark__table-header-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-data-cell-background-color:   <\/span><ins>var(--dark__table-data-cell-background-color)<\/ins><span class=\"semi-opaque\">;\r\n  --table-data-cell-text-color:         var(--<\/span><ins>dark__table-data-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-footer-cell-background-color: var(--<\/span><ins>dark__table-footer-cell-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-footer-cell-text-color:       var(--<\/span><ins>dark__table-footer-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --txt-color:                          var(--<\/span><ins>dark__txt-color<\/ins><span class=\"semi-opaque\">);\r\n}<\/span><\/code><\/tw-pre><p>This is what the rule set with selector <code class=\"css-code\">.color-scheme-light<\/code> should look like:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.color-scheme-light {\r\n  --accent-color:                       var(--<\/span><ins>light__accent-color<\/ins><span class=\"semi-opaque\">);\r\n  --hyperlink-color:                    var(--<\/span><ins>light__hyperlink-color<\/ins><span class=\"semi-opaque\">);\r\n  --field-color:                        var(--<\/span><ins>light__field-color<\/ins><span class=\"semi-opaque\">);\r\n  --field-background-color:             <\/span><ins>var(--light__field-background-color)<\/ins><span class=\"semi-opaque\">;\r\n  --field-border-color:                 var(--<\/span><ins>light__field-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --checkbox-check-url:                 <\/span><ins>var<\/ins><span class=\"semi-opaque\">(<\/span><ins>--light__checkbox-check-url<\/ins><span class=\"semi-opaque\">);\r\n  --selectbox-caret-url:                <\/span><ins>var<\/ins><span class=\"semi-opaque\">(<\/span><span>--light__selectbox-caret-url<\/span><span class=\"semi-opaque\">);\r\n  --option-color:                       var(--<\/span><ins>light__option-color<\/ins><span class=\"semi-opaque\">);\r\n  --option-background-color:            var(--<\/span><ins>light__option-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-color:                       var(--<\/span><ins>light__button-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-background-color:            var(--<\/span><ins>light__button-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --button-border-color:                var(--<\/span><ins>light__button-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --blockquote-decoration-color:        var(--<\/span><ins>light__blockquote-decoration-color<\/ins><span class=\"semi-opaque\">);\r\n  --code-background-color:              var(--<\/span><ins>light__code-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --kbd-background-color:               var(--<\/span><ins>light__kbd-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-border-color:                 var(--<\/span><ins>light__table-border-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-header-cell-background-color: var(--<\/span><ins>light__table-header-cell-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-header-cell-text-color:       var(--<\/span><ins>light__table-header-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-data-cell-background-color:   <\/span><ins>var(--light__table-data-cell-background-color)<\/ins><span class=\"semi-opaque\">;\r\n  --table-data-cell-text-color:         var(--<\/span><ins>light__table-data-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-footer-cell-background-color: var(--<\/span><ins>light__table-footer-cell-background-color<\/ins><span class=\"semi-opaque\">);\r\n  --table-footer-cell-text-color:       var(--<\/span><ins>light__table-footer-cell-text-color<\/ins><span class=\"semi-opaque\">);\r\n  --txt-color:                          var(--<\/span><ins>light__txt-color<\/ins><span class=\"semi-opaque\">);\r\n}<\/span><\/code><\/tw-pre><h3>Copying and changing utility classes to other breakpoints<\/h3><p>We start by copying groups of utility classes to the first breakpoint, changing them, and then copying those to the other breakpoints after performing a search\/replace to replace the breakpoint-abbreviation, for instance: replacing <code class=\"css-code\">dt__<\/code> with <code class=\"css-code\">lt__<\/code>.<\/p><h4>Headings<\/h4><p>Copy the group of rule sets of which the first rule set has selector <code class=\"css-code\">h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6<\/code> and the last rule set has selector <code class=\"css-code\">h6, .h6<\/code> and paste it below the rule set with selector <code class=\"css-code\">.container<\/code> in the following, new, media query above media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code>:<\/p><tw-pre><code class=\"css-code\">\/* DT - Desktop *\/\r\n@media (min-width: 1600px) {\r\n  \r\n}<\/code><\/tw-pre><p>In the first rule set, remove the queries that target tag names <code class=\"html-code\">&lt;h1&gt;<\/code> through <code class=\"html-code\">&lt;h6&gt;<\/code> and leave the utility class names as is. The selector of the first rule set should now be <code class=\"css-code\">.h1, .h2, .h3, .h4, .h5, .h6<\/code>. Prepend the utility class names with <code class=\"css-code\">dt__<\/code>, so the selector becomes <code class=\"css-code\">.dt__h1, .dt__h2, .dt__h3, .dt__h4, .dt__h5, .dt__h6<\/code>.<\/p><p>In the second rule set, remove query <code class=\"css-code\">h1:not(:first-child)<\/code> through <code class=\"css-code\">h6:not(:first-child)<\/code>, again leaving only the utility class variants to form the following selector after prepending <code class=\"css-code\">dt__<\/code> to the utility class names: <code class=\"css-code\">.dt__h1:not(:first-child), .dt__h2:not(:first-child), .dt__h3:not(:first-child), .dt__h4:not(:first-child), .dt__h5:not(:first-child), .dt__h6:not(:first-child)<\/code>.<\/p><p>Follow the same process for the selector of the third rule set, so the selector of that rule set becomes: <code class=\"css-code\">.dt__h1:not(:last-child), .dt__h2:not(:last-child), .dt__h3:not(:last-child), .dt__h4:not(:last-child), .dt__h5:not(:last-child), .dt__h6:not(:last-child)<\/code>.<\/p><p>For the remaining 6 rule sets, you can leave the queries that target tag names <code class=\"html-code\">&lt;h1&gt;<\/code> through <code class=\"html-code\">&lt;h6&gt;<\/code> as is, and add a new query to the selectors to target the <code class=\"css-code\">dt__<\/code>-version of utility class name <code class=\"html-code\">h1<\/code>, <code class=\"html-code\">h2<\/code>, <code class=\"html-code\">h3<\/code>, <code class=\"html-code\">h4<\/code>, <code class=\"html-code\">h5<\/code>, or <code class=\"html-code\">h6<\/code>. These will be the new selectors for the 6 rule sets:<\/p><ol><li><code class=\"css-code\">h1, .h1, .dt__h1<\/code><\/li><li><code class=\"css-code\">h2, .h2, .dt__h2<\/code><\/li><li><code class=\"css-code\">h3, .h3, .dt__h3<\/code><\/li><li><code class=\"css-code\">h4, .h4, .dt__h4<\/code><\/li><li><code class=\"css-code\">h5, .h5, .dt__h5<\/code><\/li><li><code class=\"css-code\">h6, .h6, .dt__h6<\/code><\/li><\/ol><p>The reason that the tag name queries can stay for the last 6 rule sets, is that there is a chance that you might want to change the font size for elements <code class=\"html-code\">&lt;h1&gt;<\/code> through <code class=\"html-code\">&lt;h6&gt;<\/code> per breakpoint, but keep properties <code class=\"css-code\">margin-bottom<\/code>, <code class=\"css-code\">margin-top<\/code>, <code class=\"css-code\">font-family<\/code>, <code class=\"css-code\">font-weight<\/code>, and <code class=\"css-code\">line-height<\/code> the same for every breakpoint.<\/p><p>If you want to change those too, be sure to recover the tag name queries and utility classes that are <em>not<\/em> breakpoint-specific, for instance you would have selector <code class=\"css-code\">h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .dt__h1, .dt__h2, .dt__h3, .dt__h4, .dt__h5, .dt__h6<\/code> instead of just <code class=\"css-code\">.dt__h1, .dt__h2, .dt__h3, .dt__h4, .dt__h5, .dt__h6<\/code>; which is way longer, but if you <em>do<\/em> want to change the properties I just listed per breakpoint, then that is the way go to. I decided to only change the font size and leave those other properties as is for every breakpoint.<\/p><h4>Dialogs<\/h4><p>Dialog may not be a utility class, but it <em>does<\/em> refer to utility classes <code class=\"html-code\">box-shadow<\/code>, <code class=\"html-code\">full-width<\/code> and background color utility classes in the rule sets that have the following selectors:<\/p><ol><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><\/ol><p>Utility class <code class=\"html-code\">full-width<\/code> is used in CSS negation function <code class=\"css-code\">:not<\/code>, so this means that this does <em>not<\/em> negate elements that have the breakpoint-specific version of the utility class <code class=\"html-code\">full-width<\/code>. Since these rule sets aren't placed in any breakpoint, there is no way to determine <em>what<\/em> breakpoint-specific to negate.<\/p><p>In order to make these rule sets work, we have to <em>move<\/em> these rule sets into our new media query <code class=\"css-code\">(min-width: 1600px)<\/code>. It should look like this:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">@media (min-width: 1600px) {\r\n  <\/span><ins>dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n    --border-radius-depth: 2;\r\n  }\r\n  dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n    --border-radius-depth: 3;\r\n  }\r\n  dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n    --border-radius-depth: 4;\r\n  }\r\n  dialog:not(#_) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) {\r\n    --border-radius-depth: 5;\r\n  }<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>You have now successfully made sure that the 6 rule sets only apply if the other 5 breakpoints do not apply. Now do the following:<\/p><ol><li>duplicate all occurrences of query <code class=\"css-code\">[class^='bg-']<\/code> and change those duplicates to <code class=\"css-code\">[class^='dt__bg-']<\/code><\/li><li>duplicate all occurrences of query <code class=\"css-code\">[class*=' bg-']<\/code> and change those duplicates to <code class=\"css-code\">[class*=' dt__bg-']<\/code><\/li><li>duplicate all occurrences of query <code class=\"css-code\">.box-shadow<\/code> and change those duplicates to <code class=\"css-code\">.dt__box-shadow<\/code><\/li><li>duplicate all occurrences of negation query <code class=\"css-code\">:not(.full-width)<\/code> and change those duplicates to <code class=\"css-code\">:not(.dt__full-width)<\/code><\/li><li>makes combinations for the borders<\/li><\/ol><p>You will end up with the following selectors:<\/p><ol><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><\/ol><ol><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">dialog:not(#_) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><\/ol><p>Yikes.<\/p><h4>Color schemes<\/h4><p>Copy the rule sets with selector <code class=\"css-code\">.color-scheme-dark<\/code> and <code class=\"css-code\">.color-scheme-light<\/code> to media query <code class=\"css-code\">(min-width: 1600px)<\/code> and prepend <code class=\"css-code\">dt__<\/code> to the utility class names that are targeted to get the selectors <code class=\"css-code\">.dt__color-scheme-dark<\/code> and <code class=\"css-code\">.dt__color-scheme-light<\/code>.<\/p><p>Copy the rule set with selector <code class=\"css-code\">[class^='txt-'], [class*=' txt-'], .color-scheme-dark, .color-scheme-light<\/code> as well, duplicate query <code class=\"css-code\">[class^='txt-']<\/code> and change it to <code class=\"css-code\">[class^='dt__txt-']<\/code>, duplicate query <code class=\"css-code\">[class*=' txt-']<\/code> and change it to <code class=\"css-code\">[class*=' dt__txt-']<\/code> and prepend class names <code class=\"html-code\">color-scheme-dark<\/code> and <code class=\"html-code\">color-scheme-light<\/code> with <code class=\"css-code\">dt__<\/code> to get the following selector: <code class=\"css-code\">[class^='dt__txt-'], [class*=' dt__txt-'], .dt__color-scheme-dark, .dt__color-scheme-light<\/code>.<\/p><h4>Text colors, background colors, and border colors<\/h4><p>Copy rule set with selector <code class=\"css-code\">.txt-black<\/code> through rule set with selector <code class=\"css-code\">.bor-white-hover:hover<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility class names with <code class=\"css-code\">dt__<\/code>.<\/p><p>Do also copy the two rule sets with selector <code class=\"css-code\">[class^='bor-'], [class*=' bor-']<\/code> and selector <code class=\"css-code\">[class^='bg-'], [class*=' bg-']<\/code>, paste them into the media query, and prepend the utility classes with <code class=\"css-code\">dt__<\/code> to end up with the following selectors:<\/p><ol><li><code class=\"css-code\">[class^='dt__bor-'], [class*=' dt__bor-']<\/code><\/li><li><code class=\"css-code\">[class^='dt__bg-'], [class*=' dt__bg-']<\/code><\/li><\/ol><h4>Border radius depth<\/h4><p>Just like what was the case for the border radius depth within dialogs as described in chapter 14.2.2 <i>Dialogs<\/i>, the rule sets that have the following selectors also need to be <em>moved<\/em> to (now existing) media query <code class=\"css-code\">(min-width: 1600px)<\/code>:<\/p><ol><li><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><\/ol><ol><li><code class=\"css-code\">:is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width) :is([class^='bg-'], [class*=' bg-'], img, .border, .border-top.border-left, .border-top.border-right, .border-bottom.border-left, .border-bottom.border-right, .box-shadow):not(.full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width), .border-top.border-left:not(.full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width), .border-top.border-right:not(.full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width), .border-bottom.border-left:not(.full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width), .border-bottom.border-right:not(.full-width)<\/code><\/li><\/ol><p>After that, move the rule set with selector <code class=\"css-code\">.row[class^='bg-']:not(.full-width), .row[class*=' bg-']:not(.full-width), .col[class^='bg-'], .col[class*=' bg-'], .row.box-shadow:not(.full-width), .col.box-shadow<\/code> into media query <code class=\"css-code\">(min-width: 1600px)<\/code> <del>and do the following:<\/del><\/p><ol><li><del>duplicate all occurrences of query <code class=\"css-code\">[class^='bg-']<\/code> and change those duplicates to <code class=\"css-code\">[class^='dt__bg-']<\/code><\/del><\/li><li><del>duplicate all occurrences of query <code class=\"css-code\">[class*=' bg-']<\/code> and change those duplicates to <code class=\"css-code\">[class*=' dt__bg-']<\/code><\/del><\/li><li><del>duplicate all occurrences of query <code class=\"css-code\">.box-shadow<\/code> and change those duplicates to <code class=\"css-code\">.dt__box-shadow<\/code><\/del><\/li><li><del>duplicate all occurrences of negation query <code class=\"css-code\">:not(.full-width)<\/code> and change those duplicates to <code class=\"css-code\">:not(.dt__full-width)<\/code>.<\/del><\/li><\/ol><p><del>You would end up with 10 rule sets with the following selectors<\/del> <ins>Use these new selectors<\/ins>:<\/p><ol><li><code class=\"css-code\">:is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">:is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width) :is([class^='bg-'], [class^='dt__bg-'], [class*=' bg-'], [class*=' dt__bg-'], img, .border, .dt__border, .border-top.border-left, .border-top.dt__border-left, .dt__border-top.border-left, .dt__border-top.dt__border-left, .border-top.border-right, .border-top.dt__border-right, .dt__border-top.border-right, .dt__border-top.dt__border-right, .border-bottom.border-left, .border-bottom.dt__border-left, .dt__border-bottom.border-left, .dt__border-bottom.dt__border-left, .border-bottom.border-right, .border-bottom.dt__border-right, .dt__border-bottom.border-right, .dt__border-bottom.dt__border-right, .box-shadow, .dt__box-shadow):not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width):not(.dt__full-width), .dt__border:not(.full-width):not(.dt__full-width), .border-top.border-left:not(.full-width):not(.dt__full-width), .border-top.dt__border-left:not(.full-width):not(.dt__full-width), .dt__border-top.border-left:not(.full-width):not(.dt__full-width), .dt__border-top.dt__border-left:not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width):not(.dt__full-width), .dt__border:not(.full-width):not(.dt__full-width), .border-top.border-right:not(.full-width):not(.dt__full-width), .border-top.dt__border-right:not(.full-width):not(.dt__full-width), .dt__border-top.border-right:not(.full-width):not(.dt__full-width), .dt__border-top.dt__border-right:not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width):not(.dt__full-width), .dt__border:not(.full-width):not(.dt__full-width), .border-bottom.border-left:not(.full-width):not(.dt__full-width), .border-bottom.dt__border-left:not(.full-width):not(.dt__full-width), .dt__border-bottom.border-left:not(.full-width):not(.dt__full-width), .dt__border-bottom.dt__border-left:not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">.border:not(.full-width):not(.dt__full-width), .dt__border:not(.full-width):not(.dt__full-width), .border-bottom.border-right:not(.full-width):not(.dt__full-width), .border-bottom.dt__border-right:not(.full-width):not(.dt__full-width), .dt__border-bottom.border-right:not(.full-width):not(.dt__full-width), .dt__border-bottom.dt__border-right:not(.full-width):not(.dt__full-width)<\/code><\/li><li><code class=\"css-code\">.row[class^='bg-']:not(.full-width):not(.dt__full-width), .row[class^='dt__bg-']:not(.full-width):not(.dt__full-width), .row[class*=' bg-']:not(.full-width):not(.dt__full-width), .row[class*=' dt__bg-']:not(.full-width):not(.dt__full-width), .col[class^='bg-'], .col[class^='dt__bg-'], .col[class*=' bg-'], .col[class*=' dt__bg-'], .row.box-shadow:not(.full-width):not(.dt__full-width), .row.dt__box-shadow:not(.full-width):not(.dt__full-width), .col.box-shadow, .col.dt__box-shadow<\/code><\/li><\/ol><p>Is your mouse wheel okay?<\/p><h4>Spacing for filled rows or columns<\/h4><p>Copy the rule sets with the following selectors:<\/p><ol><li><code class=\"css-code\">.row[class^='bg-'] + .row, .row[class*=' bg-'] + .row, .row.border + .row, .row.border-bottom + .row, .row.box-shadow + .row<\/code><\/li><li><code class=\"css-code\">:not(.row):not(.col) + .row[class^='bg-'], :not(.row):not(.col) + .row[class*=' bg-'], :not(.row):not(.col) + .row.border, :not(.row):not(.col) + .row.border-top, :not(.row):not(.col) + .row.box-shadow<\/code><\/li><li><code class=\"css-code\">.row[class^='bg-'] + :not(.row):not(.col), .row[class*=' bg-'] + :not(.row):not(.col), .row.border + :not(.row):not(.col), .row.border-bottom + :not(.row):not(.col), .row.box-shadow + :not(.row):not(.col)<\/code><\/li><\/ol><p>Paste the rule sets in media query <code class=\"css-code\">(min-width: 1600px)<\/code> and prepend all utility classes with <code class=\"css-code\">__dt<\/code> to end up with the following selectors:<\/p><ol><li><code class=\"css-code\">.row[class^='dt__bg-'] + .row, .row[class*=' dt__bg-'] + .row, .row.dt__border + .row, .row.dt__border-bottom + .row, .row.dt__box-shadow + .row<\/code><\/li><li><code class=\"css-code\">:not(.row):not(.col) + .row[class^='dt__bg-'], :not(.row):not(.col) + .row[class*=' dt__bg-'], :not(.row):not(.col) + .row.dt__border, :not(.row):not(.col) + .row.dt__border-top, :not(.row):not(.col) + .row.dt__box-shadow<\/code><\/li><li><code class=\"css-code\">.row[class^='dt__bg-'] + :not(.row):not(.col), .row[class*=' dt__bg-'] + :not(.row):not(.col), .row.dt__border + :not(.row):not(.col), .row.dt__border-bottom + :not(.row):not(.col), .row.dt__box-shadow + :not(.row):not(.col)<\/code><\/li><\/ol><h4>Simple text-related utility classes<\/h4><p>Copy the rule sets with the following selectors to media query <code class=\"css-code\">(min-width: 1600px)<\/code>:<\/p><ol><li><code class=\"css-code\">.no-txt-decor<\/code><\/li><li><code class=\"css-code\">.uppercase<\/code><\/li><li><code class=\"css-code\">.lowercase<\/code><\/li><li><code class=\"css-code\">.capitalize<\/code><\/li><li><code class=\"css-code\">.txt-left<\/code><\/li><li><code class=\"css-code\">.txt-center<\/code><\/li><li><code class=\"css-code\">.txt-right<\/code><\/li><\/ol><p>Prepend the utility classes in those selectors with <code class=\"css-code\">dt__<\/code> to end up with the following selectors:<\/p><ol><li><code class=\"css-code\">.dt__no-txt-decor<\/code><\/li><li><code class=\"css-code\">.dt__uppercase<\/code><\/li><li><code class=\"css-code\">.dt__lowercase<\/code><\/li><li><code class=\"css-code\">.dt__capitalize<\/code><\/li><li><code class=\"css-code\">.dt__txt-left<\/code><\/li><li><code class=\"css-code\">.dt__txt-center<\/code><\/li><li><code class=\"css-code\">.dt__txt-right<\/code><\/li><\/ol><h4>Borders, border radiuses, margins, and paddings<\/h4><p>Copy the rule set with selector <code class=\"css-code\">.border:not(.row), .border-top:not(.row)<\/code> through rule set with selector <code class=\"css-code\">.pad-4, .pad-left-4<\/code>, paste those rule sets into media query <code class=\"css-code\">(min-width: 1600px)<\/code> and prepend all utility classes with <code class=\"css-code\">dt__<\/code>. This will take up to a minute or 2, but after we're done with making all utility classes breakpoint-specific for breakpoint <code class=\"css-code\">(min-width: 1600px)<\/code>, you can just copy them into a file, replace <code class=\"css-code\">dt__<\/code> with <code class=\"css-code\">lt__<\/code>, paste it in another breakpoint, etc.<\/p><h4>Full-width rows<\/h4><p>Copy the rule sets with the following selectors:<\/p><ol><li><code class=\"css-code\">.row.full-width<\/code><\/li><li><code class=\"css-code\">.row.full-width.content-in-container<\/code><\/li><li><code class=\"css-code\">main &gt; article &gt; .container &gt; .row.full-width:first-child<\/code><\/li><li><code class=\"css-code\">.row.full-width[class^='bg-'] + .row.full-width[class^='bg-'], .row.full-width[class^='bg-'] + .row.full-width[class*=' bg-'], .row.full-width[class*=' bg-'] + .row.full-width[class^='bg-'], .row.full-width[class*=' bg-'] + .row.full-width[class*=' bg-']<\/code><\/li><\/ol><p><del>Paste these rule sets in media query <code class=\"css-code\">(min-width: 1600px)<\/code>, prepend <code class=\"css-code\">dt__<\/code> to the utility classes, and create all possible combinations.<\/del> <ins>No, instead you should save yourself time by copying and pasting the following CSS into media query <code class=\"css-code\">(min-width: 1600px)<\/code>:<\/ins><\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row.<\/span><ins>tl__<\/ins><span class=\"semi-opaque\">full-width {\r\n  margin-left:   calc(50% - 50 * var(--vw));\r\n  margin-right:  calc(50% - 50 * var(--vw));\r\n}\r\n.row.full-width.<\/span><ins>tl__<\/ins><span class=\"semi-opaque\">content-in-container<\/span><ins>,\r\n.row.tl__full-width.content-in-container,\r\n.row.tl__full-width.tl__content-in-container<\/ins><span class=\"semi-opaque\"> {\r\n  padding-left:  calc(50 * var(--vw) - 50% - 25px * var(--col-spacing-multiplier));\r\n  padding-right: calc(50 * var(--vw) - 50% - 25px * var(--col-spacing-multiplier));\r\n}\r\nmain &gt; article &gt; .container &gt; .row.<\/span><ins>tl__<\/ins><span class=\"semi-opaque\">full-width:first-child {\r\n  margin-top: calc(-50px * var(--has-fill-top));\r\n}\r\n.row.full-width[class^='bg-'] + .row.full-width[class^='bg-'],<\/span><ins>\r\n.row.full-width[class^='bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.full-width[class^='bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.full-width[class^='bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.full-width[class^='bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.full-width[class^='bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.full-width[class^='bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.dt__full-width[class^='dt__bg-'],<\/ins><span class=\"semi-opaque\">\r\n.row.full-width[class^='bg-'] + .row.full-width[class*=' bg-'],<\/span><ins>\r\n.row.full-width[class^='bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.full-width[class^='bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.full-width[class^='bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.full-width[class*=' bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.full-width[class^='dt__bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.full-width[class*=' bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.dt__full-width[class^='bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.full-width[class*=' bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.dt__full-width[class^='dt__bg-'] + .row.dt__full-width[class*=' dt__bg-'],<\/ins><span class=\"semi-opaque\">\r\n.row.full-width[class*=' bg-'] + .row.full-width[class^='bg-'],<\/span><ins>\r\n.row.full-width[class*=' bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.full-width[class*=' bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.full-width[class*=' bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.full-width[class^='bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.full-width[class^='bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.dt__full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.full-width[class^='bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.full-width[class^='dt__bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.dt__full-width[class^='bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.dt__full-width[class^='dt__bg-'],<\/ins><span class=\"semi-opaque\">\r\n.row.full-width[class*=' bg-'] + .row.full-width[class*=' bg-']<\/span><ins>,\r\n.row.full-width[class*=' bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.full-width[class*=' bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.full-width[class*=' bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.full-width[class*=' bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.full-width[class*=' dt__bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.full-width[class*=' bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.dt__full-width[class*=' bg-'] + .row.dt__full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.full-width[class*=' bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.full-width[class*=' dt__bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.dt__full-width[class*=' bg-'],\r\n.row.dt__full-width[class*=' dt__bg-'] + .row.dt__full-width[class*=' dt__bg-']<\/ins><span class=\"semi-opaque\"> {\r\n  margin-top: calc(-25px * var(--col-spacing-multiplier));\r\n}<\/span><\/code><\/tw-pre><p>You thought it couldn't get crazier, right? Well, instead of the above, you could also write this selector: <code class=\"css-code\">.row:is(.full-width, .dt__full-width):is([class^='bg-'], [class*=' bg-'], [class^='dt__bg-'], [class*=' dt__bg-']) + .row:is(.full-width, .dt__full-width):is([class^='bg-'], [class*=' bg-'], [class^='dt__bg-'], [class*=' dt__bg-'])<\/code>.<\/p><p>That selector uses the CSS function <code class=\"css-code\">:is<\/code>, which will work for 91.72% of all users. This percentage is based on browser usage and support by browsers as of August 30th 2022.<\/p><p>You <em>could<\/em> make use of CSS at-rule <code class=\"css-code\">@supports selector(:is(a))<\/code>, but the not so funny thing is that this <code class=\"css-code\">selector<\/code>-function for at-rule <code class=\"css-code\">@supports<\/code> has nearly the same support as CSS function <code class=\"css-code\">:is<\/code>. This makes it pretty much useless to use the at-rule <code class=\"css-code\">@supports<\/code> with the CSS function <code class=\"css-code\">selector<\/code> if you want to have a fallback in the form of the big amount of queries that I've prepared for you.<\/p><p>The moral of the story is, wait for more people to update their browsers. Until then, comment out the rule set that makes use of CSS function <code class=\"css-code\">:is<\/code>, and activate it when you think it has enough support: <a href=\"https:\/\/caniuse.com\/css-matches-pseudo\" target=\"_blank\" rel=\"noopener\">https:\/\/caniuse.com\/css-matches-pseudo<\/a>.<\/p><p>I know I have used the CSS function <code class=\"css-code\">:is<\/code> before in this article, but that was for the <code class=\"css-code\">border-radius<\/code>-property, of which I don't find it serious if it doesn't work. Also, if I were to turn the selectors of all 9 rule sets into combinations instead of using the CSS function <code class=\"css-code\">:is<\/code>, then those rule sets would have <em>massive<\/em> selectors.<\/p><h4>Full-height rows<\/h4><p>Copy the rule set with selector <code class=\"css-code\">.row.full-height<\/code>, paste it into the media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility class with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Positioning<\/h4><p>Copy the rule set with selector <code class=\"css-code\">.absolute<\/code> through rule set with selector <code class=\"css-code\">.left-out<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Moving out of the container on the left or right side<\/h4><p>Copy the rule set with selector <code class=\"css-code\">.out-container-left<\/code> and the rule set with selector <code class=\"css-code\">.out-container-right<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Box shadow<\/h4><p>Copy the rule set with selector <code class=\"css-code\">.box-shadow<\/code>, paste it into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility class with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Reversing, direction, alignment, and RTL layouts<\/h4><p>Move rule set with selector <code class=\"css-code\">.row:not(.reverse):not(.vertical)<\/code> through rule set with selector <code class=\"css-code\">.row.reverse.vertical.items-bottom<\/code> to media query <code class=\"css-code\">(min-width: 1600px)<\/code>, duplicate utility classes and prepend them with <code class=\"css-code\">dt__<\/code>. This is how what the result should look like:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\"> {\r\n  flex-direction:  row;\r\n  justify-content: flex-start;\r\n}\r\n.row.reverse:not(.vertical)<\/span><ins>:not(.dt__vertical),\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical)<\/ins><span class=\"semi-opaque\"> {\r\n  flex-direction:  row-reverse;\r\n  justify-content: flex-end;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">.vertical<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical<\/ins><span class=\"semi-opaque\"> {\r\n  flex-direction:  column;\r\n  align-items:     flex-start;\r\n}\r\n.row.reverse.vertical<\/span><ins>,\r\n.row.reverse.dt__vertical,\r\n.row.dt__reverse.vertical,\r\n.row.dt__reverse.dt__vertical<\/ins><span class=\"semi-opaque\"> {\r\n  flex-direction:  column-reverse;\r\n  align-items:     flex-start;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.content-left<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse):not(.vertical):not(.dt__vertical).dt__content-left<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-start !important;\r\n}\r\n.row.reverse:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.content-left<\/span><ins>,\r\n.row.reverse:not(.vertical):not(.dt__vertical).dt__content-left,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).content-left,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).dt__content-left<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-end !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">.vertical.content-left<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse).vertical.dt__content-left,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.content-left,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.dt__content-left<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-start !important;\r\n}\r\n.row.reverse.vertical.content-left<\/span><ins>,\r\n.row.reverse.vertical.dt__content-left,\r\n.row.reverse.dt__vertical.content-left,\r\n.row.reverse.dt__vertical.dt__content-left,\r\n.row.dt__reverse.vertical.content-left,\r\n.row.dt__reverse.vertical.dt__content-left,\r\n.row.dt__reverse.dt__vertical.content-left,\r\n.row.dt__reverse.dt__vertical.dt__content-left<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-start !important;\r\n}\r\n.row:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.content-center<\/span><ins>,\r\n.row:not(.vertical):not(.dt__vertical).dt__content-center<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: center !important;\r\n}\r\n.row.vertical.content-center<\/span><ins>,\r\n.row.vertical.dt__content-center,\r\n.row.dt__vertical.content-center,\r\n.row.dt__vertical.dt__content-center<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: center !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.content-right<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse):not(.vertical):not(.dt__vertical).dt__content-right<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-end !important;\r\n}\r\n.row.reverse:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.content-right<\/span><ins>,\r\n.row.reverse:not(.vertical):not(.dt__vertical).dt__content-right,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).content-right,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).dt__content-right<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-start !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">.vertical.content-right<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse).vertical.dt__content-right,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.content-right,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.dt__content-right<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-end !important;\r\n}\r\n.row.reverse.vertical.content-right<\/span><ins>,\r\n.row.reverse.vertical.dt__content-right,\r\n.row.reverse.dt__vertical.content-right,\r\n.row.reverse.dt__vertical.dt__content-right,\r\n.row.dt__reverse.vertical.content-right,\r\n.row.dt__reverse.vertical.dt__content-right,\r\n.row.dt__reverse.dt__vertical.content-right,\r\n.row.dt__reverse.dt__vertical.dt__content-right<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-end !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.items-top<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse):not(.vertical):not(.dt__vertical).dt__items-top<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-start !important;\r\n}\r\n.row.reverse:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.items-top<\/span><ins>,\r\n.row.reverse:not(.vertical):not(.dt__vertical).dt__items-top,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).items-top,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).dt__items-top<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-start !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">.vertical.items-top<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse).vertical.dt__items-top,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.items-top,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.dt__items-top<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-start !important;\r\n}\r\n.row.reverse.vertical.items-top<\/span><ins>,\r\n.row.reverse.vertical.dt__items-top,\r\n.row.reverse.dt__vertical.items-top,\r\n.row.reverse.dt__vertical.dt__items-top,\r\n.row.dt__reverse.vertical.items-top,\r\n.row.dt__reverse.vertical.dt__items-top,\r\n.row.dt__reverse.dt__vertical.items-top,\r\n.row.dt__reverse.dt__vertical.dt__items-top<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-end !important;\r\n}\r\n.row:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.items-center<\/span><ins>,\r\n.row:not(.vertical):not(.dt__vertical).dt__items-center<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: center !important;\r\n}\r\n.row.vertical.items-center<\/span><ins>,\r\n.row.vertical.dt__items-center,\r\n.row.dt__vertical.items-center,\r\n.row.dt__vertical.dt__items-center<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: center !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.items-bottom<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse):not(.vertical):not(.dt__vertical).dt__items-bottom<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-end !important;\r\n}\r\n.row.reverse:not(.vertical)<\/span><ins>:not(.dt__vertical)<\/ins><span class=\"semi-opaque\">.items-bottom<\/span><ins>,\r\n.row.reverse:not(.vertical):not(.dt__vertical).dt__items-bottom,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).items-bottom,\r\n.row.dt__reverse:not(.vertical):not(.dt__vertical).dt__items-bottom<\/ins><span class=\"semi-opaque\"> {\r\n  align-items: flex-end !important;\r\n}\r\n.row:not(.reverse)<\/span><ins>:not(.dt__reverse)<\/ins><span class=\"semi-opaque\">.vertical.items-bottom<\/span><ins>,\r\n.row:not(.reverse):not(.dt__reverse).vertical.dt__items-bottom,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.items-bottom,\r\n.row:not(.reverse):not(.dt__reverse).dt__vertical.dt__items-bottom<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-end !important;\r\n}\r\n.row.reverse.vertical.items-bottom<\/span><ins>,\r\n.row.reverse.vertical.dt__items-bottom,\r\n.row.reverse.dt__vertical.items-bottom,\r\n.row.reverse.dt__vertical.dt__items-bottom,\r\n.row.dt__reverse.vertical.items-bottom,\r\n.row.dt__reverse.vertical.dt__items-bottom,\r\n.row.dt__reverse.dt__vertical.items-bottom,\r\n.row.dt__reverse.dt__vertical.dt__items-bottom<\/ins><span class=\"semi-opaque\"> {\r\n  justify-content: flex-start !important;\r\n}<\/span><\/code><\/tw-pre><p>Copy the rule set with selector <code class=\"css-code\">.rtl<\/code> and the rule set with selector <code class=\"css-code\">.ltr<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Column widths<\/h4><p>Copy rule set with selector <code class=\"css-code\">[class*=w-1\/\/]<\/code> through rule set with selector <code class=\"css-code\">.col.w-auto<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, write <code class=\"css-code\">dt<\/code> in between the two occurrences of <code class=\"css-code\">\/<\/code> per selector, and prepend <code class=\"css-code\">dt__<\/code> to utility class <code class=\"html-code\">w-auto<\/code>, to end up with the following:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">[class*='w-1\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:1}\r\n[class*='w-2\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:2}\r\n[class*='w-3\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:3}\r\n[class*='w-4\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:4}\r\n[class*='w-5\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:5}\r\n[class*='w-6\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:6}\r\n[class*='w-7\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:7}\r\n[class*='w-8\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:8}\r\n[class*='w-9\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:9}\r\n[class*='w-10\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:10}\r\n[class*='w-11\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:11}\r\n[class*='w-12\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:12}\r\n[class*='w-13\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:13}\r\n[class*='w-14\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:14}\r\n[class*='w-15\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:15}\r\n[class*='w-16\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:16}\r\n[class*='w-17\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:17}\r\n[class*='w-18\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:18}\r\n[class*='w-19\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:19}\r\n[class*='w-20\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:20}\r\n[class*='w-21\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:21}\r\n[class*='w-22\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:22}\r\n[class*='w-23\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:23}\r\n[class*='w-24\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/']{--a:24}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/1']{--b:1}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/2']{--b:2}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/3']{--b:3}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/4']{--b:4}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/5']{--b:5}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/6']{--b:6}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/7']{--b:7}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/8']{--b:8}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/9']{--b:9}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/10']{--b:10}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/11']{--b:11}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/12']{--b:12}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/13']{--b:13}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/14']{--b:14}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/15']{--b:15}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/16']{--b:16}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/17']{--b:17}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/18']{--b:18}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/19']{--b:19}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/20']{--b:20}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/21']{--b:21}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/22']{--b:22}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/23']{--b:23}\r\n[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/24']{--b:24}\r\n.col[class*='\/<\/span><ins>dt<\/ins><span class=\"semi-opaque\">\/'] {\r\n  flex-grow:  0;\r\n  flex-basis: calc(var(--a) \/ var(--b) * 100% - 25px * 2 * var(--col-spacing-multiplier));\r\n}\r\n.col.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">w-auto {\r\n  flex-basis: auto;\r\n  max-width:  calc(100% - 25px * 2 * var(--col-spacing-multiplier));\r\n  flex-grow:  0;\r\n}<\/span><\/code><\/tw-pre><h4>100% width or height<\/h4><p>Copy rule set with selector <code class=\"css-code\">.w100<\/code> and rule set with selector <code class=\"css-code\">.h100<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Z-Index<\/h4><p>Copy rule set with selector <code class=\"css-code\">.z-1<\/code> through rule set with selector <code class=\"css-code\">[class^='z-'], [class*=' z-']<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>. The result should look like this:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-1  {--z:1}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-2  {--z:2}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-3  {--z:3}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-4  {--z:4}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-5  {--z:5}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-6  {--z:6}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-7  {--z:7}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-8  {--z:8}  .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-9  {--z:9}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-10 {--z:10} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-11 {--z:11} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-12 {--z:12}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-13 {--z:13} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-14 {--z:14} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-15 {--z:15}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-16 {--z:16} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-17 {--z:17} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-18 {--z:18}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-19 {--z:19} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-20 {--z:20} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-21 {--z:21}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-22 {--z:22} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-23 {--z:23} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-24 {--z:24}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-25 {--z:25} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-26 {--z:26} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-27 {--z:27}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-28 {--z:28} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-29 {--z:29} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-30 {--z:30}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-31 {--z:31} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-32 {--z:32} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-33 {--z:33}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-34 {--z:34} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-35 {--z:35} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-36 {--z:36}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-37 {--z:37} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-38 {--z:38} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-39 {--z:39}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-40 {--z:40} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-41 {--z:41} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-42 {--z:42}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-43 {--z:43} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-44 {--z:44} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-45 {--z:45}\r\n.<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-46 {--z:46} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-47 {--z:47} .<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-48 {--z:48}\r\n[class^='<\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-'], [class*=' <\/span><ins>dt__<\/ins><span class=\"semi-opaque\">z-'] {\r\n  z-index:  var(--z);\r\n  position: relative;\r\n}<\/span><\/code><\/tw-pre><h4>Hiding elements<\/h4><p>Copy rule set with selector <code class=\"css-code\">.hide<\/code> and rule set with selector <code class=\"css-code\">.invisible<\/code>, paste them into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility classes with <code class=\"css-code\">dt__<\/code>.<\/p><h4>Preventing user interaction<\/h4><p>Copy rule set with selector <code class=\"css-code\">.no-pointer-events<\/code>, paste it into media query <code class=\"css-code\">(min-width: 1600px)<\/code>, and prepend the utility class with <code class=\"css-code\">dt__<\/code> to get <code class=\"html-code\">dt__no-pointer-events<\/code>.<\/p><h3>Copying, replacing, and pasting the CSS into the other breakpoints<\/h3><p>We have come to a point where we copy, replace <code class=\"css-code\">dt__<\/code> with <code class=\"css-code\">lt__<\/code>, <code class=\"css-code\">tl__<\/code>, <code class=\"css-code\">tp__<\/code>, <code class=\"css-code\">ml__<\/code>, and <code class=\"css-code\">mp__<\/code>, and paste the CSS into the other media queries.<\/p><p>I suggest copying all rule sets within media query <code class=\"css-code\">(min-width: 1600px)<\/code> and pasting them into a separate document, and then do the following:<\/p><ol><li>replace <code class=\"css-code\">dt__<\/code> with <code class=\"css-code\">lt__<\/code> and replace <code class=\"css-code\">\/dt\/<\/code> with <code class=\"css-code\">\/lt\/<\/code> in the separate document, copy the new CSS and paste it into media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code><\/li><li>replace <code class=\"css-code\">lt__<\/code> with <code class=\"css-code\">tl__<\/code> and replace <code class=\"css-code\">\/lt\/<\/code> with <code class=\"css-code\">\/tl\/<\/code> in the separate document, copy the new CSS and paste it into media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code><\/li><li>replace <code class=\"css-code\">tl__<\/code> with <code class=\"css-code\">tp__<\/code> and replace <code class=\"css-code\">\/tl\/<\/code> with <code class=\"css-code\">\/tp\/<\/code> in the separate document, copy the new CSS and paste it into media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code><\/li><li>replace <code class=\"css-code\">tp__<\/code> with <code class=\"css-code\">ml__<\/code> and replace <code class=\"css-code\">\/tp\/<\/code> with <code class=\"css-code\">\/ml\/<\/code> in the separate document, copy the new CSS and paste it into media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code><\/li><li>replace <code class=\"css-code\">ml__<\/code> with <code class=\"css-code\">mp__<\/code> and replace <code class=\"css-code\">\/ml\/<\/code> with <code class=\"css-code\">\/mp\/<\/code> in the separate document, copy the new CSS and paste it into media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code><\/li><\/ol><p>Congratulations, you have just made yourself a design system that offers a lot of flexibility!<\/p><h2>Making your layout responsive<\/h2><h3>Setting up custom devices for testing<\/h3><p>In order to work efficiently, I like to set up custom breakpoints in Google Chrome's DevTools. If you haven't opened DevTools yet, press <kbd>F12<\/kbd>. Click on the symbol with the smartphone and tablet.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/devtools-responsive-mode-icon.png\" class=\"thumbnail\" width=\"40\" height=\"40\" alt=\"Devtools responsive mode icon\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/devtools-responsive-mode-icon-w124.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"82.6875\" data-img-h-d=\"82.6875\" data-img-of-d=\"cover\" data-img-vw-t=\"617\" data-img-w-t=\"124.0703125\" data-img-h-t=\"124.0703125\" data-img-of-t=\"cover\" data-img-vw-m=\"462\" data-img-w-m=\"92.8984375\" data-img-h-m=\"92.8984375\" data-img-of-m=\"cover\"><p>Now click on <i>Dimensions: Responsive<\/i> at the top.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/devtools-device-selector.png\" width=\"301\" height=\"50\" alt=\"Devtools device selector\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/devtools-device-selector-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"110.6875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"83.3984375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"62.453125\" data-img-of-m=\"fill\"><p>A list of devices pops up, click on <i>Edit<\/i> at the end of the list.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/devtools-device-selector-manage-devices.png\" width=\"474\" height=\"146\" alt=\"Devtools device selector manage devices\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/devtools-device-selector-manage-devices-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"205.390625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"154.75\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"115.875\" data-img-of-m=\"fill\"><p>Now, click on button <i>Add custom device\u2026 <\/i><\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/devtools-add-custom-device.png\" width=\"321\" height=\"166\" alt=\"Devtools add custom device\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/devtools-add-custom-device-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"344.765625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"259.7578125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"194.5078125\" data-img-of-m=\"fill\"><p>Add the following custom devices:<\/p><table><thead><tr><th>Device name<\/th><th>Width (px)<\/th><th>Height (px)<\/th><th>Device pixel ratio<\/th><th>Device<\/th><\/tr><\/thead><tbody><tr><td>01 - DT - min - 1600x900<\/td><td>1600<\/td><td>900<\/td><td>1<\/td><td>desktop<\/td><\/tr><tr><td>02 - LT - max - 1599x900<\/td><td>1599<\/td><td>900<\/td><td>1<\/td><td>desktop<\/td><\/tr><tr><td>03 - LT - min - 1200x700<\/td><td>1200<\/td><td>700<\/td><td>1<\/td><td>desktop<\/td><\/tr><tr><td>04 - TL - max - 1199x700<\/td><td>1199<\/td><td>700<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>05 - TL - min - 992x768<\/td><td>992<\/td><td>768<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>06 - TP - max - 991x1024<\/td><td>991<\/td><td>1024<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>07 - TP - min - 768x1024<\/td><td>768<\/td><td>1024<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>08 - ML - max - 767x360<\/td><td>767<\/td><td>360<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>09 - ML - min - 576x280<\/td><td>576<\/td><td>280<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>10 - MP - max - 575x800<\/td><td>575<\/td><td>800<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>11 - MP - mid - 360x640<\/td><td>360<\/td><td>640<\/td><td>1<\/td><td>mobile<\/td><\/tr><tr><td>12 - MP - min - 280x653<\/td><td>280<\/td><td>653<\/td><td>1<\/td><td>mobile<\/td><\/tr><\/tbody><\/table><p>Now, click on the tiny close-button on the top right. You can now choose your custom devices to easily test the responsiveness of your layout. I had to number the custom devices in order for them to appear in the correct order, because it is ordered alphabetically.<\/p><p>Every custom device name includes the abbreviation for the media query, which you will use to prepend utility classes to change the behavior of elements in specific breakpoints.<\/p><p>Every breakpoint has two custom devices, the first being the widest device possible, and the second being the slimmest device possible within the breakpoint.<\/p><h3>Making your layout responsive<\/h3><h4>Breakpoint LT - Laptop &amp; Small desktop<\/h4><p>Let's start with custom device <i>03 - LT - min - 1200x700<\/i>. The first thing that I notice is that the font size of the title is rather large, so let's change the font size for <code class=\"html-code\">&lt;h1&gt;<\/code>-elements to <code class=\"css-code\">32px<\/code> in breakpoint <i>LT - Laptop &amp; Small desktop<\/i>.<\/p><p>What happens when making a heading smaller, is that the size difference between the heading and a heading of a higher level (<code class=\"html-code\">&lt;h2&gt;<\/code> instead of <code class=\"html-code\">&lt;h1&gt;<\/code>, for example) will become smaller.<\/p><p>To fix this, set the font size of <code class=\"html-code\">&lt;h2&gt;<\/code>-elements to <code class=\"css-code\">29px<\/code> and set the font size of <code class=\"html-code\">&lt;h3&gt;<\/code>-elements to <code class=\"css-code\">26px<\/code> in breakpoint <i>LT - Laptop &amp; Small desktop<\/i>.<\/p><p>Set the same new values in the breakpoints below breakpoint <i>LT - Laptop &amp; Small desktop<\/i>, to make sure that you take a step forward into making the font size responsive for those smaller breakpoints.<\/p><p>The font size of the body is also a bit too large for this breakpoint, so let's add the following rule set below the rule set with selector <code class=\"css-code\">.container<\/code> in breakpoint <i>LT - Laptop &amp; Small desktop <\/i>and all breakpoints below:<\/p><tw-pre><code class=\"css-code\">body {\r\n  font-size: 17px;\r\n}<\/code><\/tw-pre><p>Now do the following:<\/p><ol><li>change utility class <code class=\"html-code\">w-1\/\/7<\/code> to <code class=\"html-code\">w-1\/dt\/7<\/code> for the two columns that hold the WordPress logo and the WooCommerce logo and add class <code class=\"html-code\">w-1\/lt\/5<\/code> to those columns<\/li><li>prepend all utility classes of the image with <code class=\"css-code\">dt__<\/code> in the second column of the first main row and add classes <code class=\"html-code\">lt__mar-bottom-0<\/code>, <code class=\"html-code\">tl__mar-bottom-0<\/code>, <code class=\"html-code\">tp__mar-bottom-0<\/code>, <code class=\"html-code\">ml__mar-bottom-0<\/code>, and <code class=\"html-code\">mp__mar-bottom-0<\/code> to the image<\/li><li>add classes <code class=\"html-code\">lt__hide<\/code>, <code class=\"html-code\">tl__hide<\/code>, <code class=\"html-code\">tp__hide<\/code>, <code class=\"html-code\">ml__hide<\/code>, and <code class=\"html-code\">mp__hide<\/code> to the <code class=\"html-code\">&lt;div&gt;<\/code>-element within that same column<\/li><\/ol><p>The first main row should like like this at breakpoint <i>LT - Laptop &amp; Small desktop<\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-breakpoint-lt.png\" width=\"2662\" height=\"1334\" alt=\"First main row breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"334.09375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"251.71875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"188.484375\" data-img-of-m=\"fill\"><p>Let's look at the <em>second<\/em> main row. I noticed that the text content in the right column takes up way more space vertically than the column on the left that contains the image. I decided to do the following:<\/p><ol><li>Add class <code class=\"html-code\">w-1\/lt\/3<\/code> to the first column of the second main row and prepend class <code class=\"html-code\">mar-right-0<\/code> with <code class=\"html-code\">dt__<\/code><\/li><li>Prepend all utility classes of the image with <code class=\"html-code\">dt__<\/code> in the first column of the second main row and add classes <code class=\"html-code\">lt__mar-bottom-0<\/code>, <code class=\"html-code\">tl__mar-bottom-0<\/code>, <code class=\"html-code\">tp__mar-bottom-0<\/code>, <code class=\"html-code\">ml__mar-bottom-0<\/code>, and <code class=\"html-code\">mp__mar-bottom-0<\/code> to the image<\/li><li>Add classes <code class=\"html-code\">lt__hide<\/code>, <code class=\"html-code\">tl__hide<\/code>, <code class=\"html-code\">tp__hide<\/code>, <code class=\"html-code\">ml__hide<\/code>, and <code class=\"html-code\">mp__hide<\/code> to the <code class=\"html-code\">&lt;div&gt;<\/code>-element within that same column<\/li><li>Change class <code class=\"html-code\">w-1\/\/2<\/code> to <code class=\"html-code\">w-1\/dt\/2<\/code>, class <code class=\"html-code\">mar-left-0<\/code> to <code class=\"html-code\">dt__mar-left-0<\/code>, and class <code class=\"html-code\">pad-left-1<\/code> to <code class=\"html-code\">dt__pad-left-1<\/code>, and prepend classes <code class=\"html-code\">mar-left-0<\/code> and <code class=\"html-code\">pad-left-1<\/code> with <code class=\"html-code\">dt__<\/code> for the second column in the second main row<\/li><li>Move the first heading and first paragraph from within the second column in the second main row to the first new column and add class <code class=\"html-code\">w-1\/lt\/1<\/code> and <code class=\"html-code\">pad-bottom-3<\/code> to that column<\/li><li>Move the second heading and second paragraph from that main column to the second new column<\/li><li>Move the row with the columns that are labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive <\/i>to the third column and add class <code class=\"html-code\">w-4\/lt\/11<\/code> to that column<\/li><li>Remove class <code class=\"html-code\">mar-top-2<\/code> from the row that contains the columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i> and add class <code class=\"html-code\">lt__vertical<\/code> to that row<\/li><\/ol><p>Since the row with the columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive <\/i>is now moved within a column of another row, the column spacing multiplier gets halved. In order to prevent this from happening, change the selectors of the following rule sets:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">.row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> {\r\n  --col-spacing-multiplier: 0.5;\r\n}\r\n.row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\">::before {\r\n  --col-spacing-multiplier: 0.5;\r\n}\r\n.row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> {\r\n  --col-spacing-multiplier: 0.25;\r\n}\r\n.row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\"> .row<\/span><ins>:not(.ignore-nesting)<\/ins><span class=\"semi-opaque\">::before {\r\n  --col-spacing-multiplier: 0.25;\r\n}<\/span><\/code><\/tw-pre><p>Now, if you add class <code class=\"html-code\">ignore-nesting<\/code> to a row, then that row won't be targeted by any selector as shown in the CSS code above. This makes the column spacing multiplier less strict, and allows you to create advanced layouts.<\/p><p>So, add class <code class=\"html-code\">ignore-nesting<\/code> to the newly created row that holds the three columns of which the first two columns contain a heading and a paragraph, and the third column contains the row with three columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i>.<\/p><p>The second main row should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-lt.png\" width=\"2662\" height=\"1169\" alt=\"Second main row breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"292.75\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"220.5625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"165.15625\" data-img-of-m=\"fill\"><p>As you can see, there is still a lot of empty space to be filled below the image. In order to fix that, I will do the following:<\/p><ol><li>make the left column stretch for breakpoint LT<\/li><li>set the height of the image to 100%<\/li><li>set the image's <code class=\"css-code\">object-fit<\/code>-property to <code class=\"css-code\">cover<\/code><\/li><\/ol><p>In order to make a single column stretch, you need to add a new utility class called <code class=\"html-code\">self-stretch<\/code>. Let's add classes <code class=\"html-code\">self-start<\/code>, <code class=\"html-code\">self-center<\/code>, and <code class=\"html-code\">self-end<\/code> too. I suggest adding the following CSS below the rule sets with selector <code class=\"css-code\">.ltr<\/code>, <code class=\"css-code\">.dt__ltr<\/code>, <code class=\"css-code\">.lt__ltr<\/code>, <code class=\"css-code\">.tl__ltr<\/code>, <code class=\"css-code\">.tp__ltr<\/code>, <code class=\"css-code\">.ml__ltr<\/code>, and <code class=\"css-code\">.mp__ltr<\/code>. Prepend the utility classes accordingly.<\/p><tw-pre><code class=\"css-code\">.self-stretch {\r\n  align-self: stretch;\r\n}\r\n.self-start {\r\n  align-self: flex-start;\r\n}\r\n.self-center {\r\n  align-self: center;\r\n}\r\n.self-end {\r\n  align-self: flex-end;\r\n}<\/code><\/tw-pre><p>You also need to add utility classes to determine the value for property <code class=\"css-code\">object-fit<\/code>. Add these utility classes below the rule sets with selectors <code class=\"css-code\">.no-pointer-events<\/code> and prepend them.<\/p><tw-pre><code class=\"css-code\">.obj-contain {\r\n  object-fit: contain;\r\n}\r\n.obj-cover {\r\n  object-fit: cover;\r\n}<\/code><\/tw-pre><p>Finally, add utility class <code class=\"html-code\">lt__self-stretch<\/code> to the left column of the second main row, and add class <code class=\"html-code\">lt__h100<\/code> and <code class=\"html-code\">lt__obj-cover<\/code> to the image inside of that column. The second main row should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-final-breakpoint-lt.png\" width=\"2662\" height=\"1178\" alt=\"Second main row final breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-final-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"294.75\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"222.0703125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"166.2890625\" data-img-of-m=\"fill\"><h4>Breakpoint TL - Tablet (landscape)<\/h4><p>Click on custom device <i>05 - TL - min - 992x500<\/i>.<\/p><p>As you can see, the WordPress and WooCommerce logos are huge and the image in the right column is small. I suggest doing the following:<\/p><ol><li>Make the first main row go vertical by adding class <code class=\"html-code\">tl__vertical<\/code>.<\/li><li>Add a new row with two columns to the first column and add class <code class=\"html-code\">lt__vertical<\/code> and <code class=\"html-code\">dt__vertical<\/code><\/li><li>Move the first row that holds <i>COMPANY NAME<\/i> and <i>Agency in some country<\/i> and the <code class=\"html-code\">&lt;h1&gt;<\/code>-element below into the first column of the new row.<\/li><li>Move the row that holds the WordPress logo and label <i>WordPress websites<\/i> and the row that holds the WooCommerce logo and label <i>WooCommerce websites<\/i> into the second column of the new row.<\/li><li>Since we nested the three existing rows into a new row, let's tell our CSS design system to not take that row into account when it comes to nesting - by adding class <code class=\"html-code\">ignore-nesting<\/code> to the new row.<\/li><li>The size of the WordPress logo and WooCommerce logo are now still too big, so let's add class <code class=\"html-code\">w-1\/tl\/5<\/code> to the columns that wrap these logos.<\/li><li><p>Now it looks better, but the font size is too large, especially considering the title <i>WooCommerce webshops<\/i> now wraps to a new line. Let's make the font size a bit smaller again.<\/p><p>In order to properly adapt the font size of the smaller headings when changing the size of a larger heading, I placed elements <code class=\"html-code\">&lt;h1&gt;<\/code> through <code class=\"html-code\">&lt;h6&gt;<\/code> and a paragraph below the main row to compare the font sizes. Change the following font sizes:<\/p><ol><li>Font size for <code class=\"html-code\">&lt;h1&gt;<\/code>-elements should be <code class=\"css-code\">27px<\/code> instead of <code class=\"css-code\">32px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h2&gt;<\/code>-elements should be <code class=\"css-code\">25px<\/code> instead of <code class=\"css-code\">29px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h3&gt;<\/code>-elements should be <code class=\"css-code\">22px<\/code> instead of <code class=\"css-code\">26px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h4&gt;<\/code>-elements should be <code class=\"css-code\">20px<\/code> instead of <code class=\"css-code\">24px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h5&gt;<\/code>-elements should be <code class=\"css-code\">18px<\/code> instead of <code class=\"css-code\">21px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h6&gt;<\/code>-elements should be <code class=\"css-code\">16px<\/code> instead of <code class=\"css-code\">19px<\/code><\/li><li>Font size for the body should be <code class=\"css-code\">16px<\/code> instead of <code class=\"css-code\">17px<\/code><\/li><\/ol><video class=\"w50 h-auto softer-shadow\" width=\"1212\" height=\"1080\" autoplay=\"\" loop=\"\" defaultmuted=\"\" muted=\"\"><source src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/visualization-of-changing-font-sizes-for-breakpoint-tl.mp4\" type=\"video\/mp4\"><\/video><p>Don't forget to change these font sizes for the breakpoints below breakpoint <i>TL - Tablet (landscape)<\/i> as well.<\/p><\/li><\/ol><p>The image in the second column of the first main row is too large. I tried to reverse the first main row and make the image smaller, but then I ended up with blank space on the right.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-breakpoint-tl.png\" width=\"2232\" height=\"1343\" alt=\"First main row breakpoint tl\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-breakpoint-tl-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"400.78125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"301.9609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"226.109375\" data-img-of-m=\"fill\"><p>Instead of doing that, I decided to hide the image by adding class <code class=\"html-code\">tl__hide<\/code> on the column that wraps it. Then I copied the URL of the image, added a new <code class=\"html-code\">&lt;img&gt;<\/code>-element above the image of the server in the second main row, in the same column, and I hid it on breakpoints <i>DT<\/i>, <i>LT<\/i>, <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i> by adding classes <code class=\"html-code\">dt__hide<\/code>, <code class=\"html-code\">lt__hide<\/code>, <code class=\"html-code\">tp__hide<\/code>, <code class=\"html-code\">ml__hide<\/code>, and <code class=\"html-code\">mp__hide<\/code>. I also added a bottom margin of <code class=\"css-code\">50px<\/code> to the image by adding class <code class=\"html-code\">mar-bottom-1<\/code>.<\/p><p>After that, I vertically centered the columns in the first main row by adding class <code class=\"html-code\">tl__items-center<\/code> to the row that holds the two columns of which the first one contains a row and an <code class=\"html-code\">&lt;h1&gt;<\/code>-element, and the second column contains two rows that are labeled <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i>.<\/p><p>This is what the first main row should look like now:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-final-breakpoint-tl.png\" width=\"2232\" height=\"760\" alt=\"First main row final breakpoint tl\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-final-breakpoint-tl-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"226.734375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"170.828125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"127.9140625\" data-img-of-m=\"fill\"><p>Let's finish the second main row for this breakpoint. You can see that the text in the columns are squished next to each other, so let's make the row that contains those two columns (and a third column that contains a row with columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i>) vertical by adding class <code class=\"html-code\">tl__vertical<\/code>.<\/p><p>After you've done that, you will see that the columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i> are also squished together. To fix that, let's make the left column of the second main row smaller by adding class <code class=\"html-code\">w-4\/tl\/13<\/code>.<\/p><p>After you've done that, you will see that there is still a portion of empty space left over below the two images in the left column of the second main row. You can fix this by following these steps:<\/p><ol><li>Add a new row with two columns<\/li><li>Place those images into those columns<\/li><li>Add class <code class=\"html-code\">vertical<\/code> and <code class=\"html-code\">ignore-nesting<\/code> to the newly added row<\/li><li>Remove class <code class=\"html-code\">mar-bottom-1<\/code> from the first image<\/li><li>Add classes <code class=\"html-code\">dt__hide<\/code>, <code class=\"html-code\">lt__hide<\/code>, <code class=\"html-code\">tp__hide<\/code>, <code class=\"html-code\">ml__hide<\/code>, and <code class=\"html-code\">mp__hide<\/code> to the first column of the newly added row<\/li><li>Remove those same classes from the image that is within that column<\/li><li>Add class <code class=\"html-code\">tl__self-stretch<\/code> to the first column of the second main row<\/li><li>Add class <code class=\"html-code\">tl__h100<\/code> to the newly added row<\/li><li>Add class <code class=\"html-code\">tl__w-auto<\/code> to the first column of the newly added row. Even though class <code class=\"html-code\">w-auto<\/code> sounds like it's meant for the width, it applies <code class=\"css-code\">flex-basis: auto<\/code>, which works for vertical layouts as well.<\/li><li>Add class <code class=\"html-code\">tl__h100<\/code> and <code class=\"html-code\">tl__obj-cover<\/code> to the second image (the image of the server), so the height stretches and it covers the area. The reason why there is no need to manually stretch the column that wraps the image, is because <code class=\"css-code\">flex-grow: 1<\/code> applies, which works for vertical layouts as well, to make it fill the available space.\r\n<\/li><li>Add class <code class=\"html-code\">tl__mar-bottom-0<\/code> to the column that holds the second image, to remove the empty space of <code class=\"css-code\">25px<\/code> that is created by the column's bottom margin.<\/li><li>Remove class <code class=\"html-code\">tl__vertical<\/code> from the first main row, because the second column is hidden on that breakpoint, so there is no need to reverse the order of anything.<\/li><\/ol><p>The second main row should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-tl.png\" width=\"2232\" height=\"1148\" alt=\"Second main row breakpoint tl\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-tl-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"342.765625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"258.25\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"193.375\" data-img-of-m=\"fill\"><p>By putting the two images in a row, we messed up the vertical stretching of the server image as seen at breakpoint <i>LT - Laptop &amp; Small desktop<\/i>.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-lt.png\" width=\"2662\" height=\"1169\" alt=\"Second main row breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"292.75\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"220.5625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"165.15625\" data-img-of-m=\"fill\"><p>To fix this, add class <code class=\"html-code\">lt__h100<\/code> to the newly added row and also add class <code class=\"html-code\">lt__mar-bottom-0<\/code> to undo the bottom margin of the column that holds the image of the server (just like you did at breakpoint <i>TL - Tablet (landscape)<\/i>).<\/p><p>Now it should look like this again at breakpoint <i>LT - Laptop &amp; Small desktop<\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-final-breakpoint-lt.png\" width=\"2662\" height=\"1178\" alt=\"Second main row final breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-final-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"294.75\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"222.0703125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"166.2890625\" data-img-of-m=\"fill\"><h4>Breakpoint TP - Tablet (portrait) &amp; Tall mobile (landscape)<\/h4><p>Click on custom device <i>07 - TP - min - 768x1024<\/i>. The first thing you'll notice about the first main row is a big WordPress logo, a big WooCommerce logo, and a big amount of empty space above the image in the right column.<\/p><p>Let's start by making the row go vertical by adding the class <code class=\"html-code\">tp__vertical<\/code>. The image is now located below, but the logos are still too large. Let's place the rows that contain the logos and labels <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i> below the column with the <code class=\"html-code\">&lt;h1&gt;<\/code>-element by adding class <code class=\"css-code\">tp__vertical<\/code> to the row in the first column of the first main row.<\/p><p>Congratulations, the logos are now <em>way<\/em> bigger. Let's fix that by adding class <code class=\"html-code\">w-1\/tp\/7<\/code> to the column that holds the WordPress logo and to the column that holds the WooCommerce logo.<\/p><p>The first main row should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-breakpoint-tp.png\" width=\"1152\" height=\"1389\" alt=\"First main row breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"803.5625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"605.4296875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"453.3515625\" data-img-of-m=\"fill\"><p>The problem you would see when looking at the second main row, is that if you make the image of the server just as wide as the image in the second column of the first main row, that there will be two images that take up a lot of vertical space.<\/p><p>Instead of letting that happen, we hide the image in the second column of the first main row, and show it next to the image of the server in the second main row, just like we did at breakpoint <i>TL - Tablet (landscape)<\/i>. To do this, follow these steps:<\/p><ol><li>Hide the second column in the first main row, since that one holds the large image that we are going to show next to the image of the servers in the second main row.<\/li><li>Remove class <code class=\"html-code\">tp__vertical<\/code> from the first main row, because it is no longer necessary to indicate that it's vertical, since it only has 1 visible column; you just hid the second column in the previous step.<\/li><li>Make the second main row go vertical by adding class <code class=\"html-code\">tp__vertical<\/code>.<\/li><li>Remove class <code class=\"html-code\">tp__hide<\/code> from the column that holds a copy of the image that you hid in the first step.<\/li><li>Split up the class <code class=\"html-code\">vertical<\/code> into classes <code class=\"html-code\">dt__vertical<\/code>, <code class=\"html-code\">lt__vertical<\/code>, <code class=\"html-code\">tl__vertical<\/code>, <code class=\"html-code\">ml__vertical<\/code>, and <code class=\"html-code\">mp__vertical<\/code> in the row that holds the column I mentioned in the previous step.<\/li><\/ol><p>You will now see that the images are shown next to each other, but the text and the columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i> are also placed next to each other. Let's place them below each other by adding class <code class=\"html-code\">tp__vertical<\/code> to the row that holds these three columns.<\/p><p>The second main row should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-tp.png\" width=\"1152\" height=\"1149\" alt=\"Second main row breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"664.84375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"500.9296875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"375.09375\" data-img-of-m=\"fill\"><p>The first main row with the second main row below should look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-and-second-main-row-breakpoint-tp.png\" width=\"1152\" height=\"1389\" alt=\"First and second main row breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-and-second-main-row-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"803.5625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"605.4296875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"453.3515625\" data-img-of-m=\"fill\"><h4>Breakpoint ML - Mobile (landscape) &amp; Small tablet<\/h4><p>Click on custom device <i>09 - ML - min - 576x280<\/i>. This device is a landscape version of a mobile phone. It might be a little bit annoying that the height is only <code class=\"css-code\">280px<\/code>, but that is the reality and we have to make it look good at this breakpoint as well.<\/p><p>Let's start by making the first main row go vertical by adding the class <code class=\"html-code\">ml__vertical<\/code>.<\/p><p>You will now see that the columns labeled <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i> are placed next to the <code class=\"html-code\">&lt;h1&gt;<\/code>-element, so make the row in the first column of the first main row go vertical by adding the class <code class=\"html-code\">ml__vertical<\/code>.<\/p><p>If you scroll down a tiny bit, you will be presented with a huge WordPress logo and WooCommerce logo. To fix this <em>again<\/em>, add class <code class=\"html-code\">w-1\/ml\/5<\/code> to the column that holds the WordPress logo and to the column that holds the WooCommerce logo.<\/p><p>Just like what was the case for breakpoint <i>TP - Tablet (portrait) &amp; Tall mobile (landscape)<\/i>, the image in the second column of the first main row is rather large, and so is the image of the server if you make it just as wide. So let's do the following steps again:<\/p><ol><li>Hide the image in the second column of the first main row by adding class <code class=\"html-code\">ml__hide<\/code> to the column that wraps that image.<\/li><li>Once again remove class <code class=\"html-code\">ml__vertical<\/code> from the first main row; which I told you to <em>add<\/em> like half a minute ago, but since you just hid the second column of the first main row in the previous step, it is now no longer necessary to make the first main row go vertical.<\/li><li>Make the second row go vertical by adding class <code class=\"html-code\">ml__vertical<\/code>.<\/li><li>Remove class <code class=\"html-code\">ml__hide<\/code> from the column that holds a copy of the image that you hid in the first step.<\/li><li>Remove class <code class=\"html-code\">ml__vertical<\/code> from the row that holds the two columns with the images.<\/li><li>Make the row, which holds the three columns of which the first two columns contain text and the third column contains a row with three more columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i>, go vertical by adding class <code class=\"html-code\">ml__vertical<\/code>.<\/li><li>Give the columns that contain the <code class=\"html-code\">&lt;h3&gt;<\/code>-elements labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i> a width of 1\/1 by adding class <code class=\"html-code\">w-1\/ml\/1<\/code>.<\/li><li>Make sure that the row that wraps those columns horizontally centers the two columns within by adding class <code class=\"html-code\">ml__content-center<\/code>. Those two columns are the column that contains the icon, and the column that contains the <code class=\"html-code\">&lt;h3&gt;<\/code>-element.<\/li><li>Split up the class <code class=\"html-code\">w-3\/\/13<\/code> into classes <code class=\"html-code\">w-3\/dt\/13<\/code>, <code class=\"html-code\">w-3\/lt\/13<\/code>, <code class=\"html-code\">w-3\/tl\/13<\/code>, <code class=\"html-code\">w-3\/tp\/13<\/code>, <code class=\"html-code\">w-1\/ml\/3<\/code>, and <code class=\"html-code\">w-3\/mp\/13<\/code> for the three columns that wrap the magnifying glass, stopwatch, and devices icon. Notice that the width class for breakpoint <i>ML - Mobile (landscape) &amp; Small tablet<\/i> is different from the width classes surrounding it.<\/li><\/ol><p>After all of this, the first main row should look like this in its totality:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-breakpoint-ml.png\" width=\"1296\" height=\"1262\" alt=\"First main row breakpoint ml\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-breakpoint-ml-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"648.84375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"488.8671875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"366.0625\" data-img-of-m=\"fill\"><p>The second main row should look like this in its totality:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-ml.png\" width=\"864\" height=\"1198\" alt=\"Second main row breakpoint ml\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-ml-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"924.265625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"696.375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"521.4453125\" data-img-of-m=\"fill\"><h4>Breakpoint MP - Mobile (portrait)<\/h4><p>Click on device <i>12 - MP - mid - 360x640<\/i>. Right away you will see that the text does not take up the available width. That width is not available yet, because of the second column of the first main row. If you scroll down, you will see that the image is tiny.<\/p><p>Make sure that the first main row goes vertical by adding class <code class=\"html-code\">mp__vertical<\/code>.<\/p><p>I know what you're thinking: <q>Oh, but you will tell me to remove this class anyways!<\/q>. No, not this time. I promise, this time it's different. Take the following steps:<\/p><ol><li>Add class <code class=\"html-code\">mp__vertical<\/code> to the first main row, but <em>this<\/em> time you add class <code class=\"html-code\">mp__reverse<\/code> as well.<\/li><li>Add class <code class=\"html-code\">mp__vertical<\/code> to the row within the first column of the first main row.<\/li><li>Add class <code class=\"html-code\">w-1\/mp\/4<\/code> to the column that wraps the WordPress logo and to the column that wraps the WooCommerce logo.<\/li><\/ol><p>You will now see that the font size for <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i> is too large to fit next to the logos. My first instinct was to make the font size for the headings smaller in general, but that would require me to make <code class=\"html-code\">&lt;h3&gt;<\/code>-elements way too small.<\/p><p>Headings <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i> are actually <code class=\"html-code\">&lt;h2&gt;<\/code>-elements, but they are styled to look like <code class=\"html-code\">&lt;h3&gt;<\/code>-elements for every breakpoint. Let's make them look like <code class=\"html-code\">&lt;h6&gt;<\/code>-elements for breakpoint <i>MP - Mobile (portrait)<\/i> exclusively.<\/p><p>To do this, split up the class <code class=\"html-code\">h3<\/code> into classes <code class=\"html-code\">dt__h3<\/code>, <code class=\"html-code\">lt__h3<\/code>, <code class=\"html-code\">tl__h3<\/code>, <code class=\"html-code\">tp__h3<\/code>, <code class=\"html-code\">ml__h3<\/code>, and <code class=\"html-code\">mp__h6<\/code> for the <code class=\"html-code\">&lt;h2&gt;<\/code>-elements labeled <i>WordPress websites<\/i> and <i>WooCommerce webshops<\/i>.<\/p><p>After you've done that, you have to make the WordPress logo and WooCommerce logo even smaller. Give the columns that wrap those logos a width of 5\/24 by changing class <code class=\"html-code\">w-1\/mp\/4<\/code> to <code class=\"html-code\">w-5\/mp\/24<\/code>.<\/p><p>One thing that bothers me is that the font size of the <code class=\"html-code\">&lt;h1&gt;<\/code>-element is huge, let's change the font sizes one more time:<\/p><ol><li>Font size for <code class=\"html-code\">&lt;h1&gt;<\/code>-elements should be <code class=\"css-code\">25px<\/code> instead of <code class=\"css-code\">27px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h2&gt;<\/code>-elements should be <code class=\"css-code\">23px<\/code> instead of <code class=\"css-code\">25px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h3&gt;<\/code>-elements should be <code class=\"css-code\">21px<\/code> instead of <code class=\"css-code\">22px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h4&gt;<\/code>-elements should be <code class=\"css-code\">19px<\/code> instead of <code class=\"css-code\">20px<\/code><\/li><li>Font size for <code class=\"html-code\">&lt;h5&gt;<\/code>-elements should be <code class=\"css-code\">17.5px<\/code> instead of <code class=\"css-code\">18px<\/code><\/li><\/ol><p>The font size for <code class=\"html-code\">&lt;h6&gt;<\/code>-elements and the body remain the same (<code class=\"css-code\">16px<\/code>).<\/p><p>The first main row should look like this in its totality:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/first-main-row-breakpoint-mp.png\" width=\"720\" height=\"1648\" class=\"w50\" alt=\"First main row breakpoint mp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/first-main-row-breakpoint-mp-w500.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"333.4296875\" data-img-h-d=\"762.890625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"251.21875\" data-img-h-t=\"574.78125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"188.109375\" data-img-h-m=\"430.390625\" data-img-of-m=\"fill\"><p>Let's make the second main row responsive as well. The first obvious thing that you will notice is that the text is next to the image. Let's take the following steps:<\/p><ol><li>Make the second main row go vertical by adding class <code class=\"css-code\">mp__vertical<\/code>.<\/li><li>Now, something that you will only notice when switching to the custom device 10 - <i>MP - max - 575x800<\/i>, is that the text is placed next to each other. Add class <code class=\"css-code\">mp__vertical<\/code> to the row within the second column of the second main row to make it go vertical.<\/li><li>Now switch back to custom device <i>11 - MP - mid - 360x640<\/i>.<\/li><li>Scroll down until you see the three columns labeled <i>SEO-ready<\/i>, <i>Performance<\/i>, and <i>Responsive<\/i>. You'll see that these also need to go vertical. Do so by adding class <code class=\"css-code\">mp__vertical<\/code> to the row that wraps the three columns.<\/li><li>Now you will see that the labels are rather small compared to the icon, so let's make those <code class=\"html-code\">&lt;h3&gt;<\/code>-elements look like <code class=\"html-code\">&lt;h5&gt;<\/code>-elements instead of <code class=\"html-code\">&lt;h6&gt;<\/code>-elements by splitting up the class <code class=\"html-code\">&lt;h6&gt;<\/code> to classes <code class=\"css-code\">dt__h6<\/code>, <code class=\"css-code\">lt__h6<\/code>, <code class=\"css-code\">tl__h6<\/code>, <code class=\"css-code\">tp__h6<\/code>, <code class=\"css-code\">ml__h6<\/code>, and finally <code class=\"css-code\">mp__h5<\/code>. Notice that the heading size class for breakpoint <i>MP - Mobile (portrait) <\/i>differs from the other breakpoints.<\/li><li>The icons are also a bit too large, so let's give the columns that wrap the icons a width of 1\/5 by changing the class <code class=\"css-code\">w-3\/mp\/13<\/code> to class <code class=\"css-code\">w-1\/mp\/5<\/code>.<\/li><\/ol><p>After you've done all of that, the second main row should look like this in its totality:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/second-main-row-breakpoint-mp.png\" width=\"720\" height=\"2527\" class=\"w50\" alt=\"Second main row breakpoint mp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/second-main-row-breakpoint-mp-w500.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"333.4296875\" data-img-h-d=\"1169.65625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"251.21875\" data-img-h-t=\"881.28125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"188.109375\" data-img-h-m=\"659.8828125\" data-img-of-m=\"fill\"><p>Finally, switch to responsive mode to see what you've accomplished across all breakpoints.<\/p><h2>Creating a header<\/h2><h3>Adding HTML for the header<\/h3><p>Switch to custom device <i>01 - DT - min - 1600x900<\/i> and add a <code class=\"html-code\">&lt;header&gt;<\/code>-element above the <code class=\"html-code\">&lt;main&gt;<\/code>-element, and do the following:<\/p><ol><li>Set the <code class=\"html-code\">id<\/code>-attribute to <code class=\"html-code\">header<\/code><\/li><li>Add class <code class=\"html-code\">sticky<\/code><\/li><li>Add class <code class=\"html-code\">top<\/code><\/li><li>Add class <code class=\"html-code\">left<\/code><\/li><li>Add class <code class=\"html-code\">z-47<\/code><\/li><\/ol><p>Add a container within that <code class=\"html-code\">&lt;header&gt;<\/code>-element. Within that container, add a dark blue, full-width row of which its contents are aligned with the container. Set its top padding to <code class=\"css-code\">25px<\/code> for breakpoints <i>DT<\/i> and <i>LT<\/i>. Set its bottom padding <em>and<\/em> bottom margin to <code class=\"css-code\">0px<\/code> for <em>all<\/em> breakpoints.<\/p><p>Vertically center the columns within the row and add three columns:<\/p><ol><li>The first column has an automatic width<\/li><li>The second column has no width specified<\/li><li>The third column has an automatic width<\/li><\/ol><p>Add a logo in the first column, set attribute <code class=\"html-code\">id<\/code> to <code class=\"html-code\">header-logo<\/code> and remove its border radius by using the class <code class=\"html-code\">border-rad-0<\/code>. This is the logo that I use: <a href=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/themes\/terluin-webdesign\/access\/logo\/logo.svg\" target=\"_blank\" rel=\"noopener\">https:\/\/www.terluinwebdesign.nl\/wp-content\/themes\/terluin-webdesign\/access\/logo\/logo.svg<\/a>.<\/p><p>Add a new media query above breakpoint <i>TL - Tablet (landscape)<\/i> that targets breakpoint <i>LT<\/i> and <i>DT<\/i>:<\/p><tw-pre><code class=\"css-code\">\/* Breakpoints: LT, DT *\/\r\n@media (min-width: 1200px) {\r\n  \r\n}<\/code><\/tw-pre><p>Refer to the <code class=\"html-code\">id<\/code>-attribute of the logo and set the height to <code class=\"css-code\">60px<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">\/* Breakpoints: LT, DT *\/\r\n@media (min-width: 1200px) {\r\n  <\/span><ins>#header-logo {\r\n    height: 60px;\r\n  }<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Add a <code class=\"html-code\">&lt;nav&gt;<\/code>-element in the second column. Add a <code class=\"html-code\">&lt;ul&gt;<\/code>-element into the <code class=\"html-code\">&lt;nav&gt;<\/code>-element. Add 6 <code class=\"html-code\">&lt;li&gt;<\/code>-elements to the <code class=\"html-code\">&lt;ul&gt;<\/code>-element. Add an <code class=\"html-code\">&lt;a&gt;<\/code>-element to each <code class=\"html-code\">&lt;li&gt;<\/code>-element with attribute <code class=\"html-code\">href<\/code> set to <code class=\"html-code\">#<\/code> and its text contents should be <i>Home<\/i>, <i>Portfolio<\/i>, <i>About us<\/i>, <i>Contact us<\/i>, <i>Request a Quote<\/i>, and <i>Blog<\/i>.<\/p><p>The margins and paddings of the <code class=\"html-code\">&lt;li&gt;<\/code>-elements and <code class=\"html-code\">&lt;a&gt;<\/code>-elements within the header, have already been defined in chapter 11.18 <i>li, ol, ul, nav<\/i>. <\/p><p>The third column contains a row with 6 columns that each have utility class <code class=\"html-code\">w-auto<\/code> and the following text contents: <i>DT<\/i>, <i>LT<\/i>, <i>TL<\/i>, <i>TP<\/i>, <i>ML<\/i>, <i>MP<\/i>.<\/p><p>Measure the exact height of the header by clicking on the <code class=\"html-code\">&lt;header&gt;<\/code>-element inside DevTools, then going to tab <i>Console<\/i> and running <code class=\"js-code\">$0.getBoundingClientRect().height<\/code>.<\/p><p>Use this value to override the value of variable <code class=\"css-code\">--header-height<\/code> that is located in the rule set with selector <code class=\"css-code\">:root<\/code>, but override it in the newly created breakpoint instead, since the height of the logo and the header are closely related.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">\/* Breakpoints: LT, DT *\/\r\n@media (min-width: 1200px) {<\/span><ins>\r\n  :root {\r\n    --header-height: 110px;\r\n  }<\/ins><span class=\"semi-opaque\">\r\n  #header-logo {\r\n    height: 60px;\r\n  }\r\n}<\/span><\/code><\/tw-pre><p>Switch over to custom device <i>05 - TL - min - 992x768<\/i>. You'll see that the logo is too big now, so add a new media query above breakpoint <i>TL - Tablet (landscape)<\/i> that targets breakpoint <i>TL<\/i>, <i>TP<\/i>, <i>ML<\/i>, and <i>MP&nbsp;<\/i>:<\/p><tw-pre><code class=\"css-code\">\/* Breakpoints: TL, TP, ML, MP *\/\r\n@media (max-width: 1199.98px) {\r\n  \r\n}<\/code><\/tw-pre><p>Set the height of the header logo to <code class=\"css-code\">36px<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">\/* Breakpoints: TL, TP, ML, MP *\/\r\n@media (max-width: 1199.98px) {\r\n  <\/span><ins>#header-logo {\r\n    height: 36px;\r\n  }<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>After you have fixed that, you will see that the top of the header has a lot of space, make that space smaller by adding the following classes to the row inside the header:<\/p><ol><li><code class=\"html-code\">tl__pad-top-3<\/code><\/li><li><code class=\"html-code\">tp__pad-top-3<\/code><\/li><li><code class=\"html-code\">ml__pad-top-3<\/code><\/li><li><code class=\"html-code\">mp__pad-top-3<\/code><\/li><\/ol><p>Add the following classes to the first and second column of that row:<\/p><ol><li><code class=\"html-code\">tl__mar-bottom-3<\/code><\/li><li><code class=\"html-code\">tp__mar-bottom-3<\/code><\/li><li><code class=\"html-code\">ml__mar-bottom-3<\/code><\/li><li><code class=\"html-code\">mp__mar-bottom-3<\/code><\/li><\/ol><p>Measure the height of the header again and override the value for variable <code class=\"css-code\">--header-height<\/code> by adding the following in the newly created media query:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">\/* Breakpoints: TL, TP, ML, MP *\/\r\n@media (max-width: 1199.98px) {<\/span><ins>\r\n  :root {\r\n    --header-height: 61px;\r\n  }<\/ins><span class=\"semi-opaque\">\r\n  #header-logo {\r\n    height: 36px;\r\n  }\r\n}<\/span><\/code><\/tw-pre><p>Before creating a hamburger menu, let's hide the third column for breakpoints <i>TL<\/i>, <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i> and set the width <em>and<\/em> the left margin of the second column to be automatic for the same breakpoints.<\/p><h3>Creating a hamburger menu<\/h3><p>Let's create a hamburger menu (an expandable menu). Let's hide it on breakpoints <i>DT<\/i> and <i>LT<\/i> by adding the following to media query <code class=\"css-code\">(min-width: 1200px)<\/code>:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu {\r\n  display: none;\r\n}<\/code><\/tw-pre><p>Make the navigation invisible by default by adding the following in the new media query.<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu + nav {\r\n  transform: translateY(calc(0px - (100vh - var(--header-height) - var(--top-bar-height)) - var(--header-height) - var(--top-bar-height) * 2));\r\n}<\/code><\/tw-pre><p>By using CSS function&nbsp;<code class=\"css-code\">translateY<\/code>&nbsp;for property <code class=\"css-code\">transform<\/code> I can move the navigation menu upwards by the height of the viewport plus the height of the header and top bar times two. This ensures that the bottom of the navigation is pixel-perfectly out of sight after setting the height (and width) of the navigation menu as follows:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">#toggle-hamburger-menu + nav {\r\n  transform: translateY(calc(0px - (100vh - var(--header-height) - var(--top-bar-height)) - var(--header-height) - var(--top-bar-height) * 2));<\/span><ins>\r\n  height:    calc(100vh - var(--header-height) - var(--top-bar-height));\r\n  width:     calc(100 * var(--vw));\r\n  overflow:  hidden;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>The reason behind declaration <code class=\"css-code\">overflow: hidden<\/code> is that the <code class=\"html-code\">&lt;nav&gt;<\/code>-element contains a row which has negative left and right margins to negate the left and right margins of the columns within. I've discussed this concept earlier in this article.<\/p><p>This makes the row wider than its parent element, which causes a horizontal scrollbar on devices that show the hamburger menu, because the row within the <code class=\"html-code\">&lt;nav&gt;<\/code>-element was wider than the width of the viewport.<\/p><p>This will be fixed anyway as we are going to add paddings and a background color to the <code class=\"html-code\">&lt;nav&gt;<\/code>-element. Add the background color and padding (leave declaration <code class=\"css-code\">overflow: hidden<\/code>):<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">#toggle-hamburger-menu + nav {\r\n  transform:        translateY(calc(0px - (100vh - var(--header-height) - var(--top-bar-height)) - var(--header-height) - var(--top-bar-height) * 2));\r\n  height:           calc(100vh - var(--header-height) - var(--top-bar-height));\r\n  width:            calc(100 * var(--vw));\r\n  overflow:         hidden;<\/span><ins>\r\n  background-color: var(--bg-color);\r\n  padding:          25px calc((100vw - var(--container-width)) \/ 2 + 25px);<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>The navigation menu will be visible after clicking the hamburger menu toggle button, and when doing so, it should happen with a transition. Let's set the transition:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">#toggle-hamburger-menu + nav {\r\n  transform:        translateY(calc(0px - (100vh - var(--header-height) - var(--top-bar-height)) - var(--header-height) - var(--top-bar-height) * 2));\r\n  height:           calc(100vh - var(--header-height) - var(--top-bar-height));\r\n  width:            calc(100 * var(--vw));\r\n  overflow:         hidden;\r\n  background-color: var(--bg-color);\r\n  padding:          25px calc((100vw - var(--container-width)) \/ 2 + 25px);<\/span><ins>\r\n  transition:       transform 0.4s ease;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>If you look at the result now, you will see that the header is huge. This is because the navigation menu still takes up space. To prevent it from taking up any space, we set its <code class=\"css-code\">position<\/code>-property to value <code class=\"css-code\">absolute<\/code>, and we set properties <code class=\"css-code\">top<\/code> and <code class=\"css-code\">right<\/code>.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">#toggle-hamburger-menu + nav {\r\n  transform:        translateY(calc(0px - (100vh - var(--header-height) - var(--top-bar-height)) - var(--header-height) - var(--top-bar-height) * 2));\r\n  height:           calc(100vh - var(--header-height) - var(--top-bar-height));\r\n  width:            calc(100 * var(--vw));\r\n  overflow:         hidden;\r\n  background-color: var(--bg-color);\r\n  padding:          25px calc((100vw - var(--container-width)) \/ 2 + 25px);\r\n  transition:       transform 0.4s ease;<\/span><ins>\r\n  position:         absolute;\r\n  top:              var(--header-height);\r\n  left:             0px;\r\n  z-index:          -1;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Property <code class=\"css-code\">top<\/code> is set to <code class=\"css-code\">var(--header-height)<\/code> to make sure that it is positioned outside the bottom of the header. Property <code class=\"css-code\">z-index<\/code> is set to a negative value of <code class=\"css-code\">-1<\/code> to make sure that when the navigation comes into view, it moves behind the header instead of overlapping it.<\/p><p>Since we want to position the navigation menu inside of the row of the header, instead of the column that it's in, we have to set the <code class=\"css-code\">position<\/code>-property of the column to value <code class=\"css-code\">static<\/code>.<\/p><p>Now, let's make the navigation appear when a certain class is present on the <code class=\"html-code\">&lt;nav&gt;<\/code>-element.<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu.toggled + nav {\r\n  transform: translateY(0%);\r\n}<\/code><\/tw-pre><p>It's as easy as that! Let's add a little bit of JavaScript for the toggle button to work.<\/p><p>Add the following JavaScript code in a new <code class=\"html-code\">&lt;script&gt;<\/code>-element below the (already existing) <code class=\"html-code\">&lt;script&gt;<\/code>-element in the <code class=\"html-code\">&lt;head&gt;<\/code>-element:<\/p><tw-pre><code class=\"js-code\">window.addEventListener('DOMContentLoaded', function() {\r\n  var buttonToToggleHamburgerMenu = document.getElementById('toggle-hamburger-menu');\r\n  if(buttonToToggleHamburgerMenu) {\r\n    buttonToToggleHamburgerMenu.addEventListener('click', function(e) {\r\n      this.classList.toggle('toggled');\r\n    });\r\n  }\r\n});<\/code><\/tw-pre><p>The hamburger menu works now! Let's make the toggle button look pretty and easy to tap.<\/p><p>Let's first define the width of the bars inside the toggle button in the rule set with selector <code class=\"css-code\">:root<\/code> within the same breakpoint.<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">:root {\r\n  --header-height: 61px;<\/span><ins>\r\n  --hamburger-menu-toggle-width: calc(0.3 * var(--header-height));<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>Add the following <em>above<\/em> the rule set with selector <code class=\"css-code\">#toggle-hamburger-menu + nav<\/code>:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu {\r\n  background-color: transparent;\r\n  border-width:     0px;\r\n  color:            transparent;\r\n  display:          block;\r\n  padding:          0px;\r\n  height:           var(--header-height);\r\n  width:            calc(\r\n    var(--hamburger-menu-toggle-width)\r\n    +\r\n    2 * (\r\n      (100vw - var(--container-width)) \/ 2\r\n      +\r\n      calc(25px * var(--col-spacing-multiplier))\r\n    )\r\n  );\r\n  margin-right:     calc(\r\n    0px\r\n    -\r\n    (100vw - var(--container-width)) \/ 2\r\n    -\r\n    calc(25px * var(--col-spacing-multiplier))\r\n  );\r\n  margin-top:       -12.5px;\r\n  margin-bottom:    -12.5px;\r\n  border-radius:    0px;\r\n  position:         relative;\r\n}<\/code><\/tw-pre><p>Let's break it down:<\/p><ol><li>It has a transparent background color.<\/li><li>Its border has been removed.<\/li><li>It has a transparent text color, because otherwise the text <i>Menu<\/i> would be visible.<\/li><li>Its <code class=\"css-code\">display<\/code>-property is set to value <code class=\"css-code\">block<\/code> to prevent any line heights from affecting it, since the value used to be <code class=\"css-code\">inline-block<\/code>, and to be able to set a width and height (which is also possible for inline-block elements).<\/li><li>Its padding has been removed.<\/li><li>Its <code class=\"css-code\">height<\/code>-property is set to <code class=\"css-code\">var(--header-height)<\/code> to cover the header and make it easy to tap.<\/li><li>Its <code class=\"css-code\">width<\/code>-property is set to refer to CSS variable <code class=\"css-code\">--hamburger-menu-toggle-width<\/code> (which is a calculation of 30 percent of the header's height) plus two times the empty space that is left on the left\/right side of the container.<\/li><li>The button is now moved out of the container to the right.<\/li><li>It has a negative top and bottom margin of <code class=\"css-code\">-12.5px<\/code> to negate the top and bottom spacing of the header.<\/li><li>Its border radius has been removed.<\/li><li>Its <code class=\"css-code\">position<\/code>-property is set to value <code class=\"css-code\">relative<\/code>, since you are going to add pseudo-elements <code class=\"css-code\">::before<\/code> and <code class=\"css-code\">::after<\/code> to the button and set the <code class=\"css-code\">position<\/code>-property for those pseudo-elements to value <code class=\"css-code\">absolute<\/code>.<\/li><\/ol><p>Let's now add those pseudo-elements:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu::before,\r\n#toggle-hamburger-menu::after {\r\n  content:          '';\r\n  display:          block;\r\n  position:         absolute;\r\n  top:              50%;\r\n  right:            calc(\r\n    (100vw - var(--container-width)) \/ 2\r\n    +\r\n    calc(25px * var(--col-spacing-multiplier))\r\n  );\r\n  width:            var(--hamburger-menu-toggle-width);\r\n  height:           0px;\r\n  border-top:       1px solid var(--txt-color);\r\n  border-bottom:    1px solid var(--txt-color);\r\n  background-color: var(--txt-color);\r\n  transition:       transform 0.2s ease;\r\n}<\/code><\/tw-pre><p>Let's break that one down:<\/p><ol><li>Pseudo-elements need a value for the <code class=\"css-code\">content<\/code>-property, so it's value is set to be just an empty string.<\/li><li>Its <code class=\"css-code\">display<\/code>-property is set to value <code class=\"css-code\">block<\/code> to be able to set the dimensions.<\/li><li>Its <code class=\"css-code\">position<\/code>-property is set to value <code class=\"css-code\">absolute<\/code>, to position the pseudo-elements within the button.<\/li><li>Property <code class=\"css-code\">top<\/code> is set to <code class=\"css-code\">50%<\/code> to align it towards the center.<\/li><li>Property <code class=\"css-code\">right<\/code> is set to a calculation of the amount of empty space that is left on the left\/right side of the container. This calculation is also used as part of the calculation for property <code class=\"css-code\">width<\/code> in the previous rule set.<\/li><li>Its width is set to 30 percent of the header's height.<\/li><li><p>Its height is set to <code class=\"css-code\">0px<\/code>, while the top and bottom borders are used to set the height. On top of that, a background color is applied. The color of the borders and the background color is equal to the base text color of the current color scheme.<\/p><p>For some reason, when applying borders <em>and<\/em> a background color on something that is <code class=\"css-code\">0px<\/code> in height, it makes it look more vibrant.<\/p><\/li><li>Its <code class=\"css-code\">transition<\/code>-property is set to transition the <code class=\"css-code\">transform<\/code>-property.<\/li><\/ol><p>Let's now position pseudo-element <code class=\"css-code\">::before<\/code> by translating it upwards by 50 percent of its own height and then translating it upwards even more by the width of the bars divided by <code class=\"css-code\">3.5<\/code>. Why <code class=\"css-code\">3.5<\/code>? Well, you can lower this number to put the bars more apart from the middle of the button in respect to the width of the bars.<\/p><p>Now, if you change the width of the bars inside the toggle button, the ratio between the width and the space to the center of the button stays the same.<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu::before {\r\n  transform: translateY(calc(-50% - var(--hamburger-menu-toggle-width) \/ 3.5));\r\n}<\/code><\/tw-pre><p>Let's do the same for pseudo-element <code class=\"css-code\">::after<\/code>, but translate it downwards instead:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu::after {\r\n  transform: translateY(calc(-50% + var(--hamburger-menu-toggle-width) \/ 3.5));\r\n}<\/code><\/tw-pre><p>Let's rotate the pseudo-element <code class=\"css-code\">::before<\/code> by 45 degrees if the button is toggled:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu.toggled::before {\r\n  transform: translateY(-50%) rotate(45deg);\r\n}<\/code><\/tw-pre><p>Do the same for pseudo-element <code class=\"css-code\">::after<\/code>, but rotate it 45 degrees counterclockwise:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu.toggled::after {\r\n  transform: translateY(-50%) rotate(-45deg);\r\n}<\/code><\/tw-pre><p>Take a look at the result by clicking the hamburger menu toggle button.<\/p><p>You will see that the items within the navigation should also be placed below each other. Set the <code class=\"css-code\">flex-direction<\/code>-property of the <code class=\"html-code\">&lt;ul&gt;<\/code>-element within the <code class=\"html-code\">&lt;nav&gt;<\/code>-element to value <code class=\"css-code\">column<\/code> and vertically center the <code class=\"html-code\">&lt;li&gt;<\/code>-elements within the <code class=\"html-code\">&lt;ul&gt;<\/code>-element:<\/p><tw-pre><code class=\"css-code\">#toggle-hamburger-menu + nav ul {\r\n  flex-direction:  column;\r\n  justify-content: center;\r\n}<\/code><\/tw-pre><p>If you look at the result, you will see that the <code class=\"html-code\">&lt;ul&gt;<\/code>-element is not vertically centered. This is because its height is equal to its contents. Instead, its height should take up the available space within the <code class=\"html-code\">&lt;nav&gt;<\/code>-element by applying <code class=\"css-code\">height: 100%<\/code>:<\/p><tw-pre><code class=\"css-code\"><span class=\"semi-opaque\">#toggle-hamburger-menu + nav ul {\r\n  flex-direction:  column;\r\n  align-items:     center;\r\n  justify-content: center;<\/span><ins>\r\n  height:          100%;<\/ins><span class=\"semi-opaque\">\r\n}<\/span><\/code><\/tw-pre><p>See the result, the header is done!<\/p><h2>Creating a top bar<\/h2><p>Switch to custom device <i>01 - DT - min - 1600x900<\/i>. Add another <code class=\"html-code\">&lt;header&gt;<\/code>-element to the HTML file, but place it <em>above<\/em> the <code class=\"html-code\">&lt;header&gt;<\/code>-element that has its <code class=\"html-code\">id<\/code>-attribute set to value <code class=\"html-code\">header<\/code>.<\/p><p>Set the <code class=\"html-code\">id<\/code>-attribute of the new <code class=\"html-code\">&lt;header&gt;<\/code>-element to value <code class=\"html-code\">top-bar<\/code> and do the following:<\/p><ol><li>Add a container within the top bar.<\/li><li>Add a row to the container and set its bottom margin to <code class=\"css-code\">0px<\/code>, make it full-width, let the contents align horizontally with the container, make the background color darker blue, give it a light color scheme, a top padding of <code class=\"css-code\">12.5px<\/code>, a bottom padding of <code class=\"css-code\">0px<\/code>, and vertically center the columns within.<\/li><li>Add a column within the row with a bottom margin of <code class=\"css-code\">12.5px<\/code> and an automatic width.<\/li><li>Add another column within the row, give it a bottom margin of <code class=\"css-code\">12.5px<\/code>, but do not set the width.<\/li><li>Add two more columns within the row with the same properties as the first column.<\/li><li>Within the first column, add a <code class=\"html-code\">&lt;nav&gt;<\/code>-element with a <code class=\"html-code\">&lt;ul&gt;<\/code>-element that has two <code class=\"html-code\">&lt;li&gt;<\/code>-elements of which the first has an <code class=\"html-code\">&lt;a&gt;<\/code>-element with attribute <code class=\"html-code\">href<\/code> set to value <code class=\"html-code\">#<\/code> and the text content to <i>info@company.com<\/i>, and of which the second <code class=\"html-code\">&lt;li&gt;<\/code>-element also has an <code class=\"html-code\">&lt;a&gt;<\/code>-element with attribute <code class=\"html-code\">href<\/code> set to value <code class=\"html-code\">#<\/code>, but its text content is <i>(212)456-7890<\/i>.<\/li><li>Within the second column, add a row with the tag name <code class=\"html-code\">&lt;ul&gt;<\/code>. Within that row, add three columns of which each has the tag name <code class=\"html-code\">&lt;li&gt;<\/code> and additionally the class <code class=\"html-code\">w-auto<\/code> to give it an automatic width. The text contents for the <code class=\"html-code\">&lt;li&gt;<\/code>-elements are as follows: <i>Unique selling point #1<\/i>, <i>Unique selling point #2<\/i>, and <i>Unique selling point #3<\/i>.<\/li><li><p>Within the third column, add a row with two vertically centered columns, of which the first has additional classes <code class=\"html-code\">w-auto<\/code> and <code class=\"html-code\">mar-right-0<\/code> and text content <i>Follow us<\/i>, and of which the second column has tag name <code class=\"html-code\">&lt;nav&gt;<\/code> and additional class <code class=\"html-code\">w-auto<\/code>.<\/p><p>Within that <code class=\"html-code\">&lt;nav&gt;<\/code>-element, add a <code class=\"html-code\">&lt;ul&gt;<\/code>-element with four <code class=\"html-code\">&lt;li&gt;<\/code>-elements inside, of which each has an <code class=\"html-code\">&lt;a&gt;<\/code>-element inside with attribute <code class=\"html-code\">href<\/code> set to value <code class=\"html-code\">#<\/code>, of which each has an <code class=\"html-code\">&lt;img&gt;<\/code>-element inside with class <code class=\"html-code\">icon<\/code> and the <code class=\"html-code\">src<\/code>-attribute set to the following values:<\/p><ol><li><code class=\"html-code\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/brand\/facebook.svg?c=%23ffffff<\/code><\/li><li><code class=\"html-code\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/brand\/youtube.svg?c=%23ffffff<\/code><\/li><li><code class=\"html-code\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/brand\/linkedin.svg?c=%23ffffff<\/code><\/li><li><code class=\"html-code\">https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/themes\/terluin-webdesign\/access\/img\/brand\/instagram.svg?c=%23ffffff<\/code><\/li><\/ol><\/li><li>Within the fourth column, add a&nbsp;<code class=\"html-code\">&lt;nav&gt;<\/code>-element with a <code class=\"html-code\">&lt;ul&gt;<\/code>-element inside. Add two <code class=\"html-code\">&lt;li&gt;<\/code>-elements to the <code class=\"html-code\">&lt;ul&gt;<\/code>-element of which each has an <code class=\"html-code\">&lt;a&gt;<\/code>-element with attribute <code class=\"html-code\">href<\/code> set to value <code class=\"html-code\">#<\/code>. The text contents for the <code class=\"html-code\">&lt;a&gt;<\/code>-elements are <i>FAQ<\/i> and <i>Work at Company Name<\/i>.<\/li><\/ol><p>In order for the class <code class=\"html-code\">icon<\/code> to work, you should add the following below the rule set with selector <code class=\"css-code\">.obj-cover<\/code> and do the same for the breakpoint-specific versions (be sure to prepend them accordingly):<\/p><tw-pre><code class=\"css-code\">.icon {\r\n  width:         1em;\r\n  height:        1em;\r\n  object-fit:    contain;\r\n  border-radius: 0px;\r\n}<\/code><\/tw-pre><p>Set the font size for the top bar to <code class=\"css-code\">16px<\/code> for all devices by adding the following above the rule set with selector <code class=\"css-code\">main<\/code>:<\/p><tw-pre><code class=\"css-code\">#top-bar {\r\n  font-size:   16px;\r\n  line-height: 1.5em;\r\n}<\/code><\/tw-pre><p>Look at the result, it should look like this at breakpoint <i>DT - Desktop&nbsp;<\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-breakpoint-dt.png\" width=\"2375\" height=\"74\" alt=\"Top bar breakpoint dt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-breakpoint-dt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"20.671875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"15.5625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"11.65625\" data-img-of-m=\"fill\"><p>Switch to custom device <i>03 - LT - min - 1200x700<\/i>. You'll see that it doesn't fit anymore. I decided to hide the fourth column for breakpoints <i>LT<\/i>, <i>TL<\/i>, <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>.<\/p><p>The top bar should now look like this at breakpoint <i>LT - Laptop &amp; Small desktop&nbsp;<\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-breakpoint-lt.png\" width=\"2662\" height=\"111\" alt=\"Top bar breakpoint lt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-breakpoint-lt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"27.34375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"20.59375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"15.421875\" data-img-of-m=\"fill\"><p>Switch to custom device <i>05 - TL - min - 992x768<\/i>. It again, doesn't fit. Let's hide the third unique selling point for breakpoints <i>TL<\/i>, <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>.<\/p><p>This is what the top bar should look like now:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-breakpoint-tl.png\" width=\"2232\" height=\"111\" alt=\"Top bar breakpoint tl\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-breakpoint-tl-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"32.671875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"24.625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"18.4296875\" data-img-of-m=\"fill\"><p>Switch to custom device <i>07 - TP - min - 768x1024<\/i>. Again, it doesn't fit. Let's hide the second unique selling point for breakpoints <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>.<\/p><p>This should be the result of doing so:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-breakpoint-tp.png\" width=\"1728\" height=\"111\" alt=\"Top bar breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"42.671875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"32.15625\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"24.078125\" data-img-of-m=\"fill\"><p>Switch to custom device <i>09 - ML - min - 576x280<\/i>. Once again, it doesn't fit. You can now hide the whole second column of the top bar for breakpoints <i>ML<\/i> and <i>MP<\/i>. The result:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-breakpoint-ml.png\" width=\"1296\" height=\"111\" alt=\"Top bar breakpoint ml\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-breakpoint-ml-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"56.671875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"42.703125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"31.9765625\" data-img-of-m=\"fill\"><p>I noticed that the column that contains the social links is not positioned to the right. This is because the left column has an automatic width. You can split up the class <code class=\"html-code\">w-auto<\/code> for the left column into classes <code class=\"html-code\">tp__w-auto<\/code>, <code class=\"html-code\">tl__w-auto<\/code>, <code class=\"html-code\">lt__w-auto<\/code>, and <code class=\"html-code\">dt__w-auto<\/code>.<\/p><p>Since you should hide the top bar at breakpoint <i>MP - Mobile (portrait)<\/i>, the following should be the final result, as shown at breakpoint <i>ML - Mobile (landscape) &amp; Small tablet <\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/top-bar-final-breakpoint-ml.png\" width=\"1296\" height=\"111\" alt=\"Top bar final breakpoint ml\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/top-bar-final-breakpoint-ml-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"56.671875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"42.703125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"31.9765625\" data-img-of-m=\"fill\"><p>Hide the top bar at breakpoint <i>MP - Mobile (portrait)<\/i> by adding the following below the rule set with selector <code class=\"css-code\">body<\/code> in media query <code class=\"css-code\">(max-width: 575.98px)<\/code>:<\/p><tw-pre><code class=\"css-code\">#top-bar {\r\n  display: none;\r\n}<\/code><\/tw-pre><p>Now set variable <code class=\"css-code\">--top-bar-height<\/code> to <code class=\"css-code\">0px<\/code> by adding the following above the rule set with selector <code class=\"css-code\">.container<\/code> in that same media query:<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --top-bar-height: 0px;\r\n}<\/code><\/tw-pre><p>We're almost there, the only thing left to do is to measure the height of the top bar at breakpoints <i>DT<\/i>, <i>LT<\/i>, <i>TL<\/i>, <i>TP<\/i>, and <i>ML<\/i>.<\/p><p>Switch to custom device <i>01 - DT - min - 1600x900<\/i>, select the top bar in DevTools, go to tab <i>Console<\/i> and run the following JavaScript command: <code class=\"js-code\">$0.getBoundingClientRect().height<\/code>. Copy the output and use it as a <code class=\"css-code\">px<\/code> value by adding the following within the top of media query <code class=\"css-code\">(min-width: 1600px)<\/code>:<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --top-bar-height: 49px;\r\n}<\/code><\/tw-pre><p>Switch to custom device <i>03 - LT - min - 1200x700<\/i>, run the same command (you can go back in the history of commands by pressing the up-arrow if you focus the command line first) and use the output value as a <code class=\"css-code\">px<\/code> value by adding the following within the very top of media query <code class=\"css-code\">(min-width: 1200px) and (max-width: 1599.98px)<\/code>, even above the rule set that has selector <code class=\"css-code\">.container<\/code>:<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --top-bar-height: 49px;\r\n}<\/code><\/tw-pre><p>Follow the same steps for breakpoints <i>TL<\/i>, <i>TP<\/i>, and <i>ML<\/i> and then your top bar is finished!<\/p><p>When scrolling down, there is a chance that there is a pixel gap just above the header. This is a bug that you can fix by making the top bar sticky but setting its <code class=\"css-code\">top<\/code>-property to a (negative) value from CSS calculation <code class=\"css-code\">calc(0px - var(--top-bar-height))<\/code>, so it scrolls along, but is just out of view. Setting a value higher than that does <em>not<\/em> fix the pixel gap.<\/p><h2>Creating a footer<\/h2><p>Switch back to custom device <i>01 - DT - min - 1600x900<\/i>. Add a <code class=\"html-code\">&lt;footer&gt;<\/code>-element with its <code class=\"html-code\">id<\/code>-attribute set to value <code class=\"html-code\">footer<\/code> and add class <code class=\"html-code\">mar-top-1<\/code> to add <code class=\"css-code\">50px<\/code> of top margin.<\/p><p>Add a container to the footer. In the container, add a full-width row of which its contents are horizontally aligned with the container, and give it a dark blue background color and a light color scheme. Add the following to that row:<\/p><ol><li>Add a column with a width of 1\/3 by adding class <code class=\"html-code\">w-1\/\/3<\/code>.<\/li><li>Add a column with a width of 4\/17 by adding class <code class=\"html-code\">w-4\/\/17<\/code>.<\/li><li>Add a column with an automatic width, an automatic left and right margin and a left and right padding of <code class=\"css-code\">25px<\/code>.<\/li><li>Add a column with an automatic width.<\/li><li>Within the first column, add a row with two columns of which the first has an automatic width. Add an image within that column with its <code class=\"html-code\">id<\/code>-attribute set to value <code class=\"html-code\">footer-logo<\/code>, set its height to <code class=\"css-code\">96px<\/code> and remove its border radius by adding a new rule set with selector <code class=\"css-code\">#footer-logo<\/code> below the rule set with selector <code class=\"css-code\">main<\/code>. Within the second column, add two paragraphs, of which the first one is styled as an <code class=\"html-code\">&lt;h5&gt;<\/code>-element and its text content being <i>Company Name<\/i>, and the second paragraph has the following text content: <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.<\/i>.<\/li><li><p>Within the second column of the footer, add a paragraph that is styled as an <code class=\"html-code\">&lt;h5&gt;<\/code>-element with its text content being <i>Contact details<\/i>.<\/p><p>Below that paragraph add an <code class=\"html-code\">&lt;address&gt;<\/code>-element with its text content being <i>Professor van der Waalsstraat 3H, 1821 BT Alkmaar. The Netherlands<\/i>.<\/p><p>Copy the <code class=\"html-code\">&lt;nav&gt;<\/code>-element, which contains the email address and phone number, from the top bar and paste it below the <code class=\"html-code\">&lt;address&gt;<\/code>-element.<\/p><\/li><li>Within the third column, add a paragraph that looks like an <code class=\"html-code\">&lt;h5&gt;<\/code>-element and with text content <i>Navigation 1<\/i>. Add navigation below that paragraph with items <i>Responsive web design<\/i>, <i>Page speed optimization<\/i>, <i>Core Web Vitals optimization<\/i>, and <i>Search engine optimization<\/i>.<\/li><li>Within the fourth column, add a paragraph that looks like an <code class=\"html-code\">&lt;h5&gt;<\/code>-element and with text content <i>Navigation 2<\/i>. Add a navigation below that paragraph with items <i>Disclaimer<\/i>, <i>Cookie Policy<\/i>, <i>Privacy Policy<\/i>, and <i>Terms and Conditions<\/i>.<\/li><\/ol><p>The footer should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-first-row-breakpoint-dt.png\" width=\"2375\" height=\"439\" alt=\"Footer first row breakpoint dt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-first-row-breakpoint-dt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"122.6875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"92.4375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"69.21875\" data-img-of-m=\"fill\"><p>Add another row with the same classes, but set its top padding to <code class=\"css-code\">0px<\/code> and center its items vertically. Within that row, add the following elements:<\/p><ol><li>Add a column with an automatic width.<\/li><li>Add a column that centers its text.<\/li><li><p>Within the first column, add a row with a darker blue background color that vertically aligns its items to the bottom. Within that row add two columns that both have an automatic width.<\/p><p>Within the first column, add two paragraphs, of which the first looks like an <code class=\"html-code\">&lt;h5&gt;<\/code>-element and has a bottom margin of <code class=\"css-code\">6.25px<\/code> and its text content being <i>Stay up-to-date with our news<\/i>, and of which the second paragraph has the the following text content: <i>Sign up for our newsletters, you can unsubscribe anytime!<\/i>.<\/p><p>Within the second column, add a row with the tag name <code class=\"html-code\">&lt;form&gt;<\/code>. Within that row, add two columns that both have an automatic width. The first column has its right margin set to <code class=\"css-code\">0px<\/code>, and the second column vertically stretches itself and has its left margin set to <code class=\"css-code\">0px<\/code>.<\/p><p>Within the first column, add an <code class=\"html-code\">input<\/code>-element with its <code class=\"html-code\">type<\/code>-attribute set to value <code class=\"html-code\">email<\/code>, its <code class=\"html-code\">placeholder<\/code>-attribute set to value <code class=\"html-code\">Your email address<\/code>, remove its border radius at the top right and bottom right, set its border color <em>and<\/em> text color to be lighter blue.<\/p><p>Within the second column, add an <code class=\"html-code\">input<\/code>-element with its <code class=\"html-code\">type<\/code>-attribute set to value <code class=\"html-code\">submit<\/code>, its <code class=\"html-code\">value<\/code>-attribute set to value <code class=\"html-code\">Subscribe<\/code>, set its height to be 100 percent of its parent element, and remove its border radius at the top left and bottom left.<\/p><\/li><li>In the second column, add a paragraph that looks like an <code class=\"html-code\">&lt;h3&gt;<\/code>-element with the text content being <i>The slogan of Company Name<\/i>. Wrap the text in an <code class=\"html-code\">&lt;i&gt;<\/code>-element to make it italic.<\/li><\/ol><p>The footer should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-first-and-second-row-breakpoint-dt.png\" width=\"2375\" height=\"679\" alt=\"Footer first and second row breakpoint dt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-first-and-second-row-breakpoint-dt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"190.0625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"143.1875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"107.21875\" data-img-of-m=\"fill\"><p>The only row that's missing now is the copyright bar. Add a full-width row, of which its contents are horizontally aligned with the container, give it a darker blue background color, a light color scheme, a top padding of <code class=\"css-code\">25px<\/code>, a bottom padding of <code class=\"css-code\">0px<\/code>, and vertically centered items. Set the <code class=\"html-code\">id<\/code>-attribute to value <code class=\"html-code\">copyright-bar<\/code> and add the following elements to the row:<\/p><ol><li>Add a column with an automatic width. Add a paragraph within that column with the following text content: <i>Copyright \u00a9 2022 Company Name&amp;nbsp;  -&amp;nbsp;  Photography by John Doe<\/i>. Be sure to keep the non-breaking spaces (<code class=\"html-code\">&amp;nbsp;<\/code>). This ensures that there are two spaces around the hyphen.<\/li><li>Add a column (without setting a width). Copy the row, which wraps paragraph <i>Follow us<\/i> and the <code class=\"html-code\">&lt;nav&gt;<\/code>-element containing the social media links, from the top bar and paste it into the column. Make sure that the items within the row are horizontally centered.<\/li><li>Add a column with an automatic width that contains a duplicate of the <code class=\"html-code\">&lt;nav&gt;<\/code>-element containing items <i>FAQ<\/i> and <i>Work at Company Name<\/i> which you can find in the top bar.<\/li><\/ol><p>This should be the result:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-breakpoint-dt.png\" width=\"2375\" height=\"797\" alt=\"Footer breakpoint dt\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-breakpoint-dt-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"223.390625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"168.3125\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"126.03125\" data-img-of-m=\"fill\"><p>Switch to custom device <i>03 - LT - min - 1200x700<\/i>. The footer looks alright at this breakpoint.<\/p><p>Let's switch to custom device <i>05 - TL - min - 992x768<\/i>.<\/p><p>Set the width of the first column in the first row to 1\/2 for breakpoint <i>TL - Tablet (landscape)<\/i> by splitting up class <code class=\"html-code\">w-1\/\/3<\/code> into classes <code class=\"html-code\">w-1\/dt\/3<\/code>, <code class=\"html-code\">w-1\/lt\/3<\/code>, and <code class=\"html-code\">w-1\/tl\/2<\/code>.<\/p><p>Set the width of the second column to 1\/2 for the same breakpoint by splitting up class <code class=\"html-code\">w-4\/\/17<\/code> into classes <code class=\"html-code\">w-4\/dt\/17<\/code>, <code class=\"html-code\">w-4\/lt\/17<\/code>, and <code class=\"html-code\">w-1\/tl\/3<\/code>.<\/p><p>Set the width of the third column to 1\/2 by splitting up class <code class=\"html-code\">w-auto<\/code> into classes <code class=\"html-code\">dt__w-auto<\/code>, <code class=\"html-code\">lt__w-auto<\/code>, and <code class=\"html-code\">w-1\/tl\/2<\/code>. Split up class <code class=\"html-code\">mar-left-auto<\/code> into classes <code class=\"html-code\">dt__mar-left-auto<\/code> and <code class=\"html-code\">lt__mar-left-auto<\/code>, class <code class=\"html-code\">mar-right-auto<\/code> into classes <code class=\"html-code\">dt__mar-right-auto<\/code> and <code class=\"html-code\">lt__mar-right-auto<\/code>, class <code class=\"html-code\">pad-left-2<\/code> into classes <code class=\"html-code\">dt__pad-left-2<\/code> and <code class=\"html-code\">lt__pad-left-2<\/code>, and finally class <code class=\"html-code\">pad-right-2<\/code> into classes <code class=\"html-code\">dt__pad-right-2<\/code> and <code class=\"html-code\">lt__pad-right-2<\/code>.<\/p><p>Within the second row, for the second column, split up class <code class=\"html-code\">txt-center<\/code> into classes <code class=\"html-code\">dt__txt-center<\/code> and <code class=\"html-code\">lt__txt-center<\/code>. Now in the copyright bar, for the first column, split up class <code class=\"html-code\">w-auto<\/code> into classes <code class=\"html-code\">dt__w-auto<\/code> and <code class=\"html-code\">lt__w-auto<\/code>.<\/p><p>After you've done all of this, the footer should look like this, in its totality, at breakpoint <i>TL - Tablet (landscape)<\/i>:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-breakpoint-tl.png\" width=\"1860\" height=\"1413\" alt=\"Footer breakpoint tl\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-breakpoint-tl-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"506.140625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"381.34375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"285.5546875\" data-img-of-m=\"fill\"><p>Switch to custom device <i>07 - TP - min - 768x1024<\/i>. Again, the columns are squished.<\/p><p>Set the width of the first column of the first row to 1\/2 by adding class <code class=\"html-code\">w-1\/tp\/2<\/code>. Set the width of the second column to 2\/5 by adding class <code class=\"html-code\">w-2\/tp\/5<\/code>. Set the width of the third column to 1\/2 by adding class <code class=\"html-code\">w-1\/tp\/2<\/code>.<\/p><p>In the second row, let's give the first column a width of 1\/2 by splitting up class <code class=\"html-code\">w-auto<\/code> into classes <code class=\"html-code\">dt__w-auto<\/code>, <code class=\"html-code\">lt__w-auto<\/code>, <code class=\"html-code\">tl__w-auto<\/code>, and <code class=\"html-code\">w-1\/tl\/2<\/code>.<\/p><p>If you take a look at the footer now, you will see that the submit button <i>Subscribed<\/i> does no longer fit next to the email address field. To fix this, we have to take the following steps:<\/p><ol><li><p>For the column that wraps the email address field, split up class <code class=\"html-code\">w-auto<\/code> into classes <code class=\"html-code\">dt__w-auto<\/code>, <code class=\"html-code\">lt__w-auto<\/code> and <code class=\"html-code\">tl__w-auto<\/code>.<\/p><p>For that same column, split up class <code class=\"html-code\">mar-right-0<\/code> into the variants for breakpoints <i>TL<\/i>, <i>LT<\/i>, and <i>DT<\/i>.<\/p><\/li><li>For the column that wraps the submit button, do the same thing as you did in the first step and then split up class <code class=\"html-code\">mar-left-0<\/code> into variants for the same breakpoints.<\/li><li>Add classes <code class=\"html-code\">tp__vertical<\/code>, <code class=\"html-code\">ml__vertical<\/code>, and <code class=\"html-code\">mp__vertical<\/code> to the row that wraps these two columns.<\/li><li>For the email address field, split up class <code class=\"html-code\">border-rad-top-right-0<\/code> and class <code class=\"html-code\">border-rad-bottom-right-0<\/code> into variants for breakpoints <i>TL<\/i>, <i>LT<\/i>, and <i>DT<\/i>.<\/li><li>For the submit button, split up class <code class=\"html-code\">border-rad-top-left-0<\/code> and class <code class=\"html-code\">border-rad-bottom-left-0<\/code> into variants for the same breakpoints.<\/li><li>Add classes <code class=\"html-code\">tp__w100<\/code>, <code class=\"html-code\">ml__w100<\/code>, and <code class=\"html-code\">mp__w100<\/code> to the submit button. If you look at the newsletter form now, you will see that the email address field and the submit button do not yet fill up the available horizontal space. Let's fix that in the next step.<\/li><li>For the column that wraps the newsletter form, split up class <code class=\"html-code\">w-auto<\/code> into classes <code class=\"html-code\">tl__w-auto<\/code>, <code class=\"html-code\">lt__w-auto<\/code>, and <code class=\"html-code\">dt__w-auto<\/code>.<\/li><li>For the column that wraps the email address field, add classes <code class=\"html-code\">tp__self-stretch<\/code>, <code class=\"html-code\">ml__self-stretch<\/code>, and <code class=\"html-code\">mp__self-stretch<\/code>.<\/li><li>Add classes <code class=\"html-code\">tp__w100<\/code>, <code class=\"html-code\">ml__w100<\/code>, and <code class=\"html-code\">mp_w100<\/code> to the email address field.<\/li><\/ol><p>Let's take a look at the copyright bar. In the previous breakpoint, I decided to leave the text of the first column to wrap to two lines. That's okay, in my opinion. Now, three lines is too much, so take the following steps:<\/p><ol><li>Set the width of the first column to be 1\/1 for breakpoints <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>.<\/li><li>Set the width of the second and third column to be automatic for the same breakpoints.<\/li><\/ol><p>The copyright bar should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/copyright-bar-breakpoint-tp.png\" width=\"1152\" height=\"184\" alt=\"Copyright bar breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/copyright-bar-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"106.015625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"79.875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"59.8125\" data-img-of-m=\"fill\"><p>I find that the vertical spacing between these lines are too large. Let's reduce the spacing to <code class=\"css-code\">12.5px<\/code> by adding classes <code class=\"html-code\">tp__mar-bottom-3<\/code>, <code class=\"html-code\">ml__mar-bottom-3<\/code>, and <code class=\"html-code\">mp__mar-bottom-3<\/code> to all columns within the copyright bar.<\/p><p>Now you will see that the bottom spacing of the copyright bar is too small, this is because you reduced the bottom margins of the columns within the copyright bar. Obviously you could choose to leave the bottom margin of the last column to remain <code class=\"css-code\">25px<\/code>, but I recommend applying a bottom padding of <code class=\"css-code\">12.5px<\/code> to the copyright bar for breakpoints <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i> instead.<\/p><p>The reason for this is that if you ever decide to add a column <em>after<\/em> the currently last column, then instead of having <code class=\"css-code\">25px<\/code> of vertical space between the then second-last column and the new last column, there would still be <code class=\"css-code\">12.5px<\/code> of vertical space between them.<\/p><p>That is if you don't forget to change the bottom margin of the newly added column to <code class=\"css-code\">12.5px<\/code>, so I actually just contradicted myself. Do whatever you think is smart.<\/p><p>At the end, the copyright bar should look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/copyright-bar-final-breakpoint-tp.png\" width=\"1152\" height=\"165\" alt=\"Copyright bar final breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/copyright-bar-final-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"95.359375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"71.84375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"53.796875\" data-img-of-m=\"fill\"><p>The footer should now look like this:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-breakpoint-tp.png\" width=\"1152\" height=\"1352\" alt=\"Footer breakpoint tp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-breakpoint-tp-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"782.21875\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"589.34375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"441.3125\" data-img-of-m=\"fill\"><p>Switch to custom device <i>09 - ML - min - 576x280<\/i>. Once again, the columns are squished.<\/p><p>Let's set the width of the first column in the first row to 7\/11 by adding class <code class=\"html-code\">w-7\/ml\/11<\/code>. Set the width of the second column to 4\/11 by adding class <code class=\"html-code\">w-4\/ml\/11<\/code>. Set the width of the third column to the same width as the first column.<\/p><p>Scroll down to the second row. You can see that the newsletter and slogan are still placed next to each other. Let's change that, by making the second row go vertical for breakpoints <i>ML<\/i> and <i>MP<\/i>.<\/p><p>All of a sudden, there is now space for the submit button to be placed next to the email address field. Let's take that opportunity and remove class <code class=\"html-code\">ml__vertical<\/code> from the row that wraps the two columns of which the first contains the email address field, and the second column contains the submit button.<\/p><p>Now you see that you can connect the email address field and the submit button again, so take the following steps:<\/p><ol><li>Add class <code class=\"html-code\">ml__mar-right-0<\/code> to the column that wraps the email address field.<\/li><li>Add classes <code class=\"html-code\">ml__border-rad-top-right-0<\/code> and <code class=\"html-code\">ml__border-rad-bottom-right-0<\/code> to the email address field.<\/li><li>Add class <code class=\"html-code\">ml__mar-left-0<\/code> to the column that wraps the submit button.<\/li><li>Add classes <code class=\"html-code\">ml__border-rad-top-left-0<\/code> and <code class=\"html-code\">ml__border-rad-bottom-left-0<\/code> to the submit button.<\/li><\/ol><p>One thing not to forget when looking at breakpoints <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>, is to look at the <i>max<\/i>-version of the breakpoint. If you switch to custom device <i>08 - ML - max - 767x360<\/i>, for instance, you will see that the newsletter block now places the text and the newsletter form next to each other, because there is space to do so\u2026 regardless of the placeholder not being readable. This is the reason why I made you add <i>max<\/i>-versions of the breakpoints too.<\/p><p>So, to prevent this from happening, you should force the row, which wraps the column with the text and the column with the newsletter form, to be vertical for breakpoints <i>TP<\/i>, <i>ML<\/i>, and <i>MP<\/i>. After doing so, you should stretch the column that wraps the newsletter form by adding classes <code class=\"html-code\">tp__self-stretch<\/code>, <code class=\"html-code\">ml__self-stretch<\/code>, and <code class=\"html-code\">mp__self-stretch<\/code>.<\/p><p>Switch back to custom device <i>09 - ML - min - 576x280<\/i>. The copyright bar does not need any changes for this breakpoint, so this is how the footer should look like in its totality:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-breakpoint-ml.png\" width=\"864\" height=\"1316\" alt=\"Footer breakpoint ml\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-breakpoint-ml-w1000.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"1015.625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"765.21875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.2265625\" data-img-h-m=\"572.9921875\" data-img-of-m=\"fill\"><p>Switch to custom device <i>11 - MP - mid - 360x640<\/i>. The columns are squished again. Make the first row go vertical for this breakpoint, and the footer is done! Here it is in all its glory:<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/footer-breakpoint-mp.png\" width=\"720\" height=\"2762\" class=\"w50\" alt=\"Footer breakpoint mp\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2022\/09\/footer-breakpoint-mp-w500.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"333.4296875\" data-img-h-d=\"1279.03125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"251.21875\" data-img-h-t=\"963.671875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"188.109375\" data-img-h-m=\"721.5859375\" data-img-of-m=\"fill\"><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5625\" data-cache-vw-m=\"462\" data-cache-h-m=\"625.671875\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.21875\" data-img-h-m=\"204.2734375\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"376.21875\" data-img-h-m=\"211.6171875\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A CSS design system is the core of your web design, so it&#8217;s important that it brings flexibility and consistency throughout the design process. Making a CSS design system from scratch is, in my opinion, the second best thing in web design. The very best is using your own CSS design system to make beautiful <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":7284,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56,57],"tags":[],"class_list":["post-8543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a CSS design system from scratch. No framework, just CSS<\/title>\n<meta name=\"description\" content=\"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a CSS design system from scratch. No framework, just CSS\" \/>\n<meta property=\"og:description\" content=\"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-02T17:40:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:48:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1683\" \/>\n\t<meta property=\"og:image:height\" content=\"944\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"How to create a CSS design system from scratch?\",\"datePublished\":\"2022-09-02T17:40:35+00:00\",\"dateModified\":\"2025-07-18T14:48:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png\",\"articleSection\":[\"Blog\",\"CSS\",\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\",\"name\":\"Create a CSS design system from scratch. No framework, just CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png\",\"datePublished\":\"2022-09-02T17:40:35+00:00\",\"dateModified\":\"2025-07-18T14:48:09+00:00\",\"description\":\"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png\",\"width\":1683,\"height\":944,\"caption\":\"How to create a CSS design system from scratch?\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a CSS design system from scratch. No framework, just CSS","description":"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/","og_locale":"en_US","og_type":"article","og_title":"Create a CSS design system from scratch. No framework, just CSS","og_description":"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2022-09-02T17:40:35+00:00","article_modified_time":"2025-07-18T14:48:09+00:00","og_image":[{"width":1683,"height":944,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png","type":"image\/png"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"How to create a CSS design system from scratch?","datePublished":"2022-09-02T17:40:35+00:00","dateModified":"2025-07-18T14:48:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/"},"wordCount":9,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png","articleSection":["Blog","CSS","HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/","name":"Create a CSS design system from scratch. No framework, just CSS","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png","datePublished":"2022-09-02T17:40:35+00:00","dateModified":"2025-07-18T14:48:09+00:00","description":"In-depth, educational, step-by-step guide on how to create a CSS design system from scratch, including visualizations and a demo.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/how-to-create-a-css-design-system-from-scratch\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/09\/how-to-create-a-css-design-system.png","width":1683,"height":944,"caption":"How to create a CSS design system from scratch?"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=8543"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8543\/revisions"}],"predecessor-version":[{"id":9077,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8543\/revisions\/9077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/7284"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=8543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=8543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=8543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}