chr15m/DoodleCSS

chr15m/DoodleCSS has 1,212 GitHub stars and 41 forks. GitHot measured +1 in 7 days. Last checked 2026-11-10 21:28 UTC. Last push 2026-04-27.

How these counts are measured

A simple hand drawn HTML/CSS theme

1,212 stars 41 forks

Measured star growth

in 24h: Update delayed
in 7 days: +1
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Doodle CSS is a simple hand drawn HTML/CSS theme.

Demo and more HTML elements.

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

By Chris McCormick (@mccrmx).

See the demo for thanks and resources used.

Explore related projects

codecrafters-io/build-your-own-x

Master programming by recreating your favorite technologies from scratch.

public-apis/public-apis

A collective list of free APIs

morluto/rea

Reverse engineer anything with agents, from app behavior down to native binaries.

openclaw/openclaw

The AI that really does things. Any OS. Any Platform. The lobster way. 🦞