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?
5 Answers
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).
2 Comments
ui-structure.css and themeroller theme (e.g, start.css) and jquery-ui.css and ui.theme.css or just structure and themeroller file?start.css. Also when I look at a newly created themeroller zip then there are all the files mentioned in my answer, not just one css file. If you are unsure about the whole thing you can just use jquery-ui.css and it will contain everything including the customizations you made before downloading the zip.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.
Comments
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'.