holiday.css - a minimalist classless CSS theme with dark mode support. Only 5 KB.

No classes today! Because it's holiday!

A minimalist classless CSS theme with dark mode support. Only 5 KB.

This very site is a demo of holiday.css (with a little help from Prism). It uses semantic HTML markup and no CSS classes.

You can use it as is for:

a project site (just like this one)
a blog
an "About me" site

Or you can use it as a base and build upon it.

Just add this to your <head>:

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

What makes holiday.css different

There are dozens of classless CSS themes out there, but none of them satisified all of my needs.

So I built my own.

These are the features that make holiday.css stand out:

makes your page fit even the smallest screens, no more broken <body> width due to wide tables
supports all <input> types
highlights invalid fields in your forms (that's right, no JS needed for that!)
makes your <nav> look nice, turns your nested <ul> lists into accessible dropdowns (making Tab work with dropdowns in plain CSS was really tricky!)
doesn't waste precious horizontal space on mobile screens for <picture>, video, <table>, and <pre> by ignoring body margins and filling 100% of screen width
keeps selector specificity as low as possible, so you could easily extend it with CSS classes without using !important
supports dark mode out of the box
built with pure CSS
only ~5 KB (minified and gzipped)

Rationale

I got tired of complex markup and tons of classes on every element.

Consider the following form example from the official Bootstrap documentation:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
    />
    <small id="emailHelp" class="form-text text-muted">
      We'll never share your email with anyone else.
    </small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" />
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1" />
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Notice that there are extra <div> wrappers and a ton of classes.

Now compare it to the simplest possible markup that looks as awesome when you use holiday.css:

<form>
  <label>
    Email address
    <input type="email" aria-describedby="emailHelp" />
    <small id="emailHelp">
      We'll never share your email with anyone else.
    </small>
  </label>
  <label>
    Password
    <input type="password" />
  </label>
  <label>
    <input type="checkbox" />
    Check me out
  </label>
  <footer>
    <button type="submit">Submit</button>
  </footer>
</form>

Result:

Contribute

Have a problem? Don't like how something looks? Want to help?

Feel free to help make holiday.css even better!

Source code on GitHub

Future

Add theme support
Extract a subset of styles into a separate stylesheet for use as a base for web apps