DoodleCSS
A simple hand drawn HTML/CSS theme
Install / Use
/learn @chr15m/DoodleCSSREADME
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
By Chris McCormick (@mccrmx).
See the demo for thanks and resources used.
Related Skills
node-connect
343.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
92.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
343.3kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
343.3kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
