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!
Future
- Add theme support
- Extract a subset of styles into a separate stylesheet for use as a base for web apps