Concepts

Below are some basic concepts/ideas for the CSS library, split into individual components and discussed individually

§ Classless CSS

§ Concept

missing renders well out of the box with Vanilla HTML, like a classless CSS library such as pico.css

§ Examples

pico.css provides a good base for what we are looking for:

https://picocss.com/examples/preview/

§ Semantic HTML Power Structures

§ Concept

missing takes advantage of semantic, lesser used tags such as nav, main and section to allow for more elaborate layouts in pure HTML

Moving beyond the pico level of styling typically requires adding classes to the DOM. To avoid this, we want to instead offer "Power Structures" which are opinionated uses of semantic HTML that will be rendered in what, in other CSS libraries, would typically require components.

§ Examples

The main tag would auto-center and pad at a reasonable (configurable) max-width, similar to a Bootstrap container, though not necessarily relying on fixed breakpoints:

<main>
  ... content that will be centered and max-widthed
</main>

Using a nav element with inline sub-elements will create a horizontal nav bar

<nav>
  <span>Foo Company LLC</span> | <a href="/foo">Foo</a> | <a href="/foo">Foo</a> | <a href="/foo">Foo</a>
</nav>

Using a nav element with block sub-elements will create a vertical nav bar

<nav>
  <ul>
    <li>Foo Company LLC</li>
    <li><a href="/foo">Foo</a></li>
    <li><a href="/foo">Foo</a></li>
    <li><a href="/foo">Foo</a></li>
  </ul>
</nav>

Using a form element with inline sub-elements will create a horizontal form (taken from pure.css)

<form>
    <fieldset>
        <legend>A compact inline form</legend>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <label for="default-remember">
            <input type="checkbox" id="default-remember" /> Remember me
        </label>
        <button type="submit">Sign in</button>
    </fieldset>
</form>

Using a form element with block sub-elements will create a horizontal, label aligned form (taken from pure.css)

(Maybe label should be nested in all cases?)

<form>
    <fieldset>
        <p>
            <label for="aligned-name">Username</label>
            <input type="text" id="aligned-name" placeholder="Username" />
            <span>This is a required field.</span>
        <p>
            <label for="aligned-password">Password</label>
            <input type="password" id="aligned-password" placeholder="Password" />
        <p>
            <label for="aligned-email">Email Address</label>
            <input type="email" id="aligned-email" placeholder="Email Address" />
        <p>
            <label for="aligned-foo">Supercalifragilistic Label</label>
            <input type="text" id="aligned-foo" placeholder="Enter something here..." />
        <p>
            <label for="aligned-cb" class="pure-checkbox">
                <input type="checkbox" id="aligned-cb" /> I&#x27;ve read the terms and conditions
            </label>
            <button type="submit">Submit</button>
    </fieldset>
</form>

§ Components

§ Concept

missing offers "High Power" classes that capture high level components on, as much as is possible, a single CSS element. These classes may change the appearance of descendant elements. They should either be designed for use with a small amount of content, or restrict their reach into their children with >, etc. They can be expanded when @scope becomes standard and widespread.

Here is a card:

<div role="card">
  <img alt="" />
  <div>
    <!-- our content in here will auto-flow now -->
  </div>
</div>

would render as a card element, as defined here:

§ ARIA-based

In cases where it's applicable, implementations of the patterns described in WAI-ARIA Authoring Guidelines would be styled appropriately. Take tabs for example:

<div role="tablist">
  <a role="tab" href="/foo">Tab 1</a>
  <a role="tab" href="/foo">Tab 2</a>
  <a role="tab" href="/foo">Tab 3</a>
</div>

§ Built-in components

We would like to see the following components:

§ Utility Classes

§ Concept

missing offers a set of utility classes that captures the 80/20 of libraries like tailwinds

TODO: good examples of utility class usage