Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 6 down vote favorite
7

Is there a CSS Framework that tries to provide for business applications, specifically?

I've looked at the Mocha UI which is based on MooTools. Honestly, though, I'd like to avoid dealing with Javascript and Moo (or jQuery / jQuery UI). I tend to believe that most of what you need for a simple web app can be handled in CSS without the Javascript mods to it.

Many of the polished CSS is aimed at blogging or web publishing needs that are different from the UI needs of a business app. It seems like this must be a problem that someone has solved, but I can't seem to find a solution.

My hope would be that proposed solutions would be language agnostic (work with PHP, ASP, CF, etc.). However, if there is a framework rooted in a language that handles the UI in a very "finished" sense, then I'd be interested in looking at that, even if it meant adopting a framework that forced the use of a particular server-side language.

My goal is not to go MVC, just have some nice looking CSS that would fit an application.

BOUNTY: I decided to start a bounty on this question because I think there must be some useful "starting points" (stated minimally) of CSS which are geared toward web apps, with my preference being that they're hopefully:

  1. platform independent or accomodating various dev platforms, and
  2. free or nearly free (as in, not $1000 for a collection of controls)

"Inspirational" Example: (play on words intentional, sorry) I did find a church website development company that published a Design Patterns Library and Code Standards which is very enticing, but it seems like it's usable only to those who develop church sites using their software as a service (?). Regardless, the CSS and complementary graphics are not out there for public consumption.

share|improve this question
Could you given an example of the polished CSS frameworks aimed at blogging/web publishing? – Lèse majesté Dec 3 '10 at 17:00
1  
Touche! :-) I should has said polished CSS templates for blogging and publishing. When I consider your comment I realize the CSS frameworks are not exactly "polished" CSS ready for use, but more a tool to build on top of. – Chris Adragna Dec 3 '10 at 17:21
Yea, I don't think you will find ready-to-use CSS frameworks or libraries for a couple of reasons. But I think it is worthwhile to invest in a custom UI library that all of your company products will use. This can save you a lot of time as well as serve as a "style guide" for all your applications. – Lèse majesté Dec 3 '10 at 17:52
Actually, bootstrap from twitter is exactly what he is asking for. Fully fleshed out basic UI/UX with a ton of features. Quick, fast, easy. – Chris Kluis Oct 3 '11 at 16:26

6 Answers

up vote 2 down vote accepted
+50

I agree with previous (Chris Lively and Lèse majestè) answers. And also I found the link you provide very cool.

But let's go to my answer. I think you should make it in your own way. There are many resources you can use. I will cite mine.

While I was developing my own framework and generators, the need to have a UI framework become evident, hence all classes and ids on HTML templates were being generated automatically.

Then after studying commom patterns I used, I've made my own CSS UI Utility (as well as some JS utilities). The key point in my approach is using many different classes.

.required, .relaxed, .warning, .error, .success, .roundedBox, .gradient, .white70 [rgba(255,255,255,0.7)], .black30, .padded, are some examples.

on the HTML side:

Also, it is implemented over 960 grid, and has many other utilities, like @font-face kits. In fact, this leads me with just a few work. Adding correct classes, and perhaps making some minor adjustments for each project.

Along with multiple classes, the other core point is to ensure everything keep binded to a black-white-gray schema, working with opacities. This is for reduce code changes needed for each project, hence each project usually has its own color schema.

share|improve this answer
+1, I like where you went with that. I've had similar intentions in the past, never followed through on. So you rolled your own generator. Do you hold pretty tightly to your naming conventions, so to publish a change, you just enter new attributes and spit out a new CSS? Oh, and, yes, that link I gave was kind of cool, eh? I must have tried to find and pull a be-all-end-all parent CSS file from various related sites for hours!! ...to no avail. – Chris Adragna Dec 8 '10 at 21:18
1  
Yeah, I keep tight to my conventions. To be more clear, at top I have @font-face rules (when it is the case, but prototype is always there, just need enter filenames and font-family name), then I have a reset (layout and typographic), many generic classes, links, a dozen ids to a basic layout within 960 grid (200px header, 720px main body, 240px aside ads/context, footer at bottom).. Ah, I also keep a social networks snippet, and the most important to me in the last months (my major change) the classes and ids for microformats, so I can use them without conflict. – Dave Dec 8 '10 at 23:53
Another practice I've added is to keep almost all rules inside this CSS. But, for example, for rgba classes, opacity, gradients and shadows, I keep a set of rules in a IE.css file, conditionally included. This allows me to keep valid code, easy maintenance, and good looking into IE tought. It tooks a lot of research and hard work, but now I really need a little to achieve a nice layout working for every browser. – Dave Dec 8 '10 at 23:57
+50, I am marking your question as "the answer" and awarding the bounty to you. I wish there was a silver bullet answer -- it'd save me the time. Nonetheless, you stated with great detail what at least I believe, and provided some good insight on how to build the engine that will push out the right CSS per project (and per edit or change). Thanks for your follow up, too. It was very helpful. – Chris Adragna Dec 14 '10 at 0:50
Thank you Chris Adragna. I understand your point. There are some threads full of good answers and pick one may be difficult. But I think everybody wins when we come a a thread like this, because knowledge is broadly shared and this is the most important point. More important than rankings, badges and points. Hey, thanks for the good question. See you. – Dave Dec 14 '10 at 21:24
up vote 2 down vote

