Images & Media
<figure>
<img src="placeholder.png" alt="A placeholder image" loading="lazy">
<figcaption>A placeholder image with a figcaption.</figcaption>
</figure>A classless CSS library. Include sc.min.css (2.4KB w/max compression) and write semantic HTML.
The expanded version is sc.css (11.9KB).
Every example below has the code that produced the example.
For icons, the grouped SVG files are svg sprite sheets. See Icon Reference for sample code to use individual svg icons and hover the icon for it's name.
For layout prefer Grid Layout. For some inline cases, Flex Layout might be a better choice.
<form onsubmit="return false;">
<fieldset>
<legend>Account Information</legend>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Jane Doe">
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<label for="url">Website</label>
<input type="url" id="url" placeholder="https://example.com">
<label for="phone">Phone</label>
<input type="tel" id="phone" placeholder="+1 (555) 000-0000">
<label for="date">Date</label>
<input type="date" id="date">
<label for="number">Quantity</label>
<input type="number" id="number" min="0" max="100" value="1">
<label for="search">Search</label>
<input type="search" id="search" placeholder="Search...">
<label for="color">Favorite Color</label>
<input type="color" id="color" value="#2563eb">
<label for="range">Range</label>
<input type="range" id="range" min="0" max="100" value="50">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="country">Country</label>
<select id="country">
<option value="" disabled selected>Select a country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
</select>
<label for="bio">Bio</label>
<textarea id="bio" rows="4" placeholder="Tell us about yourself..."></textarea>
<p>
<label><input type="checkbox" checked> Subscribe to newsletter</label>
<label><input type="checkbox"> Accept terms and conditions</label>
</p>
<p>
<label><input type="radio" name="plan" checked> Free</label>
<label><input type="radio" name="plan"> Pro</label>
<label><input type="radio" name="plan"> Enterprise</label>
</p>
</fieldset>
<p>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
</p>
</form><form onsubmit="return false;">
<fieldset>
<legend>Account Information</legend>
<div>
<label for="i-name">Full Name</label>
<input type="text" id="i-name" placeholder="Jane Doe">
<label for="i-email">Email</label>
<input type="email" id="i-email" placeholder="[email protected]">
<label for="i-password">Password</label>
<input type="password" id="i-password" placeholder="Enter password">
<label for="i-url">Website</label>
<input type="url" id="i-url" placeholder="https://example.com">
<label for="i-phone">Phone</label>
<input type="tel" id="i-phone" placeholder="+1 (555) 000-0000">
<label for="i-date">Date</label>
<input type="date" id="i-date">
<label for="i-number">Quantity</label>
<input type="number" id="i-number" min="0" max="100" value="1">
<label for="i-search">Search</label>
<input type="search" id="i-search" placeholder="Search...">
<label for="i-color">Favorite Color</label>
<input type="color" id="i-color" value="#2563eb">
<label for="i-range">Range</label>
<input type="range" id="i-range" min="0" max="100" value="50">
</div>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<div>
<label for="i-country">Country</label>
<select id="i-country">
<option value="" disabled selected>Select a country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
</select>
<label for="i-bio">Bio</label>
<textarea id="i-bio" rows="4" placeholder="Tell us about yourself..."></textarea>
<span>
<label><input type="checkbox" checked> Subscribe to newsletter</label>
<label><input type="checkbox"> Accept terms and conditions</label>
</span>
<span>
<label><input type="radio" name="i-plan" checked> Free</label>
<label><input type="radio" name="i-plan"> Pro</label>
<label><input type="radio" name="i-plan"> Enterprise</label>
</span>
</div>
</fieldset>
<p>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
</p>
</form>
<button onclick="document.getElementById('demo-dialog').showModal()">Open Dialog</button>
<dialog id="demo-dialog" onclick="if(event.target===this)this.close()" style="padding: 0;">
<div style="padding: 0 1.5rem; background: var(--bg);">
<h3>Dialog Title</h3>
<p>This is a native HTML dialog element. Click the backdrop or the Close button to dismiss.</p>
<p>
<button onclick="document.getElementById('demo-dialog').close()">Close</button>
</p>
</div>
</dialog><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>This is a regular paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text can be bold, italic, or both.
You can highlight text with the mark element.
This is small text and this is abbr with a title.
Subscript: H2O and Superscript: E=mc2
This text has been deleted and this has been inserted.
Press Ctrl+S to save.
<p>This is a regular paragraph.</p>
<p>Text can be <strong>bold</strong>, <em>italic</em>, or <strong><em>both</em></strong>.</p>
<p>You can <mark>highlight text</mark> with the mark element.</p>
<p>This is <small>small text</small> and this is <abbr title="abbreviation">abbr</abbr> with a title.</p>
<p>Subscript: H<sub>2</sub>O and Superscript: E=mc<sup>2</sup></p>
<p>This text has been <del>deleted</del> and this has been <ins>inserted</ins>.</p>
<p>Press <kbd>Ctrl+S</kbd> to save.</p>This is a standard link.
This is a link to an external site.
Need something that looks like a link but triggers a JavaScript action instead of navigating? See Link Buttons in the Buttons section.
<p>This is a <a href="#">standard link</a>.</p>
<p>This is a <a href="https://example.com">link to an external site</a>.</p><h3>Unordered List</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Nested item A</li>
<li>Nested item B</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three
<ol>
<li>Sub-step 3.1</li>
<li>Sub-step 3.2</li>
</ol>
</li>
<li>Step four</li>
</ol>
<h3>Definition List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style and layout web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language for adding interactivity to web pages.</dd>
</dl>Simplicity is the ultimate sophistication.
- Leonardo da Vinci
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
<p><small>- Leonardo da Vinci</small></p>
</blockquote>Inline code: const x = 42;
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));Error: file not found
<p>Inline code: <code>const x = 42;</code></p>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));</code></pre>
<p><samp>Error: file not found</samp></p>| Name | Type | Size | Status |
|---|---|---|---|
| index.html | HTML | 4.2 KB | Active |
| style.css | CSS | 8.1 KB | Active |
| app.js | JavaScript | 12.7 KB | Draft |
| old.css | CSS | 3.0 KB | Deprecated |
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>index.html</td>
<td>HTML</td>
<td>4.2 KB</td>
<td>Active</td>
</tr>
<tr>
<td>style.css</td>
<td>CSS</td>
<td>8.1 KB</td>
<td>Active</td>
</tr>
<tr>
<td>app.js</td>
<td>JavaScript</td>
<td>12.7 KB</td>
<td>Draft</td>
</tr>
<tr>
<td>old.css</td>
<td>CSS</td>
<td>3.0 KB</td>
<td>Deprecated</td>
</tr>
</tbody>
</table><figure>
<img src="placeholder.png" alt="A placeholder image" loading="lazy">
<figcaption>A placeholder image with a figcaption.</figcaption>
</figure>Simple Clean CSS is a classless CSS library that styles raw HTML elements to look clean and modern out of the box. No classes needed.
Just add <link rel="stylesheet" href="sc.min.css"> to your HTML and write semantic markup. That's it.
Yes, this one uses the open attribute so it starts expanded.
<details>
<summary>What is Simple Clean CSS?</summary>
<p>Simple Clean CSS is a classless CSS library that styles raw HTML elements to look clean and modern out of the box. No classes needed.</p>
</details>
<details>
<summary>How do I use it?</summary>
<p>Just add <code><link rel="stylesheet" href="sc.min.css"></code> to your HTML and write semantic markup. That's it.</p>
</details>
<details open>
<summary>Is this details element open by default?</summary>
<p>Yes, this one uses the <code>open</code> attribute so it starts expanded.</p>
</details><h3>Progress</h3>
<label for="progress-bar">Upload progress:</label>
<progress id="progress-bar" value="65" max="100">65%</progress>
<h3>Meter</h3>
<label for="disk-usage">Disk usage:</label>
<meter id="disk-usage" value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.5">70%</meter>The event starts at .
Content above the rule.
Content below the rule.
___ ___ ___ ___ ___
/ __|/ __/ __/ __/ __|
\__ \ (_| (__\__ \__ \
|___/\___\___|___/___/
<address>
123 Main Street<br>
Springfield, IL 62701<br>
United States
</address>
<p>The event starts at <time datetime="2026-03-15T09:00">9:00 AM on March 15, 2026</time>.</p>
<hr>
<pre>
___ ___ ___ ___ ___
/ __|/ __/ __/ __/ __|
\__ \ (_| (__\__ \__ \
|___/\___\___|___/___/
</pre>All icons are available as SVG symbols in the grouped SVG files.
NOTE: these files are Simple Clean Svg Sprite Sheets - scsss:
Use them with the <svg><use> pattern:
<svg style="width: 24px; height: 24px;"><use href="scsss-nav.svg#icon-add"/></svg>Hover over the icon to see it's name.
These icons are in the file: scsss-nav.svg
These icons are in the file: scsss-files.svg
These icons are in the file: scsss-editing.svg
These icons are in the file: scsss-view.svg
These icons are in the file: scsss-comms.svg
These icons are in the file: scsss-social.svg
These icons are in the file: scsss-media.svg
These icons are in the file: scsss-data.svg
These icons are in the file: scsss-status.svg
These icons are in the file: scsss-utility.svg
This library uses CSS custom properties (variables) that you can override to customize colors, spacing, and more. Override any of these variables in your own CSS to customize the appearance:
| Variable | Default Value | Purpose |
|---|---|---|
--font-sans |
system-ui, sans-serif | Default font family for text |
--font-mono |
ui-monospace, monospace | Monospace font for code |
--text |
#1a1a1a | Primary text color |
--text-heading |
#111 | Heading text color |
--text-muted |
#374151 | Muted/secondary text |
--text-light |
#6b7280 | Light text color |
--bg |
#fff | Primary background color |
--bg-soft |
#f9fafb | Soft background (nav, details) |
--bg-muted |
#f3f4f6 | Muted background |
--bg-accent |
#e5e7eb | Accent background |
--border |
#d1d5db | Border color |
--border-w |
0.0625rem | Border width |
--mark |
#fff3a0 | Highlight/mark color |
--link |
#2563eb | Link and submit button color |
--link-hover |
#1d4ed8 | Link hover color |
--link-visited |
#7c3aed | Visited link color |
--focus-ring |
rgba(37, 99, 235, 0.15) | Focus ring color |
--btn-active |
#bfc4cc | Button active state |
--btn-text-on |
#fff | Text color on colored buttons |
--submit-active |
#1e40af | Submit button active state |
--danger |
#ea580c | Danger/reset button color |
--danger-hover |
#c2410c | Danger button hover |
--danger-active |
#9a3412 | Danger button active state |
--radius-xs |
0.1875rem | Extra small border radius |
--radius-sm |
0.25rem | Small border radius |
--radius-md |
0.375rem | Medium border radius |
--radius-lg |
0.5rem | Large border radius |
--radius-pill |
62.4375rem | Pill-shaped border radius |
This example shows how to change button colors by overriding the --link and --danger variables:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="sc.min.css">
<style>
:root {
--link: #8b5cf6; /* Purple submit buttons */
--danger: #f59e0b; /* Amber reset buttons */
}
</style>
</head>
<body>
<button>Regular Button</button>
<button type="submit">Submit Button</button>
<button type="reset">Reset Button</button>
</body>
</html>