Versions Compared

Old Version 40

changes.mady.by.user Gary Thompson (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Gary Thompson (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Best Practices

Panel

Review User Interface:

Use

clean, proper, semantic markup

Use classes instead of ids whenever possible:

Code Block
class="portlet-titlebar"

rather than:

Code Block
id="portletTitlebar"

Separate class names by dashes:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="portlet_titlebar"

Prefix classes with a namespace:

Code Block
class="portlet-titlebar"

rather than:

Code Block
class="titlebar"

Class names should be semantic rather than stylistic:

Code Block
class="portlet-titlebar"

rather than:

Code Block
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:

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

CSS

...

Namespaces

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

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.