A page written with bare tags, beside elements, and how to override one tag.
A page of plain HTML needs no stylesheet knowledge. This article has no class on any tag.
Three weeks and one backpack.
The pack stayed under 8 kg, and nothing in it was bought for the trip.
charger for everythingTake half the clothes and twice the money.
Mostly the same things, a little more worn.
<article>
<header>
<hgroup>
<h1>Notes from the road</h1>
<p>Three weeks and one backpack.</p>
</hgroup>
</header>
<p>
The pack stayed under <strong>8 kg</strong>, and nothing in it was
bought for the trip.
</p>
<h2>What went in</h2>
<ul>
<li>Two shirts</li>
<li>One jacket</li>
<li>A <code>charger</code> for everything</li>
</ul>
<blockquote>
<p>Take half the clothes and twice the money.</p>
</blockquote>
<h2>What came back</h2>
<p>Mostly the same things, a little more worn.</p>
</article>
The base and the elements share a page. Each element sets its own colours, size and spacing, so the base never leaks into it. A button link keeps its colour and the card title keeps its size, while the paragraphs around and inside them are bare.
A bare paragraph beside an element, and a link that is a button:
Per month
Paragraphs in the card body are bare too, and the card header keeps its own title size.
<h2>Plans</h2>
<p>A bare paragraph beside an element, and a link that is a button:</p>
{ui card, title: 'Pro', description: 'Per month'}
<p>
Paragraphs in the card body are bare too, and the card header keeps
its own title size.
</p>
{block footer}
{ui button, title: 'Choose', href: '#' /}
{/block}
{/ui}
To change one tag, give it a class or a utility. It beats the base without raising specificity and without a reset.
<h2 class="text-sm uppercase">A small heading</h2>
<p class="text-muted-foreground">A muted paragraph.</p>
<p>
A link with
<a
href="#"
class="no-underline"
>no underline</a>.
</p>
To change a tag everywhere, write a rule for it in the site's own CSS, after the preset's, the way theming does for tokens.