常见的 Web UI 样式

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

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.

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

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.

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.

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

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

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.

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.

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.

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.

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

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.

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.

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

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/

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

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

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