Common Web UI Styles

Css Problem Overview

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:

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! =)

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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

Solution 4 - Css

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.

Solution 5 - Css

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.

Solution 6 - Css

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.)

Solution 7 - Css

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.

Solution 8 - Css

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.

Solution 9 - Css

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:

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)
jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.

Solution 10 - Css

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

Solution 11 - Css

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/

Solution 12 - Css

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.

Solution 13 - Css

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

Solution 14 - Css

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."

Solution 15 - Css

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.

Solution 16 - Css

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.

Solution 17 - Css

http://sass-lang.com/">Sass</a> looks like it has potential as a way to mitigate some css headaches.

Solution 18 - Css

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

Solution 19 - Css

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Alix Axel	View Question on Stackoverflow
Solution 1 - Css	Shane O'Grady	View Answer on Stackoverflow
Solution 2 - Css	peirix	View Answer on Stackoverflow
Solution 3 - Css	Erik	View Answer on Stackoverflow
Solution 4 - Css	Derek Adair	View Answer on Stackoverflow
Solution 5 - Css	Abtin Forouzandeh	View Answer on Stackoverflow
Solution 6 - Css	Duroth	View Answer on Stackoverflow
Solution 7 - Css	Jacob	View Answer on Stackoverflow
Solution 8 - Css	tambler	View Answer on Stackoverflow
Solution 9 - Css	Rich	View Answer on Stackoverflow
Solution 10 - Css	pthulin	View Answer on Stackoverflow
Solution 11 - Css	romaninsh	View Answer on Stackoverflow
Solution 12 - Css	Jonny Haynes	View Answer on Stackoverflow
Solution 13 - Css	tawfekov	View Answer on Stackoverflow
Solution 14 - Css	Paul	View Answer on Stackoverflow
Solution 15 - Css	icco	View Answer on Stackoverflow
Solution 16 - Css	gillyb	View Answer on Stackoverflow
Solution 17 - Css	Terrance	View Answer on Stackoverflow
Solution 18 - Css	Emilio Gort	View Answer on Stackoverflow
Solution 19 - Css	Rahul Khosla	View Answer on Stackoverflow