What's the difference between jquery.ui.theme.css and jquery-ui.css?

Question

In a project I'm working on we have a /themes/ directory with all the jQuery ui-themes in it. I get that they overwrite certain styles of the base class, but why are there two different css files (jquery.ui.theme.css and jquery-ui.css)? AND why are they seperate? Do I need to include both, or just one?

Answer 1

Docs say that jquery-ui.css is just jquery-ui.theme.css appended to jquery-ui.structure.css. If you download these files from ThemeRoller both jquery-ui.css and jquery-ui.theme.css will contain custom changes. jquery-ui.structure.css remains the same across customizations.

The theme file is responsible for the look and feel whereas the structure file is responsible for the layout and functionality.

Some reasons for not using jquery-ui.css

It makes sense to offer a split version of these files in order to use something like cdnjs for jquery-ui.structure.css but your own server (or CDN solution) to deliver your customized jquery-ui.theme.css.

Or if you use multiple themes on your site it allows for smaller data traffic because the browser might already have a cached version of jquery-ui.structure.css when encountering an uncached theme (jquery-ui.theme.css).

Answer 2

Simply answer is --> The jquery-ui.css file contains both jquery-ui.structure.css and jquery-ui.theme.css.

Answer 3

Stole this quote word for word from the JQuery Docs. This is exactly what you were asking for.

Since the framework styles only cover look and feel, plugin specific stylesheets are separated. These contain all the additional structural style rules required to make the widget functional, such as dimensions, padding, margins, positioning, and floats. When downloading jQuery UI, these can be found in jquery-ui.structure.css.

Answer 4

Jquery- ui- theme is a folder or link or file to access different themes or styles(.css) of jquery ui; such as 'smoothness', 'black-tie', 'blitzer', 'cupertino', 'dark-hive', 'humanity', 'sunny', 'vader', etc. example:

<link href="jquery_ui/jquery-ui-themes-1.10.2/themes/vader/jquery-ui.css" rel="stylesheet">

Jquery -ui- css is a folder or link or file to access the 'default theme' or default style sheet of jquery ui which is 'smoothness'.

Answer 5

I'm not sure if this is a common idiom in jquery, but the content of jquery.ui.theme.css was a subset of the content in jquery-ui.css. It seems that the latter also had CSS styling for many of the common ui components. So I've deleted jquery.ui.theme.css and kept jquery-ui.css.