Reference Information
Best Practices
Use classes instead of ids whenever possible:
class="portlet-titlebar"
rather than:
id="portletTitlebar"
Separate class names by dashes:
class="portlet-titlebar"
rather than:
class="portlet_titlebar"
Prefix classes with a namespace:
class="portlet-titlebar"
rather than:
class="titlebar"
Class names should be semantic rather than stylistic:
class="portlet-titlebar"
rather than:
class="big-red-bar"
Multiple classes assigned to an element should be listed in this order:
- FSS classes (fl-)
- uPortal classes (up-)
- Portlet classes (portlet-)
- Custom classes
For example:
class="fl-container-flex up-portlet-container portlet-titlebar my-custom-class"
CSS Namespaces
Fluid Skinning System
Namespace prefix: fl-
- FSS is used for layout and helpers.
- FSS can be used in both the portal and portlets.
- FSS information
uPortal Portal
Namespace prefix: up-
- Layered on top of FSS for additional helpers and styling.
- For use in the portal theme (exclusive to uPortal), but not portlets.
uPortal Portlets
Namespace prefix: portlet-
- Layered on top of FSS for additional helpers and styling.
- Includes and extends the JSR-168 PLT.C CSS Style Definitions.
- For use in portlets (only), whether exclusive to uPortal or not.