/
Markup and CSS Naming Conventions

Markup and CSS Naming Conventions

Apr 22, 2009

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:

  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"

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.