Classless CSS Test Suite

This document serves as a test suite for classless CSS frameworks. It's designed to ensure your styles add just the right seasoning to every semantic HTML element, checking for visual consistency and thoughtful defaults. Try selecting text, hovering over links and buttons, and interacting with the form elements below to get a taste of the design.


Text & Typography

A Dash of Style

Enhancing Every Element

Flavorful Typography

Bringing Out the Best

Subtle Seasoning
The Essential Base

This is a standard paragraph. It can contain strong ingredients, emphasized notes, and links that blend seamlessly. You can also highlight key flavors using the `mark` tag. Other inline elements include discarded ideas, fresh additions, underlined truths, outdated recipes, inline salt crystals, subtle hints, and elevated concepts.

Another paragraph to demonstrate vertical margin. Every grain contributes to the overall profile. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Grouping & Quoting

Blockquotes and citations are styled as follows:

Without salt, there is no flavor. It is a fundamental element, like life itself.

Attributed to ancient chefs

Pre-formatted text is often used for recipes or process notes:

function addSalt(dish, amountInGrams) {
      if (amountInGrams > 0) {
        dish.flavorProfile.salinity += amountInGrams * 0.1;
        console.log(`Added ${amountInGrams}g of salt to the ${dish.name}.`);
      } else {
        console.log("No salt added. Proceed with caution.");
      }
    }

Lists

These are standard list types, ready for your ingredients or instructions.

Unordered List (Salt Types)

Ordered List (Simple Recipe Steps)

  1. Season protein generously.
  2. Sear until golden brown.
  3. Rest before serving.

Definition List (Culinary Terms)

Umami
A savory taste, one of the five basic tastes, along with sweet, sour, bitter, and salty.
Brine
Water saturated with salt, often used for curing or preserving foods.

Tables

Tables organize your data neatly, like ingredients in a pantry.

Salt Origin Primary Use Texture Notes
Atlantic Ocean Finishing Flaky Bright, clean taste.
Underground Mine Brining Coarse Good for larger cuts of meat.
Evaporated Solution Baking Fine Dissolves quickly.

Media & Figures

Figures can be used to wrap images, iframes, or other media with a caption.

A placeholder image of salt crystals
Fig. 1: Close-up of salt crystals, showing their unique forms.
Fig. 2: An embedded video demonstrating salt harvesting methods.

Forms & Inputs

Ingredient Details
Flavor Profile & Usage
Purpose

How will this salt be primarily used?




Actions & Buttons

Hover and click the buttons to test their different states. A good framework ensures these are well-defined.

See More Ingredients

Disabled States

Ingredient Unavailable