Contest: Win a Free Pass to SXSW Interactive for the Coolest Use of the jQuery UI CSS Framework

Posted by Todd Parker on 02/12/2009

Topics:

To celebrate ThemeRoller's selection as a finalist for the SXSW Web Award for Technical Achievement, we're holding a contest to give away one free pass to the SXSW Interactive Festival to the person who creates the coolest use of the new jQuery UI CSS framework.

Results are in...

The winner of the coolest use of the jQuery UI CSS Framework goes to...

Chessbomb

chessbomb

Congratulations, Peter! You've got yourself a ticket to SXSW Interactive 2009! We'll send you an email next week with the details for registration.

Thanks to all participants!

We want to thank all of our participants for the time they spent working on this. In the end, it was very close, but we found Chessbomb to be the most complete use of the framework classes along with nice layout and an interesting concept. We hope this contest helped get the word out about jQuery UI's new framework and perhaps we'll hold another contest at some point down the road.

Thanks again!

Note: This contest is now closed. Feel free to read along and check out the entries. Thanks.

SXSW badge

We're really excited about the new jQuery UI CSS framework because it makes it easy to theme UI widgets or even entire layouts with the jQuery UI ThemeRoller web application. To celebrate the nomination and encourage everyone to take advantage of this new framework, we're holding a contest to see who can demonstrate the most creative use of the framework's capabilities. The winner will receive a free pass to the SXSW Interactive Festival in Austin, Texas, March 13-17, 2009.

How to get started

First off, download a theme and demo page from jQuery UI ThemeRoller and review the jQuery UI CSS framework documentation to get an idea of how the framework is used. Then head over to the jQuery UI site and grab the handy Firefox ThemeRoller bookmarklet to help you test your styles as you build your project. If you're creating a demo page, we strongly suggest that you include the Theme switcher dropdown to let people quickly sample ThemeRoller themes on your page and really show off the theming in action.

Remember, the CSS framework is not just for jQuery plugins — framework styles can be used with any Javascript library or your own custom markup. We'd be thrilled to see how far you can go with a cool WordPress template, corporate website, widget or even a game to show the power and flexibility of this system. Feel free to use multiple scoped, themes, too — go wild. If you're looking for a step-by-step walkthrough to get up to speed, be sure to check out our tutorial on how to use the framework for styling buttons and toolbars.

How to enter

We're going to keep this simple: post a comment with a brief description of your project and a link to a functioning example. The winner will be decided by Filament Group based on the creativity, quality and inventiveness of their project.

