chr15m/DoodleCSS

A simple hand drawn HTML/CSS theme

Source code at GitHub https://chr15m.github.io/DoodleCSS

{
  "createdAt": "2021-12-14T13:36:42Z",
  "defaultBranch": "main",
  "description": "A simple hand drawn HTML/CSS theme",
  "fullName": "chr15m/DoodleCSS",
  "homepage": "https://chr15m.github.io/DoodleCSS",
  "language": "HTML",
  "name": "DoodleCSS",
  "pushedAt": "2025-02-27T11:25:17Z",
  "stargazersCount": 1139,
  "topics": [
    "css",
    "hand-drawn",
    "html",
    "stylesheet",
    "theme"
  ],
  "updatedAt": "2025-12-05T05:19:24Z",
  "url": "https://github.com/chr15m/DoodleCSS"
}

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

![Doodle CSS screenshot]!(./screenshot.png)

Demo and more HTML elements.

How to use it

The main stylesheet is [doodle.css]!(./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]!(./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.