pattern-rodeo

Yeeeehaw let’s have a little fun! The Pattern Rodeo will be a weekly contest we will run for four weeks. Each week there will be a theme. You build a Pen according to that theme and tag it with a special tag to enter the contest. The two Pens with the highest number of hearts at the end of the week win.

What You Win

Winner: The Pen with the most number of hearts each week wins a free PRO account for a year and we’ll mail them a free CodePen T-Shirt.

Runner up: The runner up will get a free CodePen T-Shirt.

No truckloads of cash, I’m afraid. This is mostly just for fun and a way for us to provide ideas on things to build. Believe it or not, several folks have asked us to provide ideas for things for them to build!

[FINISHED] Week One: “Make This Responsive”

This Pen has a fixed width design. Your job is to fork it and make it responsive. Your final Pen should consider the available screen size of any screen and adapt for it. You can do whatever you please to the existing content, but please consider the visual importance hierarchy set up in the original fixed size Pen (one lead story and three less important stories).

Tag: rodeo-001 (see all)

Winner: Hugo Giraudel
Runner up: Joshua Hibbert

[FINISHED] Week Two: “Loading…”

The challenge this week is to create a loading animation that uses the actual word “Loading…” in real web type. Just a little reminder UI for actions like this can be accessible and semantic. That’s the only direction we’ll give, have fun!

Tag: rodeo-002 (see all)

Winner: Tim Holman
Runner up: Alex Tebbs

[FINISHED] Week Three: Beauty is only one pixel deep

It’s going to be tough, but see if you can improve upon this amazing website: The Glass Slipper Beauty Pageant. Bring it into 2013! Use the same content (not necessarily the same markup but the same content) but make it more readable, usable, and nicer to look at. A nod back to the original would be a nice touch.

Tag: rodeo-003 (see all)

Winner: Ollie
Runner up: Olivia Cheng

[FINISHED] Week Four: CSS Regions

CSS regions is a very interesting new standard pioneered by Adobe. It allows you to specify how you want content to flow from one element to another. Imagine three divs each positioned and styled differently around a page. Regions allows content to flow in and out of them (depending on how much will fit) in any order you specify. This can make for some pretty fancy layouts. And the fact that you control it via CSS means you can rearrange where content flows via media query, for example.

While is only there is only limited browser support (IE 10, Webkit Nightly under a flag), there is a polyfill that allows you to play with them today. You’re job is just to get creative and do something interenting with CSS regions! Lay out your favorite poem. Create a magazine-style layout. Do something wildly interactive. Sky’s the limit.

Here is an example if you need something to get started (feel free to fork it).

cc
There are special prizes this week for the winners! Both the winner and runner-up will receive a free year of Adobe Creative Cloud in addition to the other prizes. That means complete access to all the CS6 products and cloud storage.

Tag: rodeo-004 (see all)

Winner: Tyler Fry
Runner up: Joshua Hibbert

Vote!

To make this work and be a fun community event, you shouldn’t be too stingy with the hearts! View all the solutions and heart the ones you like and don’t heart the ones you don’t like. You can see all the entries by viewing the tag for the week. For example, week two.

Rules

  • You can submit as many Pens as you like
  • The creation date of the Pen should be past the start date of the weekly challenge. In other words, make something new.
  • If you already have a PRO account, we’ll add a year to it at no cost
  • If you figure out some weird way to cheat, you won’t win
  • Remember this is just for fun, if you don’t like it, don’t participate