Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: AngularJS, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

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!

Posted in The Web at Mar 03 2006, 06:12:47 PM MST 28 Comments
Comments:

hi matt, good luck. can you post some samples (for the unimaginative people out there) as inspiration ? i've been wanting something like this -- all the time CSS is for content kind of sites. none of them for business/enterprise kinda sites. thank you, BR, ~A

Posted by anjan bacchu on March 03, 2006 at 09:20 PM MST #

Anjan - hopefully the first couple submissions can serve as good examples. If not, I'll try to create my own entry (and howto) in the next couple weeks.

Posted by Matt Raible on March 04, 2006 at 01:27 AM MST #

This is great! I love the zen garden, but have allways wished the styles could be implemented easier.
You mentioned styling of forms. Should I provide a second page that has a basic user input form on it?
also, I tend to use a table for columnar results of queries (using display-tag of course). Do you want a page that?
I think these pages would be useful in this framework.

Posted by Paul Lofte on March 04, 2006 at 10:57 AM MST #

> <em>You mentioned styling of forms. Should I provide a second page that has a basic user input form on it?
> also, I tend to use a table for columnar results of queries (using display-tag of course). Do you want a page that?</em>

Definitely - both of these would be very useful. The AppFuse demos provide some examples of forms, but unfortunately don't show all the possible elements. Use username "mraible" and password "tomcat" to login.

Posted by Matt Raible on March 04, 2006 at 12:06 PM MST #

I assume by submitting entries I'm supposed to create an issue in jira and attach a zip?
I have done this, with the added html files I spoke of in my last comment.
If you are going to re-create something like oswd or zen garden I would suggest locking down the html. I found myself wanting to change the structure of the documents.
I like zen garden because all the styles are on equal footing when it comes to the html their are rendering.
OSWD - has all of these great designs but the html can be inconsistent accross designs.
If you are going to build this up to be something similar to zen garden - except aimed at the corporate web sites. I would love to help out.

Posted by Paul Lofte on March 04, 2006 at 05:10 PM MST #

<em>> I assume by submitting entries I'm supposed to create an issue in jira and attach a zip? </em>

Yes. If you choose Project "CSS Design Contest" and Issue Type "Contest Entry", there's a customized form for entering contest submissions. I've seen your entry and that'll work too. I'm sent an e-mail to JIRA folks to see how to show only one issue type for this project.

<em>> If you are going to re-create something like oswd or zen garden I would suggest locking down the html. I found myself wanting to change the structure of the documents.</em>

I'm hoping that everyone goes by the honor system at this point - and doesn't change the HTML. Building and publishing a showcase application would certainly help.

<em>> If you are going to build this up to be something similar to zen garden - except aimed at the corporate web sites. I would love to help out.</em>

If we're going to go big like the zen garden, I should probably buy a domain name: cssframework.org is taken, but cssframework.net and .us are available. I'm open to suggestions - and would love any help.

Posted by Matt Raible on March 04, 2006 at 05:20 PM MST #

Hmmm, cssfw.org is available. It's only $3 through Yahoo Domains. Should I get it?

Posted by Matt Raible on March 04, 2006 at 05:24 PM MST #

Shouldn't it be something more like webappcss.org or enterprisecss.org? Otherwise both sites (cssframework.org and cssfw.org) could get confused.

Posted by GB on March 05, 2006 at 01:24 AM MST #

Could this just be an extension of appfuse? why not have a css.appfuse.org?
appfuse's main goal is to be a kick start to web app development. the css framework (to me) is an extension of that, it's part of the kickstart.
I believe that it should have it's own life and should not be tied to any development environment outside of CSS and XHTML.
I guess it depends on your goals? and whether you want to do the marketing for another project.
devil's advocate must ask : how much the appfuse branding would help or hinder it?

Posted by Paul Lofte on March 07, 2006 at 12:04 PM MST #

I've thought of this Paul - and I think it's a good idea. It's something I'll likely go with since I already have several servers setup for AppFuse. This way, it should make it easier for users to select the CSS theme they prefer.

Posted by Matt Raible on March 07, 2006 at 12:18 PM MST #

I'm in.... Stay tuned for a danish entry ;)

Posted by Anders T. Pedersen on March 10, 2006 at 10:23 AM MST #

