A Single Div

A Single Div is a creative-coding GitHub project that shows how much can be accomplished with CSS by rendering every drawing as a single HTML element, with the whole thing built using Pug and Stylus.

What is A Single Div?

A Single Div is a collection of CSS drawings, each made from exactly one div element, created by the developer known as lynnandtonic. The project takes markup written in Pug and styles written in Stylus, then compiles them into plain HTML and CSS that browsers render as illustrations. It is distributed as a GitHub repository with a simple npm-based build process.

Key Features

• Single element constraint — Every drawing in the collection consists of exactly one HTML div, pushing CSS to its limits.
• Pug templating — Markup is authored in Pug, a concise templating language that compiles to HTML.
• Stylus preprocessing — Styles are written in Stylus, a flexible CSS preprocessor that compiles to standard CSS.
• npm build — The project installs with npm i and starts a local server with npm start.
• Reusable code — The author encourages copying, pasting, editing, and experimenting with the code; credit is appreciated for significant reuse or full drawings.
• Open sharing — The author asks creators to share their own single-div works on CodePen or personal sites and welcomes tweets at @lynnandtonic.

Who is it for?

• CSS enthusiasts — People who enjoy exploring the boundaries of CSS will find a gallery of techniques and a challenge to replicate.
• Front-end developers — Developers who want to see creative styling solutions can study the Pug and Stylus source for each drawing.
• Creative coders — Artists and tinkerers can fork the repository, modify drawings, and build new ones under a permissive reuse policy.

What can you do with A Single Div?

• Experiment with CSS — Copy any drawing's code, change the styles, and see how the single div responds, learning advanced selectors, gradients, and pseudo-elements.
• Create original artwork — Use the project's Pug and Stylus setup as a starting point to design your own one-element illustrations.
• Teach web techniques — Use the drawings as demonstrations of CSS power in workshops or tutorials, noting the author's caveat that SVG is an easier medium.

How does A Single Div work?

After cloning the repository, run npm i to install dependencies and npm start to launch the local development environment. Pug templates define the single div's markup, Stylus files define its styling, and the build outputs a page that renders each drawing.

Pros and cons

• Pros: The gallery is an impressive demonstration of CSS capability, and the code is open for experimentation and reuse under a credit-appreciated policy.
• Cons: The author warns the approach is not super practical, browser support is not broad, and SVG is a more reliable medium for illustrations.

FAQ

Is A Single Div practical for production use?

No. The author states the project is "not super practical," and that SVG is an easier and better medium for illustrations. It exists as a fun constraint-based exercise rather than a production-ready illustration technique.

Can I use the code in my own projects?

Yes. The author says to copy and paste as much as you'd like, edit it, and experiment. If you reuse a significant portion of CSS or full drawings, credit to the author is appreciated.

What tools do I need to run it?

You need Node.js to run the npm commands. Install dependencies with npm i and start the build with npm start. The project uses Pug for HTML templating and Stylus for CSS preprocessing.

Does A Single Div work in all browsers?

Browser support is not broad, according to the author. The drawings rely on advanced CSS features that may not render consistently across older or less capable browsers.

How can I contribute to A Single Div?

The author is currently not taking outside contributions. Instead, they encourage you to share your own single div creations on CodePen or your own site, and to tweet a link to @lynnandtonic.