Retro Pixels

Takin' it back ...

... to the olden times of the early 1990's.

Mullets, ponytails, high-top fades, and flattops were the haircut of choice. Nintendo pretty much ruled the video game scene, with its Gameboy and Super Nintendo systems. Furbys were less creepy, and the Ninja Turtles were all the rage. Who could forget Tickle Me Elmo. Everyone had action figures, even New Kids on the Block!

I was feeling a bit nostalgic, so I thought I'd throw together a fun little CSS template.

Retro Pixels is fully responsive, and will resize properly automagically for mobile devices. I've used the Press Start 2P from Google Fonts to match a bit of that pixellated goodness.

This top section is in a div called box100. This div spans the width of the page. Demonstrations of some other box sizes (there are a total of six) are shown below, with some tag demo goodness.

Who doesn't like button style links ?

I've been getting away from the standard blue underlined text for links. I just wanted something a bit different. So with that in mind, here are some button-style links:

Standard Green Blue Red Yellow Purple

Of course, if you prefer the standard style, just omit the class, and they'll look like this.

Take a look at the stylesheet, and you should be able to quickly grasp how to make a button of any color you want. All 16.7 million variations.

Forms?

Yeah, we got some forms.

Name

Address

Male
Female
Other

textarea

box25

This is the 1.

• This
• is an
• unordered
• list

box25

This is box 2

1. This
2. is an
3. ordered
4. list

box25

This is box 3.

Boxes can be side-by side, as long as they add up to 100.

Move to a new "line" of boxes, use the clearfix class.

box25

And here is box 4, with a table inside.

Column	Header
Here	is a
table	inside
a box

box50

Boxes come in multiple sizes:

• 25%
• 50%
• 75%
• 100%
• 33%
• 66%

As long as the total for a group of boxes adds up to 100, you can "stack" the boxes side-by-side. Or in the case of 33/66, it'll add up to 99. (Don't worry, I have it set for 33.333 and 66.666 !)

For example, you can have:

• 4x box25 (4 boxes)
• 3x box33 (3 boxes)
• 2x box50 (2 boxes)
• 1x box25, 1x box75 (2 boxes)
• 2x box25, 1x box50 (3 boxes)
• ... and so on ...

box50

Some text tags:

Strong

Italic

Underline

Strikeout

And here is small text

Super^script and Sub_script

Usage Information

This html/css template is free for use by anyone, anywhere. I'd appreciate a bit of an attribution, say in the footer, with a link back to my site. But whatever.

Either way, drop me a note and let me see where you're using it. No worries; I'm just happy to see how people are using my work.