Linking the CSS Files
This section details how to properly link the CSS files into your pages to insure proper styling. In general, when linking CSS into your page, the following order must be used:
- Base Styles - (required) These contain reset styles, fonts, default link styles, and general styles used throughout the components.
- Component Styles - (required) These are the styles used for individual components. Pages need some or all of these styles depending upon which components are used.
- Layout Styles - (optional) 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 page templates provided in this documentation need these styles.
- lotusui30dojo Dojo Theme - (optional) Pages using Dojo widgets need these styles.
- Alternate Styles for Dojo Widgets - (optional) These are styles that override the default Dojo widget styles... often in specific contexts. Pages using alternate styling for Dojo widgets need these styles.
- 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 - base, component, and layout styles defaultTheme.css - themed styles for base, component, and layout lotusui30dojo.css - Dojo theme styles dojo.css - alternate styles for Dojo widgets dojoTheme.css - themed styles for alternate styles for Dojo widgets |
coreRTL.css - base, component, and layout styles defaultThemeRTL.css - base, component, and layout themed styles lotusui30dojo.css - Dojo theme styles dojoRTL.css - alternate styles for Dojo widgets dojoThemeRTL.css - themed styles for alternate styles for Dojo widgets |
If you do not need Dojo, the Dojo files are not necessary. For additional information about the Dojo theme, see Dojo Styles