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.
19 lines
1.0 KiB
19 lines
1.0 KiB
4 years ago
|
<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>
|
||
|
|
|
||
|
|
|