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