Challenge :)

Keep it clean but fun.
Post Reply
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Challenge :)

Post by Xaleph »

Hi everyone,

I created a topic a couple of weeks a go to create default UI kits to be used in games. Now, the thing is, i was thinking of creating a challenge to create UI themes. In fact, I found an article which offers 45+ UI toolkits in Psd format. The thing is, they`re just images. The challenge now is to create workable CSS/HTML elements from it ;)

Here`s how i had it planned out: you pick one of the 45 kits, and you create the HTML/CSS for it :) The only thing is, it has to be a PHP function to be used. So if you want to create a button, you create the HTML/CSS, wrap it in a PHP function and you offer the link, caption as parameters in PHP.

The reason is has to be wrapped in PHP is because you need more elements for different UI elements. Like a button ( which can be something like an <a> tag ) probably needs a span to the left so you can create the "round" effect without giving up the fixed width. That way the button can have a flexible width.

So html output looks like:

<a href="site.com/test.php" class="button red round">
<span class="left icon iconname"></span>
<span class="right">Click me!</span>
</a>

And in PHP it looks like:

echo button("site.com/test.php", "Click me!","red round", true, "iconname");

Where ( and it`s just an example right? ) the parameters are:
link, caption, extra CSS classes, has an icon, iconname.

Anyway, the link to the page i`m talking of is this:
http://www.webdesignerdepot.com/2011/07 ... -elements/

I hope people are willing to participate. The voting will be done be fellow members and the best designed set will get a reward! That reward is up to you to decide! But i`m willing to invest 10 hours of free coding for the winner!

edit:
On a side note, everything we produce here is all open-source GPL license. Because the PSD`s are open source as well. I haven`t found a way for people to show off, but i`m thinking up setting a domain for this very purpose.

Anyway, in any way, the stylesheet should be named: <yourname>-<setyouareusing>.css, the PHP page same, except the extension should be .php for obvious reasons. :)

May the best man/woman win!
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Challenge :)

Post by Xaleph »

Ok i`m going to do this one:

Moonify UI

I`m at 0%, will post results soon.
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Challenge :)

Post by Xaleph »

Almost done people, i`m skipping the checkboxes and radio`s since browsers cannot "simulate" a different layout without Javascript. Since this is more about HTML and CSS, i`m forced to skip em..

Anyone else willing to take on the challenge?
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Challenge :)

Post by Jackolantern »

I admittedly stink at web design; even cutting up PSDs :P
The indelible lord of tl;dr
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Challenge :)

Post by Xaleph »

You don`t have to design right, anyway it`s a good way to practice :)
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Challenge :)

Post by Xaleph »

Ok update:

I`m done for the set. I made a demo page for you guys, it includes a link to download the zip with .css and .php files. Use it as you like. No license there yet, nor credits. Will add that in later.

Check it out at http://exinium.eu/temporary/index.php
User avatar
Nexus
Posts: 293
Joined: Sat Jun 18, 2011 10:42 pm

Re: Challenge :)

Post by Nexus »

Very nice! I might have to give it a download and maybe even read up on the challenge and join in!
User avatar
Nexus
Posts: 293
Joined: Sat Jun 18, 2011 10:42 pm

Re: Challenge :)

Post by Nexus »

Alright...I'm in I will be doing the Simple Tabbed Navigation...should not take too long :) heck maybe if I get it done I can do two and submit my best work!
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Challenge :)

Post by Xaleph »

Hehe good luck ! As it seems now, you stand to win 10 hours of free coding from me :)
User avatar
Nexus
Posts: 293
Joined: Sat Jun 18, 2011 10:42 pm

Re: Challenge :)

Post by Nexus »

Wait so its just raw HTML and defining a PHP echo button() function? no jQuery or JS to make the pictures functional?
Post Reply

Return to “Off-Topic”