holiday.css

No classes today! Because it's holiday!

A minimalist classless CSS theme.

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:

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.9.7" />

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:

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