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: 6 days 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-01T20:02:39.000Z (5 months ago)
• Last Synced: 2024-10-15T09:41:52.969Z (19 days 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.

[![Doodle CSS screenshot](./screenshot.png)](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.