holiday.css

Usage

Have an existing web page? Add this to your <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2" />

Starting afresh? Use Quickstart Template.

Pro tips

Use <header>, <nav>, <main>, and <footer> inside <body>

<body>
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

Use aria-current="page" to highlight current link

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#" aria-current="page">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

Result:

Use nested <ul> inside <nav> to create dropdown menus

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <span>Menu</span>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Result:

(you will see a hamburger menu if your are on mobile, use desktop to see dropdowns)

Use <picture> for big images to make them fill more screen space

<picture>
  <img src="https://via.placeholder.com/1920x1080" alt="Placeholder" />
</picture>

Result:

Placeholder

Use <figure> to center images

<figure>
  <img src="https://via.placeholder.com/150" alt="Placeholder" />
</figure>

Result:

Placeholder

Use <code> inside <pre> for code blocks

<pre><code>/* Hello World in CSS */
body::before {
  content: "Hello World!";
}
</code></pre>

Result:

/* Hello World in CSS */
body::before {
  content: "Hello World!";
}

Use Unicode

<button type="button">❤️ Like</button>

Result:

Use <input> inside <label> to avoid having to use id and for attributes

<label>
  Example
  <input />
</label>

Result:

Use <footer> for form buttons to add a margin above them

<form>
  <label>
    Example
    <input />
  </label>
  <footer>
    <button>Submit</button>
    <button type="reset">Reset</button>
  </footer>
</form>

Result:

Use holiday-css-light and holiday-css-dark classes to override light/dark mode preference

<html class="holiday-css-light"></html>

Note: it has to be <html>, and not <body> or any other element, so that the browser would apply the correct color theme to its UI elements, like scrollbars.