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.

Who

See the demo for thanks and resources used.