Contest rules

  • Everyone is eligible, no exceptions.
  • You may submit any type of project that uses the jQuery UI CSS framework: public sites, demo pages or anything else that shows off your creativity and is publicly accessible (read: not behind a login).
  • You may enter as many unique projects as you wish; each will count as a separate entry. (Please don't post the same one over and over...that may count against you).
  • The entry deadline is Wednesday, February 25, 2009 at midnight.
  • The contest winner will be announced on Friday, February 27, 2009.
  • The winner will receive a single pass to the SXSW Interactive Festival, which includes admission to the SXSW Web Awards ceremony on Sunday, March 15. We will email you an access code that will allow you to register for free. (NOTE: the pass does not provide entry to the Film or Music festivals, nor does it include transportation, room/board, or meals — you'll need to cover those yourself.)
  • jQuery UI and Filament Group Inc. reserve the right to link to your project (we want to promote your hard work).

A little inspiration

To show off what is possible with the jQuery UI CSS framework, here is a really fantastic example of a plugin that uses the framework really well, from styles to icons. Nicolas Rudas created a very cool Apple-style file browser that also includes the theme switcher dropdown for good measure. He's taken this a step further by creating a jQuery API browser that uses his plugin. Very cool indeed.

(NOTE: Nicolas Rudas was not notified prior to the announcement of this contest, so Nicolas, if you'd like to enter you're still eligible to win. How's that for competition?)

image

There is a list of plugins that use the CSS framework on the documentation wiki but it's pretty short at the moment and we're hoping that this contest really gets people fired up to try out the framework for themselves.

BTW — Themes matter

Lastly, think about posting links to custom ThemeRoller themes along with your entries. Your submission should work well with the theme gallery presets (or any custom themes) but you'll get extra credit for adding a slick theme to accompany your entry. You can't win by only submitting a theme, but if you post a really cool one, we'll consider adding it to the gallery and naming it after you so you'll be super famous.

So...get to it, show us what you've got!

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Wow, great contest idea ... can’t wait to see some of the entries for this!

Comment by Martin Ringlein on 02/13  at  12:00 AM

Thanks Martin!

And to anyone who’s planning on submitting an entry, feel free to let us know in the comments :)

Comment by Scott (Filament) on 02/13  at  12:17 AM

Comment by Not Scott Jehl on 02/13  at  01:40 AM

Nice idea, I was experimenting with it a little. Maybe I should give it a shot!

Comment by Joan Piedra on 02/13  at  01:56 AM

friendly reminder that we’re running a contest for a free SXSW pass and uhhh… oh geez http://www.filamentgroup.com/examples/peeps/

Comment by Scott (Filament) on 02/14  at  12:50 AM

Scott, your demo crashed my browser :( It popped up with a notice that I should update Quicktime, and neither hitting Cancel nor Update would make it go away so I had to End Task… -1

Comment by Max on 02/14  at  06:29 AM

Comment by Vasile on 02/16  at  11:10 AM

@Max: yeah, sorry. It is indeed a bit heavy. It’s just for fun though - view at your own risk :)

@Vasile: Thanks, though it seems to work in some browsers at least… hmm.

Comment by Scott (Filament) on 02/16  at  08:28 PM

Now it works, tested with the same browser… Thank you!

Comment by Vasile on 02/17  at  12:15 AM

To anyone considering entering our contest:
Here’s a tutorial on using multiple themes on a single page
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Comment by Scott (Filament) on 02/19  at  08:51 PM

We’re actually finishing up on a new front-end for a system called Livelink ECM using jQuery UI. Figured we’d share it with the everyone and we can’t argue with free publicity (http://daersystems.com/LiveUI/?app=examples/jquery/config)

Comment by jiles on 02/20  at  08:05 AM

@jiles:  nice work! Cool to see all the themeable UI widgets in use.  The theme switcher is nice too. :)

Comment by Scott (Filament) on 02/21  at  01:36 AM

Can we submit one that’s behind a login so long as we provide a demo login?

Comment by George Roberts on 02/23  at  08:35 AM

Hi George - sure, as long as you can post the demo login publicly in the comments here. Looking forward to seeing what you’ve done!

Comment by Scott (Filament) on 02/23  at  05:49 PM

http://www.bo.ingv.it/RCMT/searchRCMT.html

Jquery UI for scientific-data visualization (seismology, Earthquake moment tensor solutions).
Enhanced UI Sliders with current-value pop-ups are used in controlling a dynamic LatLong selection box on Google-maps.

Problems in IE, and still runs on Jquery 1.2.6; very sorry for being busy on other projects right now ...but getting some attention on the page by this contest would surely change my boss’ priorities… and I would fix it for SXSW!

Comment by Luca Post on 02/24  at  01:40 PM

Hi Luca
Thanks for posting. That’s a neat little app but it doesn’t appear to use the UI CSS Framework as far as I can tell. Let us know if you update it to use the framework - you’ve still got a couple days ;)

Comment by Scott (Filament) on 02/24  at  05:39 PM

http://chessbomb.com/

ChessBomb broadcasts chess tournaments and matches online with realtime computer engine analysis. We use XMPP for the communication and jQuery UI for the interface. The jQuery UI CSS framework is used for almost everything on the site, including the front page and the application itself. The small parts which dont use it yet will be converted soon. The ability to switch themes is also in our roadmap, but we haven’t implemented it yet.

Comment by Peter on 02/25  at  08:29 AM

Hi again, I have included a ThemeRoller theme now (SouthWest):

http://www.bo.ingv.it/RCMT/searchRCMTnew.html

I will try to fix paddings etc by tonight deadline! ... but my app breaks with jquery 1.3.2, thus I’m using 1.2.6 + jqueryui 1.5.3, and I’m seeing a few limitation in this version of the css framework, like no rounded corners on buttons.

BTW the post about styling buttons on your site reports a wrong class name: ‘ui-state-default’ instead of ‘ui-default-state’.

Ciao!

Comment by luca Post on 02/25  at  02:34 PM

Hey Luca,
Your app is coming along nicely, but unfortunately this contest is for the new jQuery UI CSS Framework - that is, the one that UI has recently released and what ThemeRoller generates natively (not legacy 1.5.3).

The article above links to all of the resources and tools related to the framework so as not to cause confusion. The documentation of the framework API is here: http://docs.jquery.com/UI/Theming/API

Fortunately, it actually does not matter what version of jQuery or jQuery UI you use for this contest - we only care about the CSS Framework usage. You don’t even need to use jQuery at all - in fact, you don’t even need to use javascript!

Let us know if you’re able to update it for entry to the contest - you’ve still got ‘til midnight :)

Thanks!

Comment by Scott (Filament) on 02/25  at  07:43 PM

Still under heavy development, so some things may not be working properly.  Note that when you log in, the main dashboard page is not done yet so it appears blank with the exception of the navigation elements.  However, you can look at the DomainProtect, ServerProtect and Domain Search pages in the accordion.

http://dev.easyantispam.com/

Email address:
Password: demo

Comment by George Roberts on 02/25  at  07:51 PM

Some very nice entries coming in!

@Peter: Chessbomb look great - we opened up the bookmarklet and particularly liked how it looks in the UI darkness theme too!

@George: Great work - very cool to see the differences in the new site compared to the existing one. Does that grid component use framework classes? That would be neat…

Comment by Scott (Filament) on 02/25  at  07:59 PM

