"Construct.css - Focus on the content and structure of your HTML"

To see how your site looks with Construct's HTML debugger, snag this bookmarklet.

Deconstruct!


Read more about the reasoning behind this project.

(It was initially called Trashy.css but was renamed.)


This is just a silly idea, a CSS "library" that styles tags directly — as opposed to using class names as style hooks — to help people become more familiar with how to use semantic HTML.

It builds incrementally from a common base, then also includes "boxes" and "theme" CSS files. These allow a user to visually see what would otherwise be invisible semantic tags, and adds a hand drawn effect to prevent observers from paying too much attention to the aesthetics of a document.

Below are links to the same underlying HTML structure, but with different CSS files applied.

It also includes an additional construct.debug.css file, that can be used to flag invalid or incomplete HTML.

View the project repository here.