91

I have to present a prototype of an web app in the following days to one of my clients, the thing is I'm not so good at CSS and worst of all I'm almost never happy with the results I get.

Coding the business logic poses no challenge to me, the UI design however takes more than 80% of my time. I don't need nothing breathtaking, just a clean, nice and presentable environment, an example:

alt text

This is a recurring problem I've been having, I wish web UI development could have a less naked default style, an approach similar to Visual Studio or iPhone SDK would be very useful to me.

The above mockup created with Balsamiq Mockups is a great example, all the most common "components" are available to use, and best of all: there is only one good-looking style to choose from.

Is there something like this for the web? A neutral yet nice CSS or Javascript UI framework?

Options so far:

I'm interested in knowing if there are any CSS-only UI frameworks.

I found this page with a very nice list of Web UI Libraries, but most of them (at least the good ones) seem to be specific to Java, are there any equally good alternatives in pure CSS or JS?

PS: I'm not interested in AJAX, effects, behaviors and so on... my main (only) concern is style.

Thanks for all the suggestions everyone!

After a very careful consideration of all the UI libraries suggested, I've come to the conclusion that ExtJS and Qooxdoo are the ones that most closely fit my needs. jQuery UI seems promising but only offers a reduced amount of elements.

As far as CSS-only libraries go I've found BlueTrip / BluePrint and the themes suggested by tambler to be the best. Aside from that, Flex and Napkee also seem to be worth exploring.

Time to learn ExtJS now! =)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Alix Axel
  • 151,645
  • 95
  • 393
  • 500
  • 6
    Worth noting, jQuery-UI has a nice theme designer to speed things up called "Theme Roller": http://jqueryui.com/themeroller/ – Nick Craver Jan 28 '10 at 16:16

19 Answers19

11

A combination of 960gs for layout and jQuery-UI for styling is probably what you are after.

You could also consider the blueprint CSS framework instead of 960gs.

Shane O'Grady
  • 2,465
  • 18
  • 20
  • You mean the jQuery UI JS framework or the jQuery UI CSS framework? – Alix Axel Jan 30 '10 at 10:49
  • 1
    Apologies for the confusion, I meant he jQuery UI CSS framework for styling. But there is no reason that you could not also incorporate the JS widgets framework too. – Shane O'Grady Jan 30 '10 at 14:37
7

What about using dojo and dijit?

Dijit is a fast way to create widgets and elements. It also comes with 3 default themes which are easy to modify.

A good list of different widgets here

peirix
  • 36,512
  • 23
  • 96
  • 126
7

I can't believe nobody has mentioned:

http://www.extjs.com/

Its a commercial js frameworks, but pretty affordable, and makes putting together a nice UI a breeze. There's a much more complete set of elements then jqueryui, and its designed to make an entire app. I've only played with it a little, but I really love it so far. Free for personal use.

If you really want to get a feel for a complete UI developed with EXT, try this url:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Erik
  • 20,526
  • 8
  • 45
  • 76
  • @Erik: Thanks for the suggestion. Do you know any books / tutorials you can recommend? I'm having a little trouble figuring out how I should integrate ExtJS into a typical PHP MVC application. – Alix Axel Feb 03 '10 at 09:58
  • Best place to start is the tutorials that EXT offers: http://www.extjs.com/learn/Tutorials As far as integrating it with your PHP framework I couldn't say -- but these are your HTML pages, so you'd integrate them they way you'd integrate any other page, wouldn't you? – Erik Feb 03 '10 at 10:29
6

Pair up with someone who specializes in UI design.

If you are better at dealing with business logic, your time is better off spent exclusively coding business logic so you can master it. This will require you to learn how to interface with someone else who excels at presentation. (xml and json are common means)

Business logic and presentation are very different. Designing a system that not only looks good, but is intuitive and easy to use is quite difficult. Equally as difficult and time-consuming as establishing the inner workings of a complex application.

A good interface is not as simple as including a css framework.

I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.

If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction. While solo development projects can be rather fulfilling, I view it as inefficient. It is very rare that someone possess skills to develop top-level applications solo.

The challenge is finding someone who you work well with.

Derek Adair
  • 21,846
  • 31
  • 97
  • 134
4

Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.

Abtin Forouzandeh
  • 5,635
  • 4
  • 25
  • 28
3

There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.

Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.

(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)

