Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chr15m/DoodleCSS
A simple hand drawn HTML/CSS theme
https://github.com/chr15m/DoodleCSS
css hand-drawn html stylesheet theme
Last synced: about 2 months ago
JSON representation
A simple hand drawn HTML/CSS theme
- Host: GitHub
- URL: https://github.com/chr15m/DoodleCSS
- Owner: chr15m
- License: mit
- Created: 2021-12-14T13:36:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-01T20:02:39.000Z (7 months ago)
- Last Synced: 2024-10-15T09:41:52.969Z (2 months ago)
- Topics: css, hand-drawn, html, stylesheet, theme
- Language: HTML
- Homepage: https://chr15m.github.io/DoodleCSS
- Size: 282 KB
- Stars: 1,045
- Watchers: 5
- Forks: 38
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - chr15m/DoodleCSS - A simple hand drawn HTML/CSS theme (HTML)
- Awesome-CSS-Resources - DoodleCSS:
README
Doodle CSS is a simple hand drawn HTML/CSS theme.
[](https://chr15m.github.io/DoodleCSS)
[Demo and more HTML elements](https://chr15m.github.io/DoodleCSS).
# How to use it
The main stylesheet is [doodle.css](./doodle.css).
```html
```
Then add the class `doodle` to the top level element you want to apply the theme to:
```html
...
```
Load the Short Stack web font:
```html
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
body {
font-family: 'Short Stack', cursive;
}
```
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](https://mccormick.cx/) ([@mccrmx](https://twitter.com/mccrmx)).
See [the demo](https://chr15m.github.io/DoodleCSS) for thanks and resources used.