Page Comparison

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

...

Panel

1. Use classes instead of ids whenever possible:

Code Block
class="portlet-titlebar"

rather than:

Code Block
id="portletTitlebar"

2. Separate class names by dashes:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="portlet_titlebar"

3. Prefix portlet classes with the portlet namespace:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="titlebar"

4. Class names should be semantic rather than stylistic:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="big-red-bar"

5. 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:

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

...

CSS Naming Conventions

Panel

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: http://wiki.fluidproject.org/x/96M7

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.