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/Tabs.notes.html

36 lines
1.8 KiB

<p>This demo has two versions. One just shows how to do a basic layout with 3 tabs and no
interaction. Using flexbox I'm able to simplify the HTML with only <b>a</b> tags rather than the usual pattern of using a <b>ul/li</b> combination. I don't have to use <b>a</b> tags at all and can use anything I can attach an <b>onClick</b> event handler to.
</p>
<p>The second demo does a complete set of 3 tabs with associated panels and the JavaScript necessary to make them work. The code you see here is <a href="https://svelte.dev">Svelte</a> template code to make the example more succinct, and to provide the handlers and interaction. You could also do this with Vanilla JavaScript with not much more hassle.
</p>
<p>The interactive demo isn't terribly difficult. You need to use a class to toggle the visuals for "active" vs. inactive tabs and panels, and you have to mark the inactive panels <b>display: none</b> so they aren't visible.
</p>
<pre>
<code class="language-css">
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}
</code>
</pre>
<p>It's the only place you need a class for this simple demo. Using classes to design state changes and different
appearances works well since the alternative would be to somehow change the tags, and that won't work.
</p>
<p>Finally, I continue to use my more explicit style of <b>tabs a</b> rather than using classes to avoid specifying the structure I want to select. I would say you don't have to do this, but it does make it a lot easier to find the HTML that a piece of CSS applies to, and also makes sure you aren't accidentally applying a style from somewhere else via the cascade.
</p>