https://github.com/lynnandtonic/a-single-div

🎨 CSS drawings with only one HTML element.
https://github.com/lynnandtonic/a-single-div

Last synced: 29 days ago
JSON representation

🎨 CSS drawings with only one HTML element.

• Host: GitHub
• URL: https://github.com/lynnandtonic/a-single-div
• Owner: lynnandtonic
• Created: 2014-05-22T04:45:19.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T14:58:10.000Z (6 months ago)
• Last Synced: 2024-05-22T16:13:54.408Z (6 months ago)
• Language: Stylus
• Homepage: https://a.singlediv.com
• Size: 569 KB
• Stars: 1,687
• Watchers: 55
• Forks: 101
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-css-only - A-single-div - :art: CSS drawings with only one HTML element. (Uncategorized / Uncategorized)
• awesome - lynnandtonic/a-single-div - 🎨 CSS drawings with only one HTML element. (Stylus)
• awesome - lynnandtonic/a-single-div - 🎨 CSS drawings with only one HTML element. (Stylus)

README

        
A Single Div

============

### Build

```

npm i

npm start

```

### Whuut

This is a fun, little project to see how much can be accomplished with CSS. Every drawing consists of a single HTML element (in this case, the beloved div).

### But, but!

Yes, this isn't super practical.

Yes, SVG is an easier and better medium for illustrations.

Yes, browser support is not broad.

Yes, it is super fun to do this anyway. ;)

### Project Details

This project uses a combination of Pug for templating and Stylus for CSS preprocessing.

### Sharing

Copy paste as much as you'd like, edit it, experiment. If you reuse a significant portion of CSS or full drawings, credit would be appreciated! Thanks!

### Contributions

I'm currently not taking any outside contributions. I encourage you to share your single divs on codepen.io or your own site! [Tweet at me](https://twitter.com/lynnandtonic) if you do!