One thing about the CSS Zen Garden is the HTML code is really easy to style. Almost every element is tagged with some sort of Class or an ID. This would make it much easier to come up with a large variety of designs for the same HTML document. While I was styling the framework I noticed there were a few things I'd like to change just so those elements could be controlled individually through the style sheet. Just a thought. Looking forward to seeing all the submissions. =)

Posted by Andrew Cornett on March 17, 2006 at 02:14 PM MST #

Link to downloads and the CSS Framework itself are broken.

Posted by gerryg on March 28, 2006 at 03:32 PM MST #

Yeah, I'm aware of this. I talked with Mike Stenhouse this morning and he said it should be back up in the next 24 hours.

Posted by Matt Raible on March 28, 2006 at 04:04 PM MST #

Gerry - the CwS style has been resurrected: http://www.contentwithstyle.co.uk/Articles/17/a-css-framework.

Posted by Matt Raible on March 30, 2006 at 12:18 PM MST #

Matt,

I put together a site to help demonstrate/test various themes and content. I think it's important that all entries look and function properly for all of the layouts and for any reasonable content that marked up according to the framework's guidelines. I know that this is pretty much the idea behind css.appfuse.org, I did this mostly for my own use and learning. This is still a work in progress, but you can check it out at:
http://www.helmstetter.com/css-framework/

When you select a new style, you'll have to reload the page and/or the frame. I tried some javascript to fix this but couldn't get it working.

Also, I made 2 small changes to the submitted styles:
  1. I changed the branding div to include the appropriate branding logo via css, rather than putting this in the content. This is a cleaner approach (IMO) allowing for each entry to be individually styled/branding without changing the content.
  2. I also implemented a minor trick to set the currently selected nav menu item using css. I put a small chunk of css for this in each theme's default.css, something like this:
    #home #nav-home a,
    #articles #nav-articles a,
    #archive #nav-archive a,
    #photos #nav-photos a,
    #about #nav-about a,
    #contact #nav-contact a {
        color: white;
        background-color: black;
    }
    
Let me know what you think or if you have any comments/suggestions. A complete archive of this content is available here.

Posted by Mark Helmstetter on April 09, 2006 at 02:43 PM MDT #

Mark - this is *very* cool, thanks for putting it together. Have you tried any of the other theme submissions in JIRA? There's only 2 other ones, but it might help prove your setup works well.

My main goal with css.appfuse.org is to do just like you've done - and eventually allow users to add new themes, etc. The 2ndary goal is to make it a repository of themes that folks can download (maybe zipping them up dynamically). I've started a project on java.net: http://appfuse-css.dev.java.net. Would you like to join us and help develop css.appfuse.org?

I'm not tied to css.appfuse.org being AppFuse-powered, I just want to make it a good display and an easy download. Making these themes work easily w/ AppFuse should be a secondary concern, and not really part of this project initially.

Posted by Matt Raible on April 11, 2006 at 11:07 PM MDT #

