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:

  1. Base Styles - (required) These contain reset styles, fonts, default link styles, and general styles used throughout the components.
  2. 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.
  3. 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.
  4. lotusui30dojo Dojo Theme - (optional) Pages using Dojo widgets need these styles.
  5. 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.
  6. 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 languagesRight-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