Markup and CSS Naming Conventions

Review User Interface:

• Goals
• Overall Best Practices

Use clean, proper, semantic markup

• Validating your markup is a good measure.

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:

1. FSS classes (fl-)
2. uPortal classes (up-)
3. Portlet classes (portlet-)
4. Custom classes

For example:

class="fl-container-flex, up-portlet-container portlet-titlebar my-custom-class"

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.