Documentation

Classless CSS framework for building quick semantic HTML pages prototypes

Header

<header>
  <nav>
    semantic.css
    <aside>
      <a href="https://github.com/dimitrinicolas/semantic.css">Github repository</a>
    </aside>
  </nav>
</header>

Main & Section content

<main>
  <section>
    content
  </section>
  <section>
    content
  </section>
</main>

Heading

<h1>h1 title</h1>
<h2>h2 title</h2>
<h3>h3 title</h3>
<h4>h4 title</h4>
<h5>h5 title</h5>
<h6>h6 title</h6>

h1 title

h2 title

h3 title

h4 title

h5 title
h6 title

Button

<button>Button</button>
<button disabled>Disabled button</button>

List

<ul>
  <li>An unordered list</li>
  <li>With <a href="#">some links</a></li>
  <li>And <b>bold text</b></li>
</ul>
<ol>
  <li>An ordered list</li>
  <li>With <a href="#">some links</a></li>
  <li>And <b>bold text</b></li>
</ol>
  1. An ordered list
  2. With some links
  3. And bold text

Blockquote

<blockquote>
  “The question of whether a computer can think is no more interesting than the question of whether a submarine can swim.” 
  ― Edsger W. Dijkstra
</blockquote>
“The question of whether a computer can think is no more interesting than the question of whether a submarine can swim.” ― Edsger W. Dijkstra

Image

<img src="assets/img.jpg" alt="Icelandic landscape">
<picture>
  <source srcset="assets/img.webp" type="image/webp">
  <img src="assets/img.jpg" alt="Icelandic landscape">
</picture>
Icelandic landscape Icelandic landscape

Dialog

<dialog open>An open dialog</dialog>
An open dialog

Forms

Inputs

<form>
  <label for="input-1">
    Label input
    <input type="text" placeholder="Input placeholder" id="input-1">
  </label>
  <input type="text" placeholder="Input without label">
</form>

Checkbox & Radio

<form>
  <label for="checkbox">
    <input type="checkbox" id="checkbox">
    Checkbox label
  </label>
  <label for="radio-1">
    <input type="radio" name="radio" id="radio-1">
    Radio label 1
  </label>
  <label for="radio-2">
    <input type="radio" name="radio" id="radio-2">
    Radio label 2
  </label>
</form>

Select

<form>
  <select>
    <option value="option-1" selected>Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</form>

Textarea & Submit

<form>
  <textarea cols="30" rows="10" placeholder="Textarea"></textarea>
  <input type="submit" value="Submit">
</form>

Footer

<footer>
  <section>
    footer
  </section>
</footer>