H1. Headline Level 1

Type Lockups

Different typography lockups can be produced by wrapping a collection of typography markup tags in an aside tag.

<aside>
    <h6>Labore harum molestias</h6>
    <h1>Amet consecte sit</h1>
    <p>Adipisicing labore amet exercitationem</p>
</aside>

Typography markup tags within the aside element do not have the default margin applied to standalone typography tags. This allows for type to sit closer together and present the expected lockup spacing. This can be customized for your desired styling.

Type lockups have the text-wrap setting of balance set on the aside level. This setting evens-out the number of characters in each line for improved readability.

Spacing

Spacing in No_Class is systematically sized relative to the base font size using the REM unit. These values are provided as CSS Variables.

.section {
    margin: var(--space-md) 0 0;
}

No_Class uses the very common 16px base as the scale. There are five levels of spacing that adapt at the prescribed breakpoints. To use the default set, refer to the variable names set at the beginning of the stylesheet at the root level.

A common, intentional spacing foundation can often elevate a good design system to a great design system. The fluid spacing scale is as follows:

Buttons

Buttons are simple, clickable elements. No_Class accounts for the different ways you might use buttons, such as the native button tag and submit-labeled input types within forms.

<button>Click me</button>

Simply add your own text within the button element tags. If you want to establish a hierarchy, add a .primary or .secondary class to the singular button style.

Lists

No funny business here. Lists are pretty traditional in No_Class. As they should be.

<ul>
    <li>Neptune</li>
    <li>Jupiter</li>
    <li>Saturn</li>
</ul>

The unordered and ordered list elements render as typical bulleted list items and sequentially numbered items. No_Class supports three sub-levels of list items for each OL and UL. While there isn't much done here, No_Class does something special with the menu element, which is just like the other two more popular list elements.

Menu

The menu element functions just like an ordered or unordered list. Carousels are not a default component available so a little CSS goes a long way here.

<menu>
    <li>Liz Lemon</li>
    <li>Jack Donaghy</li>
    <li>Tracy Jordan</li>
</menu>

This idea is founded in the theory that most people forgot or never knew about the menu element. Because of that, No_Class uses this very forgiving structure that shares so much with ol and ul to render a very common, modern component—the carousel.

There isn't much to this carousel, but the basis allows for easy adaptation for your designs.

Form

There are a lot of elements within the form element family. Many are accounted for here and this will likely be updated frequently.

<form>
    <input type='text'>Your Name</input>
    <input type='email'>YourName@website.com</input>
    <input type='submit'>Submit</input>
</form>

Different, special, unique updates to the HTML form elements mean that users can benefit from native functionality that improve common input patterns like dates, email addresses, simple integers, and many more. Moreover, simple HTML5 considerations allow you to set a variety of conditions to different fields to create rudimentary, but very efficient methods to ensure real, valid inputs from human beings. All to say, you will still require a certain level of PHP knowledge or be pretty good with your WordPress form plugin to take advantage of all of these modern benefits.

Table

Consider this mostly as a reminder that the tfoot element exists.

<table>
    <thead>
        <tr>
            <th>Planets</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mars</td>
            <td>Venus</td>
        </tr>
    </tbody>
</table>

There is not much to write home about this in No_Class apart from the alternate row background colors. This objectively improves readability. There's also a hover state applied. That can be removed or customized to your liking.

The most impactful consideration for tables in No_Class is the x-overflow at small breakpoints. Tables are a common culprit for unintentional horizontal scrolling on web pages—in this the Holy Lord's year of 2024. That won't happen here out of the box.

Progress

This is a very specific element that can be useful for the right application. It could be customized to be really effective.

<label for="prog">Current progress:</label>
<progress id="prog" value="28" max="100"></progress>

Pairing it with a label element and a trailing, related element can work well and prove very effective.

Dialog

There are many names for dialog. In some cultures, it goes by modal. In others—popup.

<dialog>
    <button id="exit">Close</button>
    <h4>Dialog Title</h4>
    <p>Body text lorem ipsum dolor sit amet.</p>
</dialog>

It remains to be seen why new names were introduced, but dialog is still supported, native, and it's just there. With a little bit of CSS, modern effects can be achieved and customized to express a lot of creativity with the reveal and hiding animations.

Modal was once Dialog

And it still is, you rotten scoundrels. Get off my lawn.

One nice thing is that you can use the esc key to close this... Dialog.

Blockquote

Another example of an overlooked element that can fit in for a common UI element—the card.

<blockquote>
    <span>Gravel is big dirt.</span>
    <small>Dr. Harry Vanderspeigle</small>
</blockquote>

Or container or widget or callout or tile. It's another one of those things that goes by many names. Adapting the blockquote element for this purpose of punctuating the monotony opens a lot of doors. There are no definite rules about what you can't put in blockquote. Why not images? Type Lockups? Links? All of it.

Details

The details element and its sister element, summary, represent an excellent, native solution to a popular UI component—the accordion.

<details>
    <summary>Read more</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
<details>
    <summary>Read more</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>

Accordions are one of the most reproduced components in different frameworks. It's unclear why a lot of people choose to reinvent this piece when with limited CSS, it is possible to attain a lot of the characteristics that make the New Coke alternatives so 'unique'.

Address

The element address is meant for contact information. It can include more than a physical address.

<address>
    <b>Camp Nou</b>
    <p>C. d'Aristides Maillol 12<br>
    08028 Barcelona<br>
    Spain</p>
</address>

It can be used in many different ways and contexts. The semantic nature of the tag is helpful for SEO and your own readability when writing markup.

DL, DD, DT

Description Lists elements, and its children DD and DT elements, are useful semantic tags to present Terms and corresponding Definitions.

<dl>
    <dt>Gluten Free</dt>
    <dd>Yes</dd>
</dl>

It may be easier to think of these more simply as two-column tables. No_Class styles this family of elements in such a way with minimal border-bottoms. This can of course be restyled to suit your needs, but the pattern of this markup should follow 'this-for-that'.

Nav

Nav is an element dedicated for a list of links. This can serve as a simple list of internal navigation links, a table of contents, or index of references.

<nav>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

While there are no firm guidelines on how to organize content within a nav element, common practices include listing out simple anchor link tags or adding list item elements within an unordered list within the nav element. While there is no absolute right way to go about it, No_Class supports the former method of simply placing a elements within the nav element.