Raible Designs

CSS Design Contest: Time to Vote

It's time to vote for the CSS Framework Design Contest! Counting votes and making sure everyone only votes once is always a challenge in these types of contests. I think the best way to ensure honesty is to have people send an e-mail to a mailing list. So here's how to vote:

• Pick your favorite design from the entries.
• Post an e-mail to [email protected] with subject of "My CSS Design Contest Vote".
• Vote for your favorite theme by putting "My favorite theme is XXX" in your e-mail.

Let the voting begin!

Rebooted

As you can hopefully see, I've rebooted the HTML version of this site. I apologize to anyone using IE - I haven't even looked at the site using IE. Everytime I startup Parallels on my MacBook Pro, it locks up the system and I have to reboot. Installing this new theme was pretty painful, mostly because I had to do it with a 20K connection through my cell phone. I'm staying at The New Yorker Hotel in NYC, and even though they advertise "free wireless", it doesn't work for me.

I hope you like the new theme - clicking on the different categories will give you different variations of it. Clicking the "Roller" category will allow you to see version I'll be contributing back to the Roller project. If you see any issues at all, please let me know. Most of them should be fixable with a bit of CSS. The only thing I still need to do is figure out how to get Roller to use the last entry's title in the <title> tag. Google loves good titles.

Update: OK, so most people don't like the reboot - including folks on the CSS Reboot site. Personally, I like the new layout, but agree that the default colors need work. I do like some of the alternative colors, like The Web category's. I'm open to suggestions - what would you like this site to look like?

Update 2: The colors might suck, but my Sitescore results have gone up significantly. The funny thing is the main thing I'm lacking is different titles on each page.

Update 3: I solved the title problem. You can do this in your Roller templates too if you like.

#set( $xmap = $pageModel.getRecentWeblogEntries(1,'nil') )
#foreach( $day in $xmap.keySet() )
   #set( $recentEntries = $xmap.get($day) )
   #foreach ($var in $recentEntries)
       #set ($title = $var.title)
   #end
#end
    <title>#showWebsiteTitle() | #if ($page.Name == "Weblog") $title #else $page.Name #end</title>

CSS Framework Design Contest - only one week left!

It's time for another CSS Framework Design Contest Update. The contest will officially end this weekend (Sunday night), but hopefully people will continue to contribute designs after that. After the initial deadline passes, I'll send out a vote to the AppFuse CSS Mailing List. If you have a better idea of how to handle voting, I'm all ears. Maybe we should use JIRA?

I spent a few late nights last week converting some of Andreas Viklund's Templates to use the CSS Framework. All the ones I converted, along with many other contest entries, can be seen at http://css.appfuse.org/themes. For many of these, I've replaced the default forms.css with one that has CSS from Wufoo.com. If you'd like to include a similar form in your entry, just copy the <form>s from form.html into your own page.

I've also looked at incorporating the CSS Table Gallery, but found many of the designs to be pretty ugly. Nevertheless, most of them work with the displaytag, so I might include some of them in the future. In the meantime, if you want to see what they look like, go to css.appfuse.org/users.html (user/pass: mraible/tomcat). Change the "css" parameter in the URL to match a table's stylesheet, and you should see what it looks like.

To answer a few questions I received earlier today:

Does an entry have to contain all possibilities/layouts?

