elements #
fuz_css applies default styles to semantic HTML elements in its 🗎 reset stylesheet. The styles use variables and include appropriate spacing, so plain HTML gets
user-friendly styling and theme integration automatically. The defaults are low specificity using :where so they're easy to override, and you can opt out by adding .unstyled to an element.
#
Paragraph elements are unstyled except for spacing. Divs are totally unstyled.
p
p
p
p
This paragraph has no bottom margin because default spacing is omitted for the :last-child of all otherwise-spaced elements, streamlining the common case. This has some unfortunate edge cases
that can usually by solved by adding .mb_lg. Coupling markup structure to styles
like this may be something we change, feedback is
welcome.
#
a link with .selected
a link with .unstyled
#
code
code with .unstyled
#
a pre is
preformatted
text#
Click this summary to see the rest of the details
The children of the details excluding the summary.
<details>
<summary>
Click this <code>summary</code>
to see the rest of the <code>details</code>
</summary>
<p>The children of the <code>details</code> excluding the <code>summary</code>.</p>
<Code code={'...'} />
</details>details and summary with .unstyled
unstyled details content#
blockquote
blockquote with .unstyled#
#
#
<header>header</header> #
<footer>footer</footer> #
<section>section</section> Sections have a bottom margin, except for the last in the list.
ul #
ul- a
- b
- see
ul with .unstyled
- a
- b
- see
ol #
ol- one
- two
- etc
ol with .unstyled
- one
- two
- etc
menu #
menumenu with .unstyled
#
<table>
<thead>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
</thead>
<tbody>
<tr><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td></tr>
</tbody>
</table> | th | th | th |
|---|---|---|
| td | td | td |
| td | td | td |
| td | td | td |
<table class="width:100%">
...
</table> | th | th | th |
|---|---|---|
| td | td | td |
| td | td | td |
| td | td | td |
TODO more!