CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
jave.web
jave.web

Reputation: 15032

jQuery UI - which CSS to include?

jQuery UI's documentation can be quite confusing when it comes to what CSS you actually need and I saw some people rather include just all.

So if I've download jQuery UI:

  1. what CSS do I need to include?
  2. which one's which?

Upvotes: 4

Views: 1379

Answers (1)

jave.web
jave.web

Reputation: 15032

Including all the CSS will work, but it is the wrong approach...
This answer relates to current last stable release of jQuery UI: 1.11.4.

What CSS you need

It depends on how you want to structure/split your CSS logic and whether you want to use
full-package or just some parts.

Using full-package

One CSS only:

Just include production version of jquery-ui CSS

QUICK ANSWER: jquery-ui.min.css

This file contains both:
- structure(for jQuery UI to work properly)
- theme CSS (for jQuery UI to look better :) ).

Separate structure & style

DON'T INCLUDE jquery-ui CSS!
Include separate (production) file for structure and for theme e.g.:
jquery-ui.structure.min.css and jquery-ui.theme.min.css - in this order!

If you don't want to include theme at all, just include production version of jquery-ui.structure...

Using only some parts

If you worry about the performance/loading you've probably chose only some parts of jQuery UI, most probably, you could have done it in one of these ways...

Download Builder

If you've prepared your jQuery UI files through the Download Builder the instructions are the same as for Using full-package (see above).

Core & Components

If you've downloaded core and components, first include production version of the core CSS, e.g.:
core.min.css
Then include other CSS in an order that dependencies are before those that depend on them.
As last, include theme's production CSS.

Upvotes: 5

Related Questions