I just tried the last entry (haven't uploaded it to the the public server yet). This brings up an issue regarding standards for submissions. I haven't looked really closely at FuseApp001, but it seems that this entry includes mods to files other than layout.css. My interpretation of the original CSS Framework sources is that the intent was that only this file be modified and that the framework files not be modified by a particular "theme". I'm not a CSS expert, so perhaps there are technical issues with this approach? I guess that Zen Garden doesn't place any restrictions on themes like this, they just apply the submission's CSS to a fixed set of markup.

Maybe I'm thinking about this too much like a deveoper, rather than a designer. I guess I'm just thinking that if everyone makes their own modifications to the entire set of CSS, then really the only component of the "framework" is that HTML markup standards.

I'm certainly not opposed to integrating the testbed into AppFuse or an extension/sub-project of AppFuse. I just did this in PHP becuase I wanted something as simple as possible and something that would be easy to deploy/test. I've played around with AppFuse a little, if I get a chance I'll checkout appfuse-css and see what it's all about. I acutally also experimented with a pure JavaScript version of this concept, but wasn't able to get it working in the short time I had to work on it. That would have been really cool, as users could download a zip without need any kind of runtime/platform requirements.

Posted by Mark Helmstetter on April 12, 2006 at 07:09 PM MDT #

The problem is the contest was a bit unclear as well as the css framework. There are something like 10 stylesheets in the framework, and naturally I didn't know which to modify so I just used the layout I wanted and modified that stylesheet. If this were to really be compared to the CSS Zen Garden, then the HTML file would be coded a little better so that all of the elements on the page had some class or id. This way the designer could control all of the elements on the page and not have to change anything to get things to work properly. Anyway I may be the only one with a problem with the framework, but the one thing that's good about the zen garden is it is really simple to come up with tons of different layouts because the framework is completely tagged and there is only one stylesheet to design with. Thats it. This contest was a little unclear with what to do, and that's probably why a few people had to change some html and modified the "wrong" stylesheet.

Posted by Andrew Cornett on April 13, 2006 at 12:05 PM MDT #

Andrew, I hope that my comments did not come across as a criticism of your submission, that was not my intent. I think that we're all trying to figure this out, prove the framework, identify any "bugs" or areas of potential improvement and demonstrate and illustrate it's usage.

I agree, I did find having so many different stylesheets make learning how to apply CSS Framework a little more difficult at first. After reading Mike Stenhouse's blog entry on Modular CSS, it makes a bit more sense to me. I think that we could perhaps come up with some CSS Framework Usage Guidelines and maybe a Quickstart Guide or something like that. The hard part will probably be getting everyone to agree on that should's and shouldnt's.

I think that a wiki would be the perfect place to host these documents, but I think that some sort of forum would also be helpful too. Right now, everyone's comments, questions, suggestions, problems, etc. are all spread over a bunch of blog entries making it difficult to have a more centralized place where people can ask questions and discuss. I'm thinking that this would be a place where people could ask "How do I..." or "When I do X,Y - Z happens". Optionally, there may also be a separate bug tracking system where problems identified in the forums are officially reported and tracked.

I'm just thinking outloud here, maybe some of this is overkill for just the core CSS Framework? Of course all of this will require effort, and a reasonable amout of interest, support, and effort from the community. So far, I'm not sure that I've seen enough interest in the framework and this contest to demonstrate that this is all viable. But who knows maybe once we get some nice looking themes and the word starts to spread, there will be more community interest.

Posted by Mark Helmstetter on April 14, 2006 at 12:12 AM MDT #

Can someone post the unmodified css framework source files? http://www.contentwithstyle.co.uk/ is still down.

Posted by Brian on April 21, 2006 at 12:51 AM MDT #

The site works fine for me. You check it out from Subversion:

svn co https://appfuse-css.dev.java.net/svn/appfuse-css/trunk/cssframework

Or download it from http://css.appfuse.org/cssframework.zip.

Posted by Matt Raible on April 21, 2006 at 12:59 AM MDT #

Hi, just one question: When is the new deadline? Regards, Marc

Posted by Marc on April 25, 2006 at 04:06 PM MDT #

The new deadline is midnight (EST) this Sunday, April 30th. Of course, if you manage to submit it before we start voting on Monday, I'm sure we'll let it in. ;-) I'll be in New York City on Monday morning and hope to start the voting on the AppFuse CSS Mailing list then.

Posted by Matt Raible on April 25, 2006 at 04:17 PM MDT #

Wow, this was fast ;) I will take a look on this... I suppose an entry has to contain all possibilities/layouts, that are one HTML file and all the CSS files provided above, with which you can switch between the different layouts, correct? 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? Sorry, I came via Andreas ViklundĀ“s Blog and have some difficulties to find the informations for this contest ;-)

Posted by Marc on April 25, 2006 at 04:27 PM MDT #

Mark - I've tried to answer your questions in the following post: http://raibledesigns.com/page/rd?entry=css_framework_design_contest_only.

Posted by Matt Raible on April 25, 2006 at 05:20 PM MDT #

Thanks a lot, Matt! Hope I can finish at least some of the layouts, otherwise this would be just a simple Webdesign Contest, and I think a little bit variety should be possible to show the power of CSS ;)

Posted by Marc on April 25, 2006 at 05:27 PM MDT #

Hi, If it helps. There is a plugin for firefox called Web Developer. I would reccommend installing it and having a look at how these sites look when css is disabled etc. The plugin gives you a very good idea of how good css is used in these sites.

Posted by reddeagle on May 02, 2006 at 07:39 AM MDT #

Post a Comment:
  • HTML Syntax: Allowed