No, it doesn’t, though I think I’m going to look into converting it.  After I finish the rest of the site. :) As you can probably tell, we’re getting ready to do a rebranding, so I figured it was a good time to completely rewrite our stuff as well. :)

Comment by George Roberts on 02/25  at  08:02 PM

@Scott: Thanks :) Our entire dev team prefers the dark themes too - particularly Trontastic and Dot Luv look great. But we decided to have a light one as default, because the majority of web surfers prefer light pages. Our current theme is inspired by Dot Luv, but is heavily modified and looks quite different now. Here’s its ThemeRoller URL, if anyone is interested:

http://jqueryui.com/themeroller/?ffDefault=Arial,&#x2520sans-serif&fwDefault=bold&fsDefault=1em&cornerRadius=4px&bgColorHeader=0b3e6f&bgTextureHeader=07_diagonals_small.png&bgImgOpacityHeader=15&borderColorHeader=0b3e6f&fcHeader=f6f6f6&iconColorHeader=98d2fb&bgColorContent=cccccc&bgTextureContent=12_gloss_wave.png&bgImgOpacityContent=100&borderColorContent=bbbbbb&fcContent=222222&iconColorContent=9ccdfc&bgColorDefault=155a9d&bgTextureDefault=09_dots_small.png&bgImgOpacityDefault=20&borderColorDefault=333333&fcDefault=ffffff&iconColorDefault=9ccdfc&bgColorHover=2978c7&bgTextureHover=09_dots_small.png&bgImgOpacityHover=30&borderColorHover=222222&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=99b8d6&bgTextureActive=09_dots_small.png&bgImgOpacityActive=40&borderColorActive=096ac8&fcActive=292929&iconColorActive=00498f&bgColorHighlight=0b58a2&bgTextureHighlight=10_dots_medium.png&bgImgOpacityHighlight=30&borderColorHighlight=052f57&fcHighlight=ffffff&iconColorHighlight=ffffff&bgColorError=a32d00&bgTextureError=09_dots_small.png&bgImgOpacityError=30&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffffff&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow;=-8px&offsetLeftShadow;=-8px&cornerRadiusShadow=8px

Comment by Peter on 02/25  at  08:17 PM

Here’s a shortened version of the ThemeRoller URL: http://tinyurl.com/ccekp9 (unfortunately I can’t edit my previous comment)

Comment by Peter on 02/25  at  08:24 PM

Sorry I give up, there are lots of renamed properties and new things for the slider in UI 1.6RC6, and it’s 7:30 PM for me, I’m out!

ciao

Comment by luca Post on 02/25  at  09:35 PM

Thanks anyway Luca!

Comment by Scott (Filament) on 02/25  at  11:05 PM

We linked to a few more examples of our LiveUI tool at work at http://daersystems.com/LiveUI/. It’s mainly just to show how the sites can contain different layouts and content through a fairly basic JSON object. It’s intended as a front end to Livelink ECM, but I guess you could also use it to just display web content. And how can you possibly beat the Hokies theme on the feed example?

Comment by jiles on 02/26  at  04:05 AM

I did some work on jScrollPane to make it skinnable via the jQuery UI CSS framework. jScrollPane is “a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers”.

You can see the new version using the UI CSS Framework (on a page which is also skinned by the framework) here:

http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/

Hope you like it :)

Comment by Kelvin Luck on 02/26  at  06:00 AM

Results are in…
The winner of the coolest use of the jQuery UI CSS Framework goes to…
Chessbomb!

Congratulations, Peter! You’ve got yourself a ticket to SXSW Interactive 2009! We’ll send you an email next week with the details for registration.

Thanks to all participants!
We want to thank all of our participants for the time they spent working on this. In the end, it was very close, but we found Chessbomb to be the most complete use of the framework classes along with nice layout and an interesting concept. We hope this contest helped get the word out about jQuery UI’s new framework and perhaps we’ll hold another contest at some point down the road.

Thanks again!

Comment by Scott (Filament) on 02/28  at  04:22 AM

On behalf of the ChessBomb team, thanks for the award :)

Comment by Peter on 02/28  at  03:27 PM

Hi Peter - I need to get the full name and email address for the person receiving the SXSW pass for winning the contest. Please email this info to and we’ll set you up!

Comment by Todd Parker on 03/03  at  11:38 PM

Congrats Peter… Attracting digital creatives as well as visionary technology entrepreneurs, the event celebrates the best minds and the brightest personalities of emerging technology… CSS framework is especially important as it not only allows for easy theming of included jQuery UI but also allows plugin developers to create their own extensions ...

Comment by top max team on 07/31  at  02:20 PM

This is a great contest idea. Seems very creative and intelligent.

Comment by Basil on 11/21  at  07:02 PM

Great and reliable idea much realistic and very much cooperative one .

Comment by mcp on 12/24  at  05:04 AM

JQuery method is much realistic for the users because when we call the function then some issue occurs

Comment by mcsa on 12/24  at  05:06 AM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site