Doodle CSS is a simple hand drawn HTML/CSS theme.
How to use it
The main stylesheet is doodle.css.
<link rel="stylesheet" href="doodle.css">Then add the class doodle to the top level element you want to apply the theme to:
<body class="doodle">...</body>Load the Short Stack web font:
<style>
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
body {
font-family: 'Short Stack', cursive;
}
</style>There's also an npm installable version:
npm install doodle.css
The npm package can be imported with:
import 'doodle.css/doodle.css'
There are are bunch of other vectors you can use in doodles.svg.
You can also put a doodle box around anything using the class .doodle .border or .doodle-border.
Sponsor
CSS Scan is the fastest easiest way to check, copy, and edit CSS. It's like a souped-up devtools inspector with rockets attached. Thanks to CSS Scan for sponsoring DoodleCSS!
Who
By Chris McCormick (@mccrmx).
See the demo for thanks and resources used.