Matt RaibleMatt Raible is a Java Champion and Developer Advocate at Okta.

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.


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.

Yahoo's Grids CSS

Available Templates When I first saw Mike Stenhouse's CSS Framework, I was very impressed. It's hard to believe it's been a year since I first saw it, and only now am I integrating it into AppFuse. It figures that the week I'm implementing it, Yahoo comes up with something better: Grids CSS. Thanks to Jacob Hookom for e-mailing me the link.

The features of Grids CSS include:

  • Full A-grade browser support
  • More than 100 page layouts with a single CSS file at just 1.82KB
  • Flexible scaling with user font-size adjustments
  • Min-width enforcement, regardless of font or viewport size (except IE; helper JS under consideration)
  • Abundant DOM hooks for CSS and scripting flexibility
  • Source-order independence, allowing you to place your most important body content first in your HTML document
  • Self-clearing footer (no matter which column is longer, the footer stays at the bottom)
  • Centering within the viewport by default
  • Forward-compatibility as standard page structure evolves to claim more screen real estate
  • Accommodation for IAB Advertising Units

This is obviously a better solution than the CSS Framework, especially since it seems to be well-documented and allows source-order independence. However, it suffers from a similar problem: there's a lack of good-looking designer-styled templates that showcase how cool this library is. There is hope though, Andreas Viklund (a well-known open source template designer) is talking about a Modular CSS Template. The question is: will he re-use Yahoo's Grids CSS or invent his own?

[Yahoo's Grids CSS] is almost exactly what I was working on - but much smaller and probably better than I would have done it. The main difference is that I added a few extra layers to the cake: Make-up (layout-wide styling for typography, forms, headers, links and so on), Colorscheme (just what it sounds like) and Backdrops (background images). Designers can add each layer separately. If you have a site based on the template and you want to change the styling - add a new Make-up. It is a matter of cutting and pasting blocks of code into the CSS, even a beginner with no CSS design skill can do that. If you want to use different colorschemes for different pages - just add more colorschemes and call it from the colorscheme class of each page. One line of code to change, and the effect is very obvious?

It's cool to see there's lots of work going on in this space. While AppFuse 1.9.2 will include the CSS Framework, there's nothing stopping us from using a different solution for 2.0. I'm leaning towards moving to Yahoo's solution, but it's likely I'll be heavily influenced by Andreas' work in this space. Of course, since Yahoo's library is open source, it might make sense for Andreas to simply contribute to this project and improve what they've already done.

Posted in The Web at May 11 2006, 10:58:24 AM MDT 7 Comments

What I hate about most of those "frameworks" and css examples is that none of them care about elastic layout that takes 100% of the screen width.

Posted by eu on May 11, 2006 at 11:25 AM MDT #

100% widths are pretty straight forward, but end up introducing: order dependence of content, and often the double wrapping of areas: one for layout, one for padding.

Posted by Jacob on May 11, 2006 at 11:42 AM MDT #

> What I hate about most of those "frameworks" and css examples is that > none of them care about elastic layout that takes 100% of the screen width. Yep, I prefer liquid design as well. Fixed width sucks.

Posted by Michael Jouravlev on May 11, 2006 at 12:11 PM MDT #

I'm always looking for tips on css layouts, since i don't want the learning curve of advanced css techniques. this looked nice, but started to blow up whenever i tried to add some borders to cells. there isn't any padding on the grids so the borders hugged the text too closely. adding some padding blew out the alignment. i'm not looking for any help here, just wondering if this isn't as configurable as it seems.

Posted by JR on May 15, 2006 at 02:34 PM MDT #

i want a yahoo messenger layout so it can look really cool so can you help me?

Posted by alyssa king on October 13, 2006 at 10:32 AM MDT #

Yahoo! Grids CSS supports 100% fluid width now. I just started using great. Not sure about putting borders on cells, though.

Posted by John Turner on July 18, 2007 at 10:58 AM MDT #

I bumped into the padding issue, also, but I have set a couple of classes for padding, and put content inside a div with one of the padding classes inside the grid areas where padding is needed. This is a little bit of extra markup but seems worth it for the fluid layout that is working so easily in other ways.

Posted by RJT on September 04, 2007 at 01:25 PM MDT #

Post a Comment:
  • HTML Syntax: Allowed