Skip to content

Quiet Restyle

Quiet Restyle™ is an opinionated CSS reset that provides consistent styles to HTML documents by making use of Quiet's design token API. Restyle is entirely optional, but it's a great way to kick off new websites and apps without worrying about initial styles. As you customize your theme with CSS, Restyle will adapt accordingly.

You can think of Restyle as a smarter, prettier user agent stylesheet.

Usage

To add Restyle to your app, add the following markup to the <head> of your document. If you haven't included a theme yet, make sure to add the default theme as well. 

<!-- Default theme (if not already installed) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/themes/quiet.css">

<!-- Quiet Restyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/themes/restyle.css">

Restyle uses your theme's variables as a baseline, so things will look familiar right away.

Restyle is just a starting point. Feel free to customize any of its styles in your own CSS by overriding the properties you want to change!

Style demonstration

The following content shows how Restyle affects native HTML elements using the current theme. Feel free to inspect the source to view the markup.

Heading level one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor posuere ac ut consequat semper viverra nam libero justo.

Heading level two

Vulputate mi sit amet mauris commodo quis imperdiet. Pellentesque habitant morbi tristique senectus et netus et. Dolor morbi non arcu risus quis varius.

Heading level three

Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Vel quam elementum pulvinar etiam non quam lacus suspendisse.

Heading level four

Fringilla urna porttitor rhoncus dolor purus. Cras semper auctor neque vitae tempus quam pellentesque nec. Adipiscing bibendum est ultricies integer quis auctor elit.

Heading level five

Ultrices dui sapien eget mi proin sed libero enim sed. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Id diam vel quam elementum pulvinar etiam non quam. Nullam ac tortor vitae purus. Proin sed libero enim sed faucibus turpis in. Ac turpis egestas maecenas pharetra convallis.

Heading level six

Amet nisl purus in mollis nunc sed id semper risus. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Consectetur lorem donec massa sapien.

Paragraphs

Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Viverra nam libero justo laoreet. Pellentesque habitant morbi tristique senectus et. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Scelerisque varius morbi enim nunc faucibus a pellentesque sit.

Nunc aliquet bibendum enim facilisis gravida neque convallis a. Proin nibh nisl condimentum id venenatis. Ut tristique et egestas quis ipsum suspendisse ultrices. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.

Volutpat blandit aliquam etiam erat velit scelerisque. Non sodales neque sodales ut etiam sit amet. Cras tincidunt lobortis feugiat vivamus at augue eget arcu.

Inline elements

bold

italic

underline

delete

insert

strike through

small text

subscriptsub

superscriptsup

hyperlinks

inline code

highlighted

abbreviation

keyboard

Lists

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item
  • Fourth item
  1. First item
  2. Second item
    1. Nested item
    2. Another nested item
  3. Third item
  4. Fourth item

Block quotes

Neither the mouse nor the boy was the least bit surprised that each could understand the other. Two creatures who shared a love for web design naturally spoke the same language.

Code blocks 

// do a thing
export function thing(arg) {
  if (arg) {
    return true;
  } else {
    return false;
  }
}

Tables

First column Second column Third column
Proin sed libero Amet nisl Blandit volutpat
Viverra nam Nunc aliquet Condimentum vitae
Placerat duis Eu volutpat Morbi enim
Pellentesque primis Aliquam etiam Fusce pharetra
4,567 3,210 7,654

Details

Amet nisl purus

Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Volutpat blandit aliquam etiam erat velit scelerisque. Non sodales neque sodales ut etiam sit amet. Cras tincidunt lobortis feugiat vivamus at augue eget arcu.

Scelerisque varius

Pretium vulputate sapien nec sagittis. Pretium fusce id velit ut. Justo eget magna fermentum iaculis eu non diam phasellus. Purus in mollis nunc sed. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum.

A diam sollicitudin

Enim diam vulputate ut pharetra sit amet aliquam id diam. Suscipit tellus mauris a diam maecenas sed enim ut sem. Sit amet mattis vulputate enim nulla. Tristique et egestas quis ipsum. Volutpat lacus laoreet non curabitur gravida arcu.

Definition Lists

First definition
Morbi tempus iaculis urna id volutpat lacus. Tincidunt eget nullam non nisi. Viverra mauris in aliquam sem fringilla ut.
Second definition
Vel quam elementum pulvinar etiam non quam lacus suspendisse. Nisl nisi scelerisque eu ultrices vitae auctor eu.
Third definition
Odio facilisis mauris sit amet massa vitae. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Eu ultrices vitae auctor eu augue ut.

Figures

Three gray kittens on a wood floor
Non curabitur gravida arcu ac tortor dignissim convallis. Aliquet lectus proin nibh nisl condimentum id. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.

Media

A kitten lays on the bed with her head upside down

Fieldsets

Legend Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas integer eget aliquet nibh praesent tristique magna.

Form controls

For consistency, native form controls are styled to look similar to Quiet form controls.

Sizes

Appearances

Types

Other controls

Dialogs

This is a native dialog.

Utility classes

Restyle ships with a handful of helpful utility classes. Use class="..." to apply them to any HTML element.

  • visually-hidden - Use when an element must be accessible to assistive technologies like screen readers but should remain hidden in other circumstances.
  • visually-hidden-focusable - The same as visually-hidden, but it will show when the element or any of its children receive focus. Useful for things like "skip to content" links.
  • visually-hidden-label - Apply this to any Quiet form control that has a label part to visually hide the label.
  • visually-hidden-description - - Apply this to any Quiet form control that has a description part to visually hide the description.
Search this website Toggle dark mode Get the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X
    No results found