Matt RaibleMatt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, 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.

RECENT ENTRIES


Tag Cloud


abbie appfuse birthday denver family grails gwt jack java javascript jsf linkedin maven montana roller skiing softwaresummit spring springmvc struts2 travel trish vacation webframeworks wicket
« Open Source CMS... | Main | Denver Tech Meetup... »
Thursday September 29, 2005

How do we get good designs for the CSS Framework?

I love the idea of Mike Stenhouse's CSS Framework. It's so simple: name the elements in your XHTML with a specific set of names, and then create your CSS to match that. The only problem with this framework is I haven't seen any good-looking designs on top of it. For good-looking design examples, see the CSS Zen Garden or Open Source Web Design.

While the CSS Zen Garden is nice, most of the designs are not useable for web applications. They're more of a showcase of what CSS can do, and often contain too many images for a real-world application or website. The designs from oswd.org, on the other hand, are perfect for web applications. However, the underlying HTML is different for each design.

So how do we marry the two? Maybe we should lobby some designers at oswd.org to use the CSS Framework for their designs? I think this would be a great asset to many communities - imagine what you could do with your Drupal theme if you didn't have to change your template files (only CSS). That'd be pretty cool.

Posted in The Web at Sep 29 2005, 05:47:37 AM MDT 16 Comments
Comments:

Think Mike was about to do something with that idea ...

Posted by pascal opitz on September 29, 2005 at 06:24 AM MDT #

Seems like the domain's down at the moment with this message: <em>This domain name expired on 09/24/05 and is pending renewal or deletion</em>.

Posted by François Beausoleil on September 29, 2005 at 06:28 AM MDT #

What does it mean to have a CSS 'Framework'? Do you just mean a common naming convention with selectors?

Posted by Jacob Hookom on September 29, 2005 at 06:57 AM MDT #

Another way to ask a question: How do we make our web apps look like eye candy?

PHP is great for server side, Drupal, vBulletin, etc. But.. if you are Java centric, you can trump PHP w/ much better, game like, tivo like UI!! ;-) Don't go down w/ the sinking ship Matt, in the futrue, there will be no diference btw apps and web sites. Link bellow is an example web app of the tivo like UI.

.V

Posted by Vic on September 29, 2005 at 07:02 AM MDT #

Matt, maybe you could begin from putting a repository for CSS Frameworked based web design templates. a simple web app that explain a little bit about the CSS Framework and allows designers to upload their templates as zipped file.

Posted by Cesidio on September 29, 2005 at 08:55 AM MDT #

I think the real win would be getting the big blog-tool providers onboard the CSS Framework bandwagon. If SixApart, Wordpress, Roller, etc. all got on board with their default layouts, you'd have a bunch of designs (some good, others likely not so good) in a reasonably short period of time.

Posted by Jason Shao on September 29, 2005 at 12:28 PM MDT #

The problem with webapps & CSS integration in general is that each page is slightly diffferent so you don't have a 'standard' DOM to style. The choices are 1.) Muck the CSS up a bit to deal with every variation of content(we do this with a generic style.css and page specific .css) and you still have the CSS mucking to support different browsers. or 2.) Force content to conform to a pre-ordained DOM, but your users will probably be terribly unhappy with that.

Posted by Keith Sader on September 29, 2005 at 11:45 PM MDT #

I don't think the problem exists with whether or not we use CSS, XHTML, some type of next-gen "killer framework" or even applets. I believe that the main reason you see a "call to arms" for app designs is the people that write frameworks -- especially Java-centric frameworks -- tend to bury themselves in the theory, the server-side, etc., and blow off the UI until the last minute, then cobble something up that "will get the job done".

I've seen developers that are by far the smartest people in the rooms that I've been in that may have a very granular understanding of the architecture of the platform they are working on, but yet have no clue about the UI. I think this philosophy is most apparent in the current releases of JSF, with the incredibly inane HTML code in their standard widgets that use nested tables, etc. Most developers that I have known in my career treat HTML and other web UI markup as an afterthought and somehow a lesser language than Java,XML, etc. This tends to become more evident as developers progress up the ladder. How correct is this thinking?

