Is it a good way to use JQuery UI themes while implementing a high traffic website. Is it easy to edit and customize a little based on my website needs? Does it has any famous problems? want to hear your ideas about it and is it safe to use or its better to write all my CSS from scratch.

Note that i checked the themes there and found there nice and some of them after some edits will fit the design we have.

+4  A: 

jQuery UI is heavier than jQuery core for sure, are the themes heavy? No more so than any other CSS really. Yes you can customize them, use the ThemeRoller tool for this.

If you're going to use most of the styles or the jQuery UI library, then you're better off with their CSS, if you plan to use a small fraction of it, roll your own, as the rest is just wasted payload delivered to each visitor.

As a side note: If you are happy with one of the default themes, they're available on the Google CDN, but it sounds like you want to tweak a bit so not sure it applies here...if traffic is a consideration though, there's an option.

Nick Craver
+6  A: 

Do you know about Googles CDN (content delivery network)?

See this post to find out why it is a good idea to use Google to host jQuery for you. Basically you get Decreased Latency, Increased parallelism and better caching

See this post to find out how to link to the jquery ui themes using CDN

I have used this technique and have not found any issues. As for problems I have never encountered any. I would like to know myself if there are any infamous problems.

EDIT If the question is "How easy is it to edit the CSS" then the answer is a bit more convoluted, The UI themes are very comprehensive and like mark has said if you only want some of it then roll out your own, if you like what you see then use all of it via the CDN, however you have hinted that you want to tweak it a bit...

The real answer lies in not only what you want from themes but how good are you at CSS? My design team have no problems with UI themes css.

I know this, but i was asking about the library itself, is it good? is easy to edit? ...
Amr ElGarhy
@Amr - The library (which is JavaScript) or the CSS/styles it uses?
Nick Craver
i mean CSS/Styles
Amr ElGarhy
@Amr - Then yes, see the answer currently below for tools on how to edit :)
Nick Craver
There's a tool to edit the themes provided by the jQuery UI team, that's a pretty big thing to leave out of your answer IMO.
Nick Craver
@nick, maybe maybe not, it depends on who is doing the customisation, this tool might be OK for a developer creating a couple of tweaks, whereas my css gurus like to see the CSS first hand. But I agree the theme roller should have been in my answer.
@Rippo - The themeroller creates the *images*, which is far easier than doing it by hand unless you're going a completely different which case the CSS/images wasn't that useful to start with. I customize the CSS afterwards as well, but there's no reason not to use a bookmarkable theme to do all the color portion, and being able to click a link, change a color and get all your CSS/images updated I think. It's not as if letting it do the simple/busy portion is preventing you from editing afterwards...
Nick Craver
@nick - swings and roundabouts. I respect your opinion but there are many ways to swing a cat.
@Rippo - I suppose, enjoy the pain of upgrading to the next release :)
Nick Craver
@nick - I tend to stick with the already styled template as the benefits of the CDN outweigh the small tweaks my designers like to suggest, have a great day.
@Rippo - How can you argue *both* ways? You prefer to customize it yourself, using the raw CSS/images, not ThemeRoller, then say you *don't* customize it but stick with the default themes. Either is a valid point, but you can't be doing both...
Nick Craver
@nick, no you have said this, please re-read, you have led me down this merry path! I am only pointing out what my designers prefer. I really don't `undertsand` what you are driving at. Please leave as is I am having a great day.
Perhaps I misunderstood, from your comments: "whereas my css gurus like to see the CSS first hand" vs "I tend to stick with the already styled template", not trying to be difficult, just don't understand how these two relate. As long as you know there are options out there that's all that matters, everyone has their preferences...I was just very confused how those two fall under the same preference :)
Nick Craver
My comments do not relay the answer I have given to the OP, only what you have asked in your comments. Yes you have been difficult but I am not offended, like I said move on and have a great day
+1  A: 

A small amount of JQuery is absolutely fine. But Too much of traffic, would cause problems in page loading as it might tend to be a little slow. It is better to write CSS from scratch because, it will be very well customised for your site and you need not fit your site into something else.

Ricardo Slafford
good point of view i should respect.
Amr ElGarhy
Totally disagree. "Always start from scratch," is tantamount to reinventing the wheel. Start from something that works, replace it as you go.
Andres Jaan Tack
+2  A: 

There are two factors that will answer this question.

1) How big is big? Or in other words how many users will actively be browsing at a time, and is there a lot of interaction, or just a sit and wait type page?

2) Will it be designed to reduce requests/sec? Basically, if every click requires an ajax call that will hit your server, the server may buckle. But if you preload a lot, the bandwidth will be the issue, not resources on the server.

