How to Properly Link the CSS Files
CSS
The CSS is broken into the following categories:
- Base Styles: These contain reset styles, fonts, default link styles, and general styles used throughout the components. All pages need these styles.
- Component Styles - These are the styles used for individual components. Pages need some or all of these styles depending upon which components are used.
- Layout Styles - These are styles that set out the layout of the page, and modify component styles when they are required to look different in different parts of the page. Pages using the basic template provided in this documentation need these styles.
- Dojo Override Styles - These are styles that override the default dojo widget styles. Pages using Dojo widgets need these styles.
- Theme Styles - These styles contain theme information (color, background color, border color and background image). Multiple sets of theme styles are provided. All files containing theme styles have "Theme" in the filename. All pages need one set of theme styles.
- Bidi Styles - These styles are used for right-to-left languages in place of the regular styles. All files containing right-to-left styles have "RTL" in the filename. Pages displaying in a right-to-left language need these styles.
Linking the Files
In general, when linking CSS into your page, the following order must be used:
- Base Styles - required
- Component Styles - required
- Layout Styles - optional
- Base Theme Styles - required
- Component Theme Styles - required
- Layout Theme Styles - optional
- Dojo Styles (dijit.css) - optional Note: this file is from dojo's dijit/theme directory.
- Dojo Override Styles - optional
- Dojo Override Theme Styles - optional
- Product-Specific Styles
The "css" folder contains all of the CSS files for styling pages. Not all files under this folder are required. To enable maximum flexibility, styles are authored in many individual files and then combined into larger files for convenience. (NOTE: Not all products provide the individual files.) Styles for individual components are located in the "components" folders. These files are combined together into components.css/componentsRTL.css in the "framework" folder. The "framework" folder also contains the Base Styles and Layout Styles. The Base Styles, Component Styles, and Layout Styles are combined together into core.css/coreRTL.css and provided in the parent folder of the "components" and "framework" folders.
For the case where you want to use use all of the CSS styles, the files in the "components" and "framework" folders are not needed. Link these files in the following order:
left-to-right languages | right-to-left languages |
---|---|
core.css defaultTheme.css Dojo Files - dijit.css (optional) dojo.css (optional) dojoTheme.css (optional) |
coreRTL.css defaultThemeRTL.css Dojo Files - dijit.css (optional) Dojo Files - dijit_rtl.css (optional - required if you use dijit.css) dojoRTL.css (optional) dojoThemeRTL.css (optional) |
If you do not need Dojo, the Dojo files are not necessary.