CSS Utilities

A handful of optional CSS utilities are provided to make common things a little easier. The goal isn't to be comprehensive, but to reduce boilerplate in your stylesheet.

Usage Jump to heading

To add the CSS utilities 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-browser@1.0.0/dist/themes/quiet.css">

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

Flex utilities Jump to heading

The quiet-inline class creates a flex row that wraps when necessary. Use the gap property to adjust the spacing between items.

<div class="quiet-inline">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Similarly, the quiet-stack class creates a flex column. Use the gap property to adjust the spacing between items.

<div class="quiet-stack">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Add class="quiet-side-label" to any Quiet form control that has a label, description, and text box to move the label to the side. To change the width of the label, set the --label-width custom property on the respective elements.

<quiet-text-field 
  class="quiet-side-label"
  style="--label-width: 8ch;"
  label="Name" 
  description="What do you like to be called?" 
></quiet-text-field>

<br>

<quiet-color-input
  class="quiet-side-label"
  style="--label-width: 8ch;"
  name="color" 
  label="Color" 
  description="Make it pop"
></quiet-color-input>

<br>

<quiet-slider
  class="quiet-side-label"
  style="--label-width: 8ch;"
  label="Quantity" 
  description="How much do you want?"
  with-markers
  min="0"
  max="10"
  value="5"
></quiet-slider>

<br>

<quiet-text-area 
  class="quiet-side-label"
  style="--label-width: 8ch;"
  name="Instructions" 
  description="Tell us the good and the bad"
  label="Feedback"
></quiet-text-area>

The quiet-side-label class doesn't work on native form controls.

Visually hidden classes provide ways to hide content from the screen while maintaining accessibility for assistive technologies.

quiet-vh (visually hidden) - Use when an element must be accessible to assistive technologies like screen readers but should remain hidden in other circumstances.
quiet-vh-focusable - The same as quiet-vh, but it will show when the element or any of its children receive focus. Useful for things like "skip to content" links.
quiet-vh-label - Apply this to any Quiet form control that has a label part to visually hide the label.
quiet-vh-description - Apply this to any Quiet form control that has a description part to visually hide the description.

CSS Utilities

Usage Jump to heading #

Flex utilities Jump to heading #

Side labels Jump to heading #

Visually hidden Jump to heading #

Usage Jump to heading

Flex utilities Jump to heading

Side labels Jump to heading

Visually hidden Jump to heading