Mocha UI and jQuery UI are JavaScript UI libraries, which have very a different purpose from what a CSS framework aims to do. I don't think you'll find a CSS framework that can do what those libraries do.

Firstly, UI is more than just aesthetics or visual design; it includes a defined set of behaviors and interactions. That's why JavaScript is necessary to create a UI library like Mocha UI or YUI. CSS just isn't capable of generating rich UI widgets on its own. That's why non-AJAX apps just don't have very rich UIs.

The other thing is, even if you're only interested in a pre-packaged set of UI graphics, the aesthetics of a UI has to match the web design it's placed in. So aside from rapid prototyping, there wouldn't be much use for a prepackaged UI "theme". That's why most JavaScript UI libraries let you customize the look and feel of the UI components they come with. And that involves editing images in addition to the CSS styles.

For these reasons, most CSS frameworks are frameworks for writing CSS, not UI frameworks that you can just drop into an application to make it look good. Such frameworks can certainly make writing CSS for large applications more manageable, but in the end you still need a UI designer and a front-end programmer to design and implement the UI.

Now, if you're using a popular CMS you could download or purchase a theme for it. But I know of no CSS theming/skinning framework that can be used in a custom application. Besides, most enterprise web applications have custom-designed UIs not pre-built themes.

That said, what you could do is do what many UX designers and interaction designers do. That is, build a company-wide custom UI library (or have one created for you) that all of your applications will use. This will ensure that all of your applications have a uniform "signature" look that is aligned with your brand. And it saves your front-end developers the time of having to rewrite UI styles for each app.

share|improve this answer
up vote 3 down vote

The problem is that "finished" means different things to different people.

Maybe you want a nice little border to fade in around your input elements after they have received focus. Maybe you want all of your paragraph elements to have a 4 pixel margin. Or maybe you want to ensure that all buttons have blue text with a gloss feel.

You see, there is no single solution. It's all a matter of design and taste which is by no means the same for everyone AND continues to evolve. Web 2.0 brought us larger fonts, bigger boxes to type in, and a lack of nested drop down menus (thankfully). Who knows what the UI geeks will figure out for "3.0"... Whatever it is, it will hopefully be as radically different as the 2.0 stuff was from the sites from the 90's.

Certain technologies like WPF, Flash, and Silverlight exist, in part, to give a completely different feel to a site. But, again, these are simply starting points to allow your own creativity to flourish. jQuery UI and Mocha UI fall into the same categories.

Now, depending on the backend tech you are using there are control vendors (like telerik and DevExpress) who provide skins out of the box for their control libraries and they are a great way to slap something together that actually looks pretty good.

share|improve this answer
I like the examples shown by terlerik and DevExpress, but they're solidly ASP.NET or Windows binary dev tools. Are there some components like that with similar fit and finish (non-MS)? – Chris Adragna Dec 6 '10 at 23:54
up vote 3 down vote

I am surprised, no one suggested blueprint till now. Well! this is just a CSS framework which can down your designing effort.

share|improve this answer
up vote 2 down vote

As a free and language agnostic framework, there is always the use of the Compass framework that works very well in conjunction with the Sass language, which will make your CSS a lot more themable and reusable.

If you are using Linux, it is easily installable via rubygems (note that you don't need to know anything about ruby, I write PHP and use Sass -- now known as Scss for Sass3) though it might be easy to get on any other platform too, but I haven't checked.

share|improve this answer
up vote 1 down vote

Bootstrap from Twitter is amazing.

share|improve this answer
After just a real quick look, it seems you're right. Thanks! – Chris Adragna Oct 4 '11 at 15:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.