Duroth
  • 6,315
  • 2
  • 19
  • 23
  • 1
    960.gs really doesn't do a lot of styling - you want something like Bluetrip (http://bluetrip.org/) for that. 960.gs really just provides a grid-based layout. – Dominic Rodger Jan 25 '10 at 10:28
  • I took a peek into the frameworks you suggested, qooxdoo seems overly complicated (everything seems to be defined in via Javascript - even form inputs, etc..), MochaUI has a really nice interface with very cool neutral colors, I haven't seen the source code of it but it also seems rather limited (lots of elementary styles are missing). jQuery UI seems the best option so far. 960.gs is nice but like Dominic said it's not for styling. – Alix Axel Jan 25 '10 at 13:32
3

This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!

Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • Flex is really great tool but consider these days the world moving toward HTML 5 and flex has many problems with size and multi lingual where javascript wins and what do you think about the price but i Still think of flex is great tool – tawfekov Feb 02 '10 at 21:48
  • I really hope a pure HTML/Javascript/CSS solution for applications will emerge from the standards process. – Jacob Feb 02 '10 at 22:01
  • Flex may be rather bulky, and not be as search-engine-friendly... but the system cannot be beat in my opinion. I am not a 'senior' web developer, but I truly see the benefit of working within the flex framework. Adobe has a really good system going. Just being able to code for desktop/web/AND mobile with ONE framework/standardized means of delivery is valuable beyond words. – Derek Adair Feb 03 '10 at 04:02
3

You might consider browsing the following site:

http://themeforest.net/category/site-templates/admin-skins

There are several "Administrative" themes available for purchase here that may suit your needs.

tambler
  • 3,009
  • 2
  • 23
  • 26
2

wireframe mockups like that are a brilliant way to start.

Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:

  1. jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)

  2. jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.

Rich
  • 7,146
  • 1
  • 23
  • 25
  • From all the suggested options I'm more inclined to ExtJS, have you ever used it? How do you compare it to jQuery UI? – Alix Axel Feb 03 '10 at 03:54
  • ExtJS is very mature, and complete. Be aware that it is dual licensed GPL and commercial. It really is a widget interface aimed at very rich UI's. So if you want something more 'corporate' and less 'friendly', it's not a bad choice at all. Only thing is it has a bit of a learning curve, it really is a whole framework unto itself. More like GUI programming than web. Good luck – Rich Feb 03 '10 at 07:18
2

If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.

pthulin
  • 4,001
  • 3
  • 21
  • 23
  • Thanks, mockingbird really made my day! As for Sproutcore it seems nice, but some of the demos look kinda buggy in Firefox 3.5.7. – Alix Axel Feb 09 '10 at 08:31
2

A relatively new PHP framework specifically designed for development of UI-focused software. Elements you have here including Tabs, Filters and Grids are included and will take you about 20 lines of code to implement.

http://agiletoolkit.org/

romaninsh
  • 10,606
  • 4
  • 50
  • 70
1

Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.

It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.

You can then upload this to a server or run it on your computer as a working example.

You can create forms, links, tabs, rollovers, Javascript effects.

Jonny Haynes
  • 3,146
  • 1
  • 27
  • 41
1

A combination of 960gs for layout and jQuery-UI or Jquery tools is great i use them almost in every project but i'd like to add to http://easyframework.com/ although its not a business friendly so make sure to check out its license but i like it

tawfekov
  • 5,084
  • 3
  • 28
  • 51
  • Make sure to check out cufon http://cufon.shoqolate.com/generate/ if you are interested in typography – tawfekov Feb 04 '10 at 11:53
1

If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."

Paul
  • 2,543
  • 3
  • 26
  • 36
1

I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.

  • Summarizing your problem, there is a wikipedia page.
  • There is yaml-css, which takes yaml and turns it into css
  • There is baseline, but it assumes some css knowledge.
  • I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.

I hope that helps.

icco
  • 3,064
  • 4
  • 35
  • 49
1

I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything. It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.

I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.

gillyb
  • 8,760
  • 8
  • 53
  • 80
  • It's a very nice alternative to Balsamiq, my browser is very slow ATM but from a first impression it seems to be worth the money, thanks. – Alix Axel Feb 03 '10 at 00:40
0

I like to add Bootstrap it's intuitive, and powerful front-end framework for faster and easier web development.

Emilio Gort
  • 3,475
  • 3
  • 29
  • 44
0

I like RocketCSS. Nice clean design, give it a go.

Rahul Khosla
  • 190
  • 2
  • 15
0

Sass looks like it has potential as a way to mitigate some css headaches.

Terrance
  • 11,764
  • 4
  • 54
  • 80