Paper Prototype CSS
css HTML5 · 11 comments · 400 words · Viewed ~7,308 times.
Introducing Paper Prototype CSS.
When I first started designing the OpenBenches website, I wanted to make it look deliberately crappy. I didn't want the people testing it getting too hung up on what it looked like. I've found that some beta testers can only focus on whether the colours are right, or if things should be placed on the left or right.
So I wanted something which mimicked "Paper Prototyping". A website which looked vaguely hand-drawn. As though it were scraps of paper and Post-It® Notes stuck on a roll of canvas.
That way, people can immediately see that the design is deliberately "scrappy" and temporary.
I've decided to go a little further than my last experiment and create a fairly comprehensive Style Sheet which you can use on any new project - Paper Prototype CSS.
Here's what it looks like:
To be clear, this is not designed to look good - quite the opposite. It is a base to build on so you can build something quick and dirty.
Use it to throw together something where you want to concentrate on the content, not the presentation.
Features
The askew elements use nth child selectors to rotate them in different directions:
CSS
*:nth-child(odd):not(body):not(html){
transform: rotate(2deg);
}
*:nth-child(even):not(body):not(html) {
transform: rotate(-2deg);
}
The weird border radius uses:
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
With thanks to
Everything is based on something else. I took heavy inspiration from, and made liberal use of:
- Handdrawn CSS
- Doodle CSS
- Poor Man's Styleguide
- Paper Texture Background
- Handwritten body font and monospace font
Download
You can clone the repo to get started. If you find it useful, please let me know. Pull Requests very welcome.
Johannes Rexx says:
More comments on Mastodon.