@subtributary/drip

v0.2.0

Published

21 days ago

A base stylesheet for globalized websites.

0High
0Medium
0Low

Drip v0.2

Drip is a minimal CSS library designed to be a base stylesheet for globalized projects. It supports all common writing directions with reasonable default styles.

Quick Start

These options are available for getting Drip:

Clone the repo: git clone https://github.com/subtributary/drip.git
Install with npm: npm install @subtributary/drip

After getting the CSS file, include it in your website before any custom styles:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Drip example</title>
  <link rel="stylesheet" href="drip.css">
</head>
<body>
<!-- website content goes here -->
</body>
</html>

Lay out your website with semantic HTML and Drip's layout classes:

.container — adds padding to a block element and limits its size along the axis of text flow.
.container-full — adds padding to a block element.
.row — arranges elements on the same line.

The semantic HTML and layout classes will automatically adapt to the writing mode and text direction. These can be set on the html tag:

<html lang="en" dir="ltr" class="horizontal-tb">

The dir attribute is the standard way to set the writing direction. To set the writing mode, use one of these Drip classes:

horizontal-tb
sideways-lr
sideways-rl
vertical-lr
vertical-rl

You can wire these up to change according to the user's locale! 🙂

Classes and components

The layout classes are discussed in "Quick Start" above. These are the rest of the classes:

dropdown — creates a dropdown component similar to a select.
form-group — wraps a form label, input, and help text together.
visually-hidden — hides an element from view but makes it readable by screen readers.
text-muted — renders text in a muted color.

Dropdown

Use the dropdown class to create a customizable dropdown component.

<div class="dropdown">
  <button popovertarget="dropdown">
    Toggle dropdown
  </button>
  <div id="dropdown" popover>
    Dropdown contents go here.
  </div>
</div>

Drip styles the dropdown button and positions the dropdown next to it. Further styling depending on the context is usually needed. For example, the following customization is for a dropdown at the end of a navbar:

.dropdown[popover] /* or id */ {
  inset: auto;
  inset-inline-end: anchor(end);
  height: fit-content;
  width: fit-content;
}

Drip only positions the dropdown. Its contents are not styled any different from content outside the dropdown. You can use the CSS target .dropdown>[popover] to specially style the content.

Forms

Form elements in the normal block flow should be wrapped by a .form-group to apply proper spacing. The .form-group class may be omitted where the block flow and spacing are unusual; for example, in a website navbar. The following example is for form elements in the main content.

<div class="row">
  <div class="form-group">
    <label for="date">Date</label>
    <input type="date" id="date" name="date">
  </div>
  <div class="form-group">
    <label for="time">Time</label>
    <input type="time" id="time" name="time">
    <small class="text-muted">This is help text.</small>
  </div>
</div>

Limitations

Ordered lists (<ol>) are styled for romance languages. You may wish to restyle them per the locale.
Drip targets major devices and browser versions from the past five years.
Drip's dropdown component, an exception, may not work on browsers before April 2024.

License

Drip is free and unencumbered software released into the public domain. For more information, see https://unlicense.org or the LICENSE file.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme