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

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.

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.

Posted in The Web at Mar 27 2006, 10:56:12 PM MST 10 Comments
Comments:

Btw, that login page doesn't work for me on Safari. Just nothing happens when I submit the form. It does work on Firefox.

Posted by Geert Bevin on March 28, 2006 at 02:14 AM MST #

Yes! It does! Suse 9.3 FireFox 1.5

Posted by Gilberto C. Andrade on March 28, 2006 at 06:02 AM MST #

Since you've extended the contest I thought I might take a whack at this (though I'm a programmer so we'll see how 'beautiful' it actually turns out ;). I went back to your announcement to download the css-framework.zip and got a redirect to http://suspended.page/ (tried this in Camino and Safari, with similar results) I've actually found I have a copy of this around already, but I wanted to let you know, since people might be looking for the zip to work on the contest.

Posted by Andy Keep on March 28, 2006 at 07:31 AM MST #

Thanks for the heads up Geert. I saw something similar yesterday, but thought it was a fluke. The problem appears to be caused by Tooltip.js.

Andy, I noticed that yesterday as well. I've sent a message to Mike Stenhouse (the original author) - hopefully we'll get a download soon.

Posted by Matt Raible on March 28, 2006 at 08:34 AM MST #

So Matt, my question is: Is there any type of 'standard' that web developers can follow when putting together web application pages that will be later wrapped with a css theme?

I really think that visually appealing websites is not something many people can create, that it takes a real design professional to put together just a kick ass looking site. So where are the resources to educate developers when creating their pages that will ALLOW one of these kick ass designers to come in and easily create the css structure to turn a wonderfully functioning application into a wonderfully functioning and looking application.

I am thinking of a structure on laying out the proper div's, etc to make the life of a designer much easier. So that once the application pages are created with the correct structure, a designer would never have to touch any of the pages, just simply the css, etc.

I think developers are constantly struggling with creating even a decent looking UI, while if they had some logical structure laid out, they could hire a designer to come in and easily wrap the application with some css.

How does everyone deal with this? In most small teams I have been with, there is no clear delineation between developers and designers. So everyone is touching code, and everyone is touching the css styling, and the result is a somewhat ok looking application where everyone spent way too much time making it look just ok.

Posted by Chris Blackburn on March 28, 2006 at 03:14 PM MST #

Chris - these are excellent questions. I think using something like the CSS Framework is a start, but it's only half the battle. The greater battle is putting together a CSS Style Guide for your developers. I've created a new appfuse-css project at java.net - maybe we can answer some of these questions as part of that project/application. In general, I'd recommend putting id elements on forms, tables, divs and other block-level elements in your application. Even if they're not used, they're hooks that can be leveraged by CSS developers. While CSS's "class" attribute works well too, I don't know if I'd encourage it's use. When you use "class", you're almost saying "apply this style to this element" vs. "here's my id, style me however you like". Of course, classes make sense in a lot of places - which is all the more reason for a style guide. ;-)

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

encodingFilter does not work on appfuse 1.9 ,but it works in appfuse 1.8.2 i dont konw how to report this bug..... thanks

Posted by yan da zhi on March 29, 2006 at 10:43 PM MST #

Here's the fix.

Posted by Matt Raible on March 29, 2006 at 11:14 PM MST #

Andy - 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 #

hello guys, can someone tell me where i can download the themes? regards,

Posted by markov on July 28, 2008 at 03:42 AM MDT #

Post a Comment:
  • HTML Syntax: Allowed