An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fsckcss/public/code/Youtube.notes.html

19 lines
1.0 KiB

<p>Youtube's design isn't too difficult once you figure out they're a giant video with a ton of tiles for everything. Related video tiles weirdly come in two sizes, so I just shrink them with this:</p>
<pre>
<code class="language-css">
card.small {
--img-width: 100px;
--img-height: 70px;
--font-size: 0.6em;
}
</code>
</pre>
<p>What's interesting about this is I'm using a class <b>small</b> to tag those small cards (aka tiles) but I'm changing their dimensions through the use of CSS variables. The alternative is to alter the CSS settings, but with this I don't have to remember to find everywhere I did that if I ever change the <b>card</b>. As long as those variables are maintained I can change the design of <b>card</b> and everything should keep working across the site.
</p>
<p>I think of this as being closer to how you can subclass in an Object Oriented Programming language. I'm "subclassing" the base <b>card</b> to create <b>card.small</b> and then changing the variables to define what this new variant means.</p>