A CSS Framework

Mike Stenhouse's CSS Framework seems like it might be a good candidate for inclusion in AppFuse. In his article about this framework, he basically says that there are 6 basic layouts that "cover most of the blogs out there and most of the corporate sites as well". He shows you how it's possible to use a single XHTML page, and use CSS to achieve all of these layouts w/o changing your HTML. This is huge IMO because you can accomplish all the different layouts w/o changing your markup. Very cool. Hat tip to CSS Beauty.

Posted in Java at May 23 2005, 10:26:01 AM MDT 15 Comments
Comments:

on the topic of what you can do with css without changing your XHTML: i assume you've seen it before, but for any who haven't, check out csszengarden, a kind of running "standards meets design" gallery. To encourage the use of a CSS framework, how about a "skin appfuse" competition on the list?

Posted by tanguyr on May 23, 2005 at 11:17 AM MDT #

I agree that CSS Zen Garden rocks, I used it for Equinox's theme. I like the idea changing AppFuse's SiteMesh decorator to use a CSS-friendly template (like the one in this article) and having another contest.

Posted by Matt Raible on May 23, 2005 at 11:34 AM MDT #

I'm personally one for simplicity in structure of style sheets - so one of the first things I noticed with appfuse was the large volume of style sheets and how difficult it would be to maintain. I suspect that is mostly to do with copying style structure from different components that have been integrated into appfuse, however simplifying the whole page structure as mentioned on the page above would be excellent. Certainly, producing a very simple and clean style sheet to define the look of the entire application would better for easy customization of the design for any application developed using appfuse. It may also allow users of appfuse to generate their own style for their applications and interchange them when newer versions of appfuse are released, since the structure will hopefully have remained the same (Not that I have noticed this to be a problem in the past, but it may). just my 2cents anyway.. you can have them for free =-P

Posted by Cammm on May 23, 2005 at 11:35 AM MDT #

This is a very nice and practical idea. I would really like to see it in AppFuse ASAP :).

Posted by Ahmed Mohombe on May 23, 2005 at 11:36 AM MDT #

Would be very interesting for it to be included in AppFuse. Keep on the goo^h^h^h excellent work! Patrick

Posted by Patrick Turcotte on May 23, 2005 at 02:25 PM MDT #

I work with a rather large financial web application and we basically treat the XHTML structure as rigid from the design standpoint. We instead concentrate on stretching the CSS as far as it will go without breaking cross-platform (IE is such a bitch). Naturally this enforces a very well thought structure and adds to consistency of our pages. It is truly amazing what we have been able to do, all without having to touch 1,000+ JSPs.

I have worked with a lot of templating systems over the years and without a doubt, just not touching the XHTML is the best way to do it. Any enhancements we absolutely require we either add via a page decorator such as SiteMesh or by using javascript.

In conclusion, this would be a <strong>great</strong> addition to appfuse. The first thought in every designer's mind is "how can I customize this thing?"

Posted by Dan Allen on May 23, 2005 at 03:36 PM MDT #

I had written an article on CSS and how designers/developers can work together. I was asked to write a proposal for JavaOne on the subject, but overall, it's too general to be a 'Java' presentation.<p /> <p /> http://hookom.blogspot.com/2004/12/easing-project-development-with-css.html <p /> I also have public examples of retaining the same XHTML markup, but changing the layout via CSS: <p /> http://www.hookom.net/jacob/design/smo/html/index.html

Posted by Jacob Hookom on May 23, 2005 at 04:01 PM MDT #

This would be an excellant addition to the framework for a couple of reason. (1) Appfuse is quickly becoming a go-to-framework for best standards and blueprints in developing J2EE webapps. Having a standardized (and best practices) blueprint for CSS integration adds a significant educational benefit, and (2) having a reliable and well tested CSS framework would add a substantial reduction in overhead for developers. Just some thoughts...

Posted by David Thompson on May 23, 2005 at 04:56 PM MDT #

I like the concept, but I'd be a little careful about using a CSS framework. Personally, I would create the html structure and define the class names and id's myself, independent of any css framework. That way you will have a better understanding of the whole picture and more control over your css. Of couse, it might be a good idea to take some pointers from existing css sits as far as naming conventions, hacks/tricks, etc. And the comment above anout AppFuse having too much css. I don't think its the amount of css in appfuse, but rather how it is structured. There currently isn't a standard way to write your css. There are no rules or patterns to follow. You can just put everything into one file in any order. And that's the major problem. If the existing css code was cleaned up a bit and seperated into logical sectoins (or even files), it would make it a lot easier to work with. But the overall size of it wouldn't really decrease (if anything, it'll increase.)

Posted by Ramin on May 23, 2005 at 05:11 PM MDT #

I find the Phonophunk style pretty impressive. Even though the stylesheet's quite complex (IMHO), I really love the on-the-fly changing CSS feature.

Posted by Fredo on May 23, 2005 at 05:27 PM MDT #

&nbsp;&nbsp;&nbsp;I don't think its the amount of css in appfuse, but rather how it is structured.

Yes sorry, this is what I was trying to refer to. CSS can get very complicated and funky with only a minimal site structure to work with - however the site structure itself is a bit of a mish mash of different projects and templates which can make things more unmanageable. An attempt at simplifying all of that would be a challenging task =-)

Posted by Cammm on May 24, 2005 at 02:28 AM MDT #

The more I see this framework the more I like it. It is just GREAT!!! Hoping to see it already in Appfuse 1.8.1 Cesidio

Posted by Cesidio on May 25, 2005 at 01:48 AM MDT #

Hi guys, sorry to butt in. In reply to Ramin: I've been using my framework for a while now and while remembering the generic ids I've used for each of my page elements did initially give me a bit of extra mental load, I've found that it's incredibly useful when going back to maintain my code. Without looking at the source HTML I already know what each of the elements are called in projects I handed off months ago. It's probably not for everyone - an extra learning curve is the last thing you need when start something complicated, but it suits my workflow down to the ground...

Posted by Mike Stenhouse on May 25, 2005 at 03:27 PM MDT #

[...]These days, CSS frameworks are quite a buzz word in web world. I am not sure how many people use it but surely there are plenty of cost-free options available for everyone. Weather it a big team or an independent designer who work on different projects on a regular basis.[...]

Posted by Rajveer Singh Rathore on August 12, 2008 at 03:50 AM MDT #

Hi Matt,

Thanks for the email, glad you fixed the broken link. Here's another CSS3 cheat sheet that might be helpful to someone: http://websitesetup.org/css3-cheat-sheet/

Cheers,
Robert

Posted by Robert Mening on October 24, 2014 at 12:52 PM MDT #

Post a Comment:
  • HTML Syntax: Allowed