No. I've come to realize that it's easier to only accomodate one layout. If users really like your design, hopefully they'll morph it to a different layout sometime in the future. If you look at the Andreas themes I converted, they only have a main page and a form. They'll likely be enhanced in the future for form elements, calendars, tables, etc. - but that should be pretty easy (and I'm willing to do that work).

Am I "allowed" to overwrite some settings in the different layout CSS for different settings, depending on which layout css is used beside the layout according stuff? For example settings (appearance, design) for the main navigation and so on?

Yes. You can change any of the CSS files you like. The only thing that needs to remain constant is the HTML - and then only the ids and order of <div>s, etc. needs to be the same. The general idea we're hoping for is to put your "theme" in a directory and then refer to it dynamically as part of the showcase. We're in the process of enhancing the showcase site to use the same HTML pages for all themes.

Don't forget about the prizes: an iPod (60GB), an iPod (30GB) and a 2GB Nano. In addition, you could use your cool new design for the CSS Reboot.

CSS Framework Design Contest Update

Entries for the CSS Framework Design Contest are continuing to roll in. However, I don't know if the contest will finish at the end of this month. We've only received 5 submissions so far (1 being my own) and I'd like to get at least 10 good ones for folks to choose from.

My first attempt to show off the entries didn't do any justice to the submitted themes, so I've created a new showcase application. The new CSS Framework Themes application is available at http://css.appfuse.org/themes. It allows you to view the current submissions in the raw form that they were submitted. I've come to realize that a good design is tought to make flexible (where you can use all 6 layouts), so it's probably best to just have a single layout for each. Then again, juisefuse allows you to use all the layouts, so I guess it's up to each designer.

When I first started this contest, I envisioned people using the CSS Framework as a base, and overriding classes and styles in their own stylesheets. However, most of the entries contain modifications to the core CSS files - so it's probably best to allow free-form modifications of the CSS. Last night, I created my own entry based on Andreas Viklund's andreas01 theme. I did this to see what pain points there are in creating these themes. Although the experience wasn't too bad, I did find myself having to make one exception and break the "don't modify the HTML" rule. I had to move the top image out of the header div in order to get things positioned correctly. Oh well. I hope to convert some more of Andreas's themes this week. I also hope to incorporate some of the CSS from Wufoo's forms into these designs. After that, I'll start trying to figure out how these can fit into AppFuse and maintain their look and feel.

What's my pipe dream for css.appfuse.org? I'd like to make it possible for users to download and use these themes quickly and easily. Furthermore, it'd be pretty cool to develop an XSLT transformer that converts the main HTML page from each theme into decorators for AppFuse, Drupal and Roller. I don't know if this will be possible, but it certainly sounds cool.

Update: I added a new Deliciously Blue theme, which includes a form example based on CSS from Wufoo.com.

Update 2: I've converted three more of Andreas's themes: andreas03, andreas08 and andreas09. They're not pixel perfect, but they're pretty darn close. All of the themes in this contest (including the "showcase" application itself) are available in Subversion from the AppFuse CSS Project on java.net.

What happened to the design?

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information. Good idea - let's watch the web get ugly.

css.appfuse.org

It's almost the end of March and we've only received a couple entries for the CSS Framework Design Contest. In an effort to show what contest entries look like, I've developed and deployed an application to http://css.appfuse.org (login as an administrator with mraible/tomcat). This application utilizes the CSS Framework and has a few themes packaged with it. In addition, you can set it to use an external stylesheet to make development easier. The default theme and selectable themes are pretty ugly right now, so don't get your hopes up. The good news is this is a work-in-progress, so hopefully it'll get better soon.

The theme setup I'd like to use in AppFuse relies on loading a default.css from styles/themes/<theme name>. I've designated styles/default.css as a place to import the css-framework files, as well as specify rules for all themes. I'm open to alternative suggestions, but I think this is a good start.

I hope to evolve this application, along with the CSS Framework Design submissions to show what's possible with CSS in web applications - as well as provide a repository of downloadable themes. It's likely we won't ship the "CSS Selector" logic with AppFuse, but it should be easy to install one of these themes in your AppFuse-based application.

You'll notice that the themes currently available aren't working that well. I'm working with the authors to see what I need to fix. It's probably related to how I have things setup in the application. One of the things I discovered in this exercise is that CoolMenus isn't very CSS-friendly. It requires you modify JavaScript to change its positioning. I've left the menu in place for now, but I hope to replace it in the next few weeks with a more CSS-friendly version.

Since we've only received two theme submissions for the CSS Design Contest, I'm going to extend it to the end of April. Hopefully css.appfuse.org will encourage more participation. Any thoughts, comments or bug reports are most welcome.

CSS Framework Design Contest

Over the past 2 weeks, I've managed to raise $900 for the CSS Framework Design Contest. Thanks to friends, AppFuse users and SourceBeat their donations. You guys rock!

With this cash, I hope to give away 3 prizes: an iPod (60GB), an iPod (30GB) and a 2GB Nano. Of course, if the winners decide they'd rather donate the money to charity, that's cool too. Any additional donations I receive I'm going to send to the Elena Steinberg Memorial Fund.

Here's the rules of the contest: Create a theme (mostly CSS, images allowed) that makes the CSS Framework look good (download source files). This framework is simply a structured bit of XHTML for page layout, and a number of CSS files for positioning. What's missing is a number of good-looking themes to make this framework look even better. I have aspirations of creating something like CSS Zen Garden - but with more of a web-application flavor.

I'll use the same submission guidelines as the CSS Zen Garder, but add that your themes should be Apache licensed. In my mind, this simply means that anyone can use your theme - they simply have to retain your contact information in a comment w/in the stylesheet itself. I'd like to distribute (or at least make available) the top themes to AppFuse users - so they aren't stuck with a single theme. In addition, it probably wouldn't be too hard to make these into Roller themes.

The CSS themes from this contest should be usable in corporate intranets, as well as customer facing applications. Sure, wacky designs are cool, but sharp and clean are better. Extra points will likely be given for themes that pretty up how forms are laid out and displayed. Ajaxian.com links to some good examples, particularly Wufoo.

I've created a CSS Design Contest project in AppFuse's JIRA - so please submit your entries there. The contest ends on March 31st, 2006 at midnight MST. After that, the winners will be decided using some sort of voting mechanism. I hope to create an application to showcase all the entries in the next week or two.

For inspiration, you might checkout Open Web Design and Open Source Web Design.

Good luck folks - may the best design win!

Fundraiser for CSS Framework Design Contest

A week ago, I received a $250 donation for "AppFuse Development". This is a significant amount of cash, and unfortunately the committers can't do a "beer at the local pub". We've decided that a good thing to do with the money is to use it to buy a prize for a CSS Framework Design Contest. The AppFuse Logo Contest went well, but I also gave away an iPod to the winner.

This contest will be a bit different. First of all, the CSS Framework is not AppFuse-specific at all. It's just a structured bit of XHTML for page layout, and a number of CSS files for positioning. What's missing is a number of good-looking templates to make this framework look even better. I have aspirations of creating something like CSS Zen Garden - but with more of a web-application flavor. Hopefully we can use the same submission guidelines as well as offer the contest's themes for anyone to use. The CSS themes from this contest should be usable in corporate intranets, as well as customer facing applications. Sure, wacky designs are cool, but sharp and clean are better.

I hope to start this contest as soon as I've raised some funds for good prizes. Of course, donating good prizes is most welcome too. In order to provide some motivation, I'm going to do something that will hopefully inspire you to donate. It's butt-ass cold in Denver this week, and it's not warming up anytime soon. Here's the current forecast from the local news channel:

So to try and raise money, I'm going to ride my bike to work every day this week. Will this inspire folks to donate? I don't know, but it's worth a try. I'll try to be in the office by 9, and won't be home before 5. This should ensure that it's good and cold out. Furthermore, I'll blog about my ride everyday, and hopefully snap some pictures as well. It's supposed to snow tonight, so this should be good.

Remember, anything will help - and all donations will go to a good cause. I plan on starting the actual design contest next week sometime. Now it's time to donate using the button below - and watch me freeze my ass off this week!

Testing with Performancing

Testing to see if the Performancing Blog Editor works with Roller. Sweet! It looks like it works. I really like this editor - works quite well and allows you to view your blog in a split screen. However, one of the reasons I like using MarsEdit and w.bloggar is to avoid issues with Firefox crashing.  I also tend to post a lot of blogs from my browser - so this is probably a better solution than that.  The WYSIWYG editor is quite nice.

Another cool Firefox plugin is FireFTP.

Script.aculo.us vs. Dojo

For the last week or so, I've been hearing more and more about Dojo. It's mostly because I've been listening to podcasts, but also because it's integrated into both WebWork 2.2 and Tapestry 4.0 (via Tacos). In AppFuse 1.9, we added Script.aculo.us as one of our Ajax-enabling libraries.

I chose Script.aculo.us because I've used it in the past and it's worked very well (along with its underlying engine, Prototype). Because it's development seems to be largely driven by Ruby on Rails - I figured it was a good library to include. However, since AppFuse includes both Tapestry and WebWork - it seems like including Dojo might be a good idea too.

So my question is - do Script.aculo.us and Dojo do the same thing? Has anyone done a detailed comparison of these two Ajax frameworks?

I realize that Dojo is more of a "toolkit" that's been developed from a bunch of existing DHTML libraries - but can it do the drag-n-drop and cool effects like script.aculo.us can? Can Dojo do things that DWR + Script.aculo.us can't? I haven't used Dojo (yet), that's why I'm asking.

I really like the idea behind both projects, but I can't help but think Script.aculo.us is a little better. Why? Because its creator is a designer (vs. a developer) and its development is driven by one of the most popular web frameworks and it was built from a real-world application rather than a consolidation of libraries.

Dojo, on the other hand, has much better documentation. However, the project lead works for JotSpot. Apparently, the JotSpot Wiki is supposed to be a showcase of what Dojo can do. While the jot.com site looks OK - the Dojo Wiki (based on Jot) is horrific. Things don't line up and it looks awful (in both IE and Firefox on Windows + Firefox on the Mac). On my last project we used Jot and it left a lot to be desired.

I hate to judge a library by the applications it creates - but comparing fluxiom to Jot makes me think Script.aculo.us is the better library. Then again, fluxiom hasn't been released yet.

On a related note, it's possible the Open Ajax project will consolidate the Ajax frameworks - but who knows when that will be released.