Posted by Danilo Gurovich on September 30, 2005 at 07:31 AM MDT #

Danilo - I think the reason that so many Java developers don't care about the UI is because they don't know <em>how</em> to make it look good. Most folks say they know HTML and CSS, but do they *really*? Do they know the quirks that show up b/w IE and Firefox and recognize that "margin: 0 auto" doesn't work in IE for the Mac? Personally, I think the UI, HTML and CSS is one of the most important things. But then again, I was an HTML developer for <em>years</em> before I became a Java Developer.

I see the <em>crappy UI</em> problem similar to the poor QA problem. Often, projects and companies won't hire designers or QA because the developers can get the job done <em>good enough</em>. This results in developers doing both the UI and QA and working 80 hour weeks to get it all done. Yeah, it sucks, but it also seems to be a common practice. IMO, it's one of the big reasons that PHP and RoR have been so successful. The guys developing these apps tend to have a good sense of UI design and they care what the UI looks like. A pretty app beats an ugly app any day - no matter what the underlying language is.

Posted by Matt Raible on September 30, 2005 at 08:04 AM MDT #

I've started to focus my freelance business on designing/coding front-end UIs for programming teams building web apps - and it's been a great route thus far. There continues to be a huge gap between general user experience and an app's functionality, and not many designers are seeking out these kinds of partnership opportunities. As evidenced above, they're out there...

Posted by Geof Harries on September 30, 2005 at 08:18 AM MDT #

The JBoss Seam demo uses all CSS. <p/> A great example of why the development separation in the UI worked so well happened a few times where I created the initial JSF pages, but Gavin wanted to continue to modify/add pages. He didn't have to futz with any of the design, just drop components into the page-- everything continued to fit every other page I designed. For the parts where he wanted to have something look different, I was able to just edit the CSS file, without mugging in anything he was doing in the JSF page. That separation is how the web UI should be coordinated (IMHO), not this, "let's come up with new ways of making aliasing or hiding server side code in HTML markup."

Posted by Jacob Hookom on September 30, 2005 at 09:03 AM MDT #

Nothing new in having clean XHTML styled with CSS. Ready-to-use examples of XHTML and CSS can be easily found on the net. His particular designs are fixed, not fluid, and this is the only reason why I don't like them.

Posted by Michael Jouravlev on September 30, 2005 at 01:16 PM MDT #

[Trackback] With browser differences being what they are, I still don't think it's realistic to design a large and heavily trafficked website with validating XHTML and true separation of content from display/layout using CSS. If you disagree show me just one site ...

Posted by Todd Huss on October 01, 2005 at 01:51 PM MDT #

Todd,

abcnews.com, mapquest.com, yahoo.com, etc..

I've been writing about these methodologies for near a year now. I just don't get why developers aren't taking advantage of this. I ran into another example where I created a CSS template for another upcoming JBoss demo, and another developer completely implemented using Facelets ability to template, and separate out content fragements to his full advantage while retaining the exact same look and feel as defined in my original CSS template.

-- Jacob

Posted by Jacob Hookom on October 01, 2005 at 06:59 PM MDT #

When it get's complicated css really starts sucking... Sometimes the customer want's something very specific not looking "nice" but the way "he wants it". How would you, without using crappy css-hacks, implement this: <table border="1"> <tr> <td align="center" colspan="2">header</td> </tr> <tr valign="middle"> <td align="left" width="150px">component 1
bla
blah</td> <td align="right" width="200px">component 2</td> </tr> <tr> <td align="center" colspan="2">below</td> </tr> </table>

Posted by Peter on January 04, 2006 at 01:35 PM MST #

quoted from http://www.quirksmode.org/css/centering.html

Unfortunately, vertical centering is a notorious weak spot of CSS. Vertical centering is only possible for content of TD's. Don't ask me why, I disagree strongly, but the problem is there and should be solved.

Posted by Peter on January 04, 2006 at 01:41 PM MST #

Post a Comment:
  • HTML Syntax: Allowed