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.
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.
Blockquotes and citations are styled as follows:
Attributed to ancient chefsWithout salt, there is no flavor. It is a fundamental element, like life itself.
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.");
}
}
These are standard list types, ready for your ingredients or instructions.
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. |
Figures can be used to wrap images, iframes, or other media with a caption.