├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── border.svg ├── bq.svg ├── button.svg ├── caret.svg ├── checkbox.svg ├── css-scan.png ├── doodle.css ├── doodles.svg ├── figure.svg ├── hr.svg ├── icon.png ├── icon.svg ├── index.html ├── package.json ├── radio.svg ├── screenshot.png └── star.svg /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: chr15m 4 | patreon: chr15m 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: chr15m 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .*.swp 2 | node_modules 3 | workspace 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Chris McCormick 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Doodle CSS is a simple hand drawn HTML/CSS theme. 2 | 3 | [![Doodle CSS screenshot](./screenshot.png)](https://chr15m.github.io/DoodleCSS) 4 | 5 | [Demo and more HTML elements](https://chr15m.github.io/DoodleCSS). 6 | 7 | # How to use it 8 | 9 | The main stylesheet is [doodle.css](./doodle.css). 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | Then add the class `doodle` to the top level element you want to apply the theme to: 16 | 17 | ```html 18 | ... 19 | ``` 20 | 21 | Load the Short Stack web font: 22 | ```html 23 | 29 | ``` 30 | 31 | There's also an npm installable version: 32 | 33 | ``` 34 | npm install doodle.css 35 | ``` 36 | 37 | The npm package can be imported with: 38 | 39 | ``` 40 | import 'doodle.css/doodle.css' 41 | ``` 42 | 43 | There are are bunch of other vectors you can use in [doodles.svg](./doodles.svg). 44 | 45 | You can also put a doodle box around anything using the class `.doodle .border` or `.doodle-border`. 46 | 47 | # Who 48 | 49 | By [Chris McCormick](https://mccormick.cx/) ([@mccrmx](https://twitter.com/mccrmx)). 50 | 51 | See [the demo](https://chr15m.github.io/DoodleCSS) for thanks and resources used. 52 | -------------------------------------------------------------------------------- /border.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 66 | 72 | 77 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /bq.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 44 | 46 | 47 | 49 | image/svg+xml 50 | 52 | 53 | 54 | 55 | 56 | 61 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /caret.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /css-scan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/DoodleCSS/53366e24d7d893f6da88561df891c83fd928d9d8/css-scan.png -------------------------------------------------------------------------------- /doodle.css: -------------------------------------------------------------------------------- 1 | /* Doodle CSS 2 | * https://github.com/chr15m/DoodleCSS 3 | */ 4 | 5 | .doodle * { 6 | box-sizing: border-box; 7 | } 8 | 9 | .doodle { 10 | background-color: #FDF7F1; 11 | color: #3c3c3c; 12 | } 13 | 14 | .doodle input, .doodle textarea, .doodle table, .doodle img { 15 | max-width: 100%; 16 | } 17 | 18 | .doodle fieldset * { 19 | max-width: calc(100vw - 100px); 20 | } 21 | 22 | .doodle table { 23 | overflow: scroll; 24 | } 25 | 26 | .doodle a { 27 | color: #1c1c1c; 28 | font-weight: bold; 29 | } 30 | 31 | .doodle ul li { 32 | list-style-type: "* "; 33 | } 34 | 35 | .doodle label { 36 | padding: 0.25em 0px; 37 | display: inline-block; 38 | } 39 | 40 | .doodle fieldset, .doodle textarea { 41 | border-style: solid; 42 | border-width: 10px 10px 10px 10px; 43 | border-image: url(border.svg) 10 10 10 10 stretch stretch; 44 | } 45 | 46 | .doodle .border, .doodle-border { 47 | border-style: solid; 48 | border-width: 10px 10px 10px 10px; 49 | border-image: url(button.svg) 10 10 10 10 stretch stretch; 50 | } 51 | 52 | .doodle button, .doodle input, .doodle select, .doodle input[type="file"]::file-selector-button { 53 | border-style: solid; 54 | border-width: 10px 10px 10px 10px; 55 | border-image: url(button.svg) 10 10 10 10 stretch stretch; 56 | } 57 | 58 | .doodle button { 59 | text-align: center; 60 | } 61 | 62 | .doodle input[type="color"] { 63 | min-height: 1.5em; 64 | } 65 | 66 | .doodle hr { 67 | border-style: solid; 68 | border-width: 0px 3px 6px 3px; 69 | border-image: url(hr.svg) 0 3 6 3 stretch stretch; 70 | } 71 | 72 | .doodle blockquote { 73 | border-left-style: solid; 74 | border-width: 0px 6px 3px 6px; 75 | border-image: url(bq.svg) 0 6 3 6 stretch stretch; 76 | padding-left: 0.5em; 77 | border-right-width: 0px; 78 | } 79 | 80 | .doodle pre { 81 | overflow: auto; 82 | } 83 | 84 | .doodle table { 85 | border-collapse: collapse; 86 | overflow: auto; 87 | display: block; 88 | } 89 | 90 | .doodle table thead { 91 | border-bottom: 3px solid #bbb; 92 | } 93 | 94 | .doodle table caption { 95 | border-bottom-style: solid; 96 | border-width: 0px 3px 6px 3px; 97 | border-image: url(hr.svg) 0 3 6 3 stretch stretch; 98 | } 99 | 100 | .doodle table td { 101 | vertical-align: top; 102 | } 103 | 104 | .doodle img { 105 | border-radius: 3px; 106 | border-style: solid; 107 | border-width: 3px 3px 3px 3px; 108 | border-image: url(button.svg) 3 3 3 3 stretch stretch; 109 | } 110 | 111 | .doodle select { 112 | -webkit-appearance: none; 113 | appearance: none; 114 | padding-right: 1.5em; 115 | background: url(caret.svg) no-repeat right transparent; 116 | background-position-x: calc(100% - 10px); 117 | } 118 | 119 | .doodle select[multiple] { 120 | background: none; 121 | padding: 0px; 122 | } 123 | 124 | .doodle button, .doodle textarea, .doodle input, .doodle select { 125 | background-color: unset; 126 | font-family: 'Short Stack', cursive; 127 | font-size: 1em; 128 | color: #3c3c3c; 129 | } 130 | 131 | .doodle button:disabled { 132 | color: grey; 133 | } 134 | 135 | .doodle input[type="checkbox"] { 136 | border-width: 6px 6px 6px 6px; 137 | border-image: url(checkbox.svg) 6 6 6 6 stretch stretch; 138 | } 139 | 140 | .doodle input[type="radio"] { 141 | border-width: 16px 16px 16px 16px; 142 | border-image: url(radio.svg) 16 16 16 16 stretch stretch; 143 | } 144 | 145 | .doodle input[type="checkbox"], .doodle input[type="radio"] { 146 | -webkit-appearance: none; 147 | appearance: none; 148 | outline: 0; 149 | background: transparent; 150 | width: 1.5em; 151 | height: 1.5em; 152 | display: inline-flex; 153 | justify-content: center; 154 | align-items: center; 155 | } 156 | 157 | .doodle input[type="checkbox"]:after, .doodle input[type="radio"]:after { 158 | font-size: 1.25em; 159 | content: " "; 160 | margin-bottom: -0.25em; 161 | } 162 | 163 | .doodle input[type="checkbox"]:disabled:after, .doodle input[type="radio"]:disabled:after { 164 | content: "-"; 165 | color: grey; 166 | } 167 | 168 | .doodle input[type="checkbox"]:checked:after, .doodle input[type="radio"]:checked:after { 169 | content: "*"; 170 | } 171 | 172 | .doodle input[type="file"]::file-selector-button { 173 | font-family: inherit; 174 | font-size: 0.8em; 175 | font-size: 1em; 176 | background-color: unset; 177 | color: #3c3c3c; 178 | } 179 | 180 | .doodle button:focus-visible, .doodle textarea:focus-visible, .doodle input:focus-visible, .doodle select:focus-visible { 181 | outline-offset: -8px; 182 | outline: 2px dashed #3c3c3c; 183 | /* outline: transparent; 184 | filter: drop-shadow(0 0 3px #4d90fe) brightness(1.1) saturate(1.2); */ 185 | } 186 | -------------------------------------------------------------------------------- /figure.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 45 | 47 | 48 | 50 | image/svg+xml 51 | 53 | 54 | 55 | 56 | 57 | 62 | 67 | 72 | 77 | 82 | 87 | 92 | 97 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /hr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 44 | 46 | 47 | 49 | image/svg+xml 50 | 52 | 53 | 54 | 55 | 56 | 61 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/DoodleCSS/53366e24d7d893f6da88561df891c83fd928d9d8/icon.png -------------------------------------------------------------------------------- /icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 72 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DoodleCSS 9 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 |

Doodle CSS

53 | 54 |

A simple hand drawn HTML/CSS theme.

55 |

By Chris McCormick (@mccrmx)

56 |

Get the source code on GitHub.

57 | 58 |

Support

59 | 60 |
61 | 65 | 69 | 73 |
74 | 75 |

Quick demo

76 | 77 |
78 | Some inputs 79 | 80 |

81 |
82 | 83 |

84 | 85 |

86 |
87 | 88 |

89 | 90 |

91 |
92 | 93 |

94 | 95 |

96 | 97 | 103 |

104 | 105 |

106 |

107 | 111 |
112 | 113 |
114 | 118 |
119 |

120 | 121 |

122 |

123 | 127 |
128 | 129 |
130 | 134 |
135 |

136 | 137 |

138 | 139 |

140 |
141 | 142 |

How to use it

143 |

The main stylesheet is doodle.css:

144 | 
145 | <link rel="stylesheet" href="doodle.css">
146 |
147 |

Then add the class doodle to the top level element you want to apply the theme to:

148 | 
149 | <body class="doodle">...<body>
150 |
151 |

Load the Short Stack web font:

152 | 
153 | <style>
154 | @import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
155 | body {
156 |   font-family: 'Short Stack', cursive;
157 | }
158 | </style>
159 |
160 |

There's also an npm installable version:

161 | 
162 | npm install doodle.css
163 |
164 |

There are also a bunch of other vectors you can use in doodles.svg.

165 |

You can also put a doodle box around anything using the class .doodle .border or .doodle-border.

166 | 167 |

Thanks

168 |

169 | This stylesheet is heavily inspired by the Hand Drawn Vector UI Kit by Tony Thomas. 170 | I wanted a CSS theme that looked just like that, so I drew a bunch of similar components and got them working on the web. 171 |

172 |

HTML coverage using HTML Kitchen Sink.

173 |

The font is Short Stack.

174 | 175 |

Other HTML Elements

176 |
177 |
178 |
179 |

h1 HTML5 Kitchen Sink

180 |

h2 Back in my quaint garden

181 |

h3 Jaunty zinnias vie with flaunting phlox

182 |

h4 Five or six big jet planes zoomed quickly by the new tower.

183 |
h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
184 |
h6 Pack my box with five dozen liquor jugs.
185 |
186 |
187 |
188 |
189 |
190 | 197 |
198 |
199 |

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. 200 | Of course there are classics like emphasis, strong, and small 201 | but there are many others as well. 202 | Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. 203 | You can define deleted text 204 | which often gets replaced with inserted 205 | text. 206 |

207 |

You can also use keyboard text, which sometimes is styled similarly to the <code> 208 | or samp 209 | tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes 210 | 211 | below, the quote tag lets you denote something as 212 | quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags. 213 |

214 |
215 | 216 |
This is footer for this section
217 |
218 |
219 |
220 |
    221 |
  • Unordered List item one 222 |
      223 |
    • Nested list item 224 |
        225 |
      • Level 3, item one
        • 226 |
      • Level 3, item two
        • 227 |
      • Level 3, item three
        • 228 |
      • Level 3, item four
        • 229 |
      230 |
      • 231 |
    • List item two
      • 232 |
    • List item three
      • 233 |
    • List item four
      • 234 |
    235 |
    • 236 |
  • List item two
    • 237 |
  • List item three
    • 238 |
  • List item four
    • 239 |
240 |
241 |
    242 |
  1. List item one 243 |
      244 |
    1. List item one 245 |
        246 |
      1. List item one
        2. 247 |
      2. List item two
        3. 248 |
      3. List item three
        4. 249 |
      4. List item four
        5. 250 |
      251 |
      2. 252 |
    2. List item two
      3. 253 |
    3. List item three
      4. 254 |
    4. List item four
      5. 255 |
    256 |
    2. 257 |
  2. List item two
    3. 258 |
  3. List item three
    4. 259 |
  4. List item four
    5. 260 |
261 |
262 |
263 |
264 |
265 |

Blockquote: I quickly explained that many big jobs involve few hazards

266 |
267 |
268 |

269 | This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick 270 | carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. 271 | Steve Jobs – Apple Worldwide Developers’ Conference, 1997 272 |

273 |
274 |
275 |
276 |
277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 |
Tables can have captions now.
PersonNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
309 |
310 |
311 |
312 |
313 |
Definition List Title
314 |
Definition list division.
315 |
Kitchen Sink
316 |
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
317 |
aside
318 |
Defines content aside from the page content
319 |
blockquote
320 |
Defines a section that is quoted from another source
321 |
322 |
323 |
324 |
325 |
1 Infinite Loop
326 | Cupertino, CA 95014
327 | United States 328 |
329 |
330 |
331 |
332 | 
pre {
333 |   display: block;
334 |   padding: 7px;
335 |   background-color: #F5F5F5;
336 |   border: 1px solid #E1E1E8;
337 |   border-radius: 3px;
338 |   white-space: pre-wrap;
339 |   word-break: break-all;
340 |   font-family: Menlo, Monaco;
341 |   line-height: 160%;
342 | }
343 |
344 |
345 |
346 |
Fig1. A picture of Bill Murray from fillmurray.com
347 |
348 |
349 |
350 |
351 |

352 | 353 | 354 |

355 |

356 | 357 | 358 |

359 |

360 | 361 | 362 |

363 |

364 | 365 | 366 |

367 |

368 | 369 | 370 |

371 |

372 | 373 | 374 |

375 |

376 | 377 | 378 |

379 |

380 | 381 | 382 |

383 |

384 | 385 | 386 |

387 |

388 | 389 | 390 |

391 |

392 | 393 | 394 |

395 |

396 | 397 | 398 |

399 |

400 | 401 | 402 |

403 |

404 | 405 | 406 |

407 |

408 | 409 | 416 |

417 |

418 | 419 | 426 |

427 |

428 | 429 | 430 |

431 |

432 | 433 | 434 |

435 |
436 | I am legend 437 |
438 | 442 |
443 |
444 | 448 |
449 |
450 | 454 |
455 |
456 |
457 | I am also legend 458 |

459 | 460 | 461 |

462 |

463 | 464 | 465 |

466 |

467 | 468 | 469 |

470 |

471 | 472 | 473 |

474 |
475 |

476 | 477 | 478 | 479 | 480 | 481 |

482 |
483 |
484 |

Hello. You have reached the end of the page. Thank you for checking it out. Have a nice day.

485 |
486 | 487 | 488 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "doodle.css", 3 | "version": "0.0.2", 4 | "description": "A simple hand drawn HTML/CSS theme.", 5 | "author": "Chris McCormick ", 6 | "homepage": "https://github.com/chr15m/DoodleCSS", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/chr15m/DoodleCSS.git", 10 | "web": "https://github.com/chr15m/DoodleCSS" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/chr15m/DoodleCSS/issues/" 14 | }, 15 | "devDependencies": { 16 | "browser-sync": "^2.29.1" 17 | }, 18 | "keywords": [ 19 | "css", 20 | "theme", 21 | "html", 22 | "stylesheet", 23 | "hand-drawn" 24 | ], 25 | "scripts": { 26 | "watch": "browser-sync start --server . --files . --no-open --port 8000" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 44 | 46 | 47 | 49 | image/svg+xml 50 | 52 | 53 | 54 | 55 | 56 | 61 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/DoodleCSS/53366e24d7d893f6da88561df891c83fd928d9d8/screenshot.png -------------------------------------------------------------------------------- /star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 68 | 69 | 70 | --------------------------------------------------------------------------------