So basically if the website is going to be really huge, you probably want to look into Google CDN and stuff to avoid having to deal with it on your end. If it won't be that big then you have to identify where the next bottleneck is. If it is a bandwidth bottleneck, transferring jQuery a lot will hurt, otherwise it is the ajax calls that hurt.

Your goal is to minimize how much the server has to do, and push it to the client. So design it so that the bandwidth is not the bottleneck and your server only deals with clients when necessary.

hmmm, is this answer is related to my question? i am asking about jquery themes what ever its hosted on my end or not, i am asking about its quality, is it easy to edit or not, and also wanted to hear others experiences with it.
Amr ElGarhy
Basically it is impossible to say whether jQuery will meet your needs or not. It should as it is a pretty widely used utility, and unless you have particularly special needs it will perform. I was focusing on the "big high traffic" part of your question, and discussing how much optimization you might need.

I would post this is a comment, but cannot just yet...

I have used jQuery pretty extensively in a variety of environments and all things considered, it is one of the better performing aspects of the sites I have used it in. I would consider my experiences to have been with medium-high traffic sites. HTML Editing controls like fckEditor or TinyMCE have consistently had longer load times that much of the jQueryUI components I have used.

I totally agree with the comments about using a CDN, but some of these posters are correct about the ThemeRoller option. That will eliminate your ability to use out of the box jQueryUI CDNs, ThemeRoller creates a unique package for you to download including CSS. If you go this route, pick a good minimizer/compression technique for your javascript content and that will help as well..

+4  A: 

I'm not totally sure what you're worried about, but I think this will clarify what JQuery UI does and does not do for you.

"Ready for prime-time?"

Yes. The JQuery UI themes have been around a long time and have no screaming-to-the-surface-to-ruin-the-project issues. There are some known issues, mainly with advanced CSS3 issues. For example: All browsers except IE6 have rounded-corner support from CSS3. JQuery UI themes use this feature. If you want rounded corners in IE, you will have to get an extra plugin that works around it for IE, specifically. That's easy enough.

The non-obtrusiveness of JQuery themes is easily assured, because the themes stay separate from most of your site-specific design concerns. The classes implemented by the UI themes mean things like, "this is what an active thing looks like." Tweaks you make to such general concepts tend to be small ("3 shades of pink lighter than before") and usually don't change dimensions very much ("add a little extra padding to active things"). Plus, to do all that, you can use Themeroller.

Using JQuery Themes

The nice folks at Filament Group have a nice write-up on how to style things using the JQuery UI themes. I don't think I can add much to their walkthrough of it, except to point out that they are using both a garden-variety JQuery theme and their own layout CSS. This is all about the separation of theme vs. layout.

Themes vs. Site Designs

It's very important to remember that themes aren't layouts. There's a huge difference between them. JQuery Themes do a good job of staying on one side of that fence, and by that virtue are non-toxic, easily-replaceable additions to a website. Consider:

Layouts are pretty hard, and include stylistic decisions which are nontrivial and site-specific. Examples of design questions include:

  • Where does that button go?
  • How big should menu buttons be?
  • Should this table be centered?
  • What font size do I want in the menu buttons?

Basically, you always write your own design. If you've taken one off the shelf, you're either planning to modify it heavily, or you're building a very cookie-cutter website.

Themes, such as JQuery themes, give an overall look and feel to your layout. They can be independently swapped out, added later, or whatever. Themes are, at some level, the difference between 1) a good interface or 2) a good interface that is also attractive and consistent. Theme questions include:

  • How does clickable button look, usually? What about a disabled button?
  • What color is everything, in general?
  • How round should box corners be, in general?
  • What is the general font size and color?

So, once you look at a theme on one website, you can probably take the same theme and apply it to your own very unique site design with only small differences. They should be totally benign.

Andres Jaan Tack
+2  A: 

I'm going to go out on a limb and say: no. Don't use it.

First, it's a bit fatty. So, if you don't need all of the functionality that jQuery UI offers, you're better off using a smaller library, like jQuery Tools. Even John Resig (or a Resig look-alike) suggests this in this post. His comment:

Just to qualify one point mentioned above and on the web site: “The [jQuery Tools] file is only 2.5 Kb when minified. Compare this to the jQuery UI library where you’ll have to have 130 Kb of minified code to get tabs and accordions working.

Second, if your website is really large, you'll need more flexibility. Customizing jQuery UI in any way--beyond using the templated ThemeRoller--can get ugly. If you want your design to be specific to your site, and if you want to maintain granular control over the design elements in your site, you're better off straying away from UI templates.

Third, I personally don't think that a javascript library should be used to design page elements. Or, at the very least, it should be used to design the fewest number of elements possible. Styling with javascript can cause some strange behaviors, like a lag between page load and page styling (as explained here). Also, users who have scripting turned off (which ranges between one and three percent of web users) surely won't enjoy the experience of visiting your website.