Skip to content

chr15m/DoodleCSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

53366e2 · Feb 27, 2025

History

25 Commits
Mar 14, 2023
Dec 14, 2021
Dec 15, 2021
Feb 9, 2023
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Aug 29, 2022
Feb 27, 2025
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021
Jun 1, 2024
Apr 9, 2023
Dec 14, 2021
Dec 14, 2021
Dec 14, 2021

Repository files navigation

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

Doodle CSS screenshot

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.