Modifiable Information Portlet Markup Guidelines

Owned by MattU (Deactivated)
Last updated: Feb 06, 2015
2 min read

General

Modifiable markup should be as simple as possible.  HTML that has been copied from other sites and pasted into uPortal may not render correctly if the markup depends upon external CSS definitions and/or javascript that is not available to uPortal.

HTML

User interfaces developed for uPortal and portlets should follow Web Development best practices. The starting point in best practice is "Web Standards".

A brief summary of the merits and benefits of Web standards includes:

  • Simpler development and maintenance: Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else.
  • Compatibility with future Web browsers: When you use defined standards and valid code you future-proof your documents by reducing the risk of future Web browsers not being able to understand the code you have used.
  • Faster download and rendering of Web pages: Less HTML results in smaller file sizes and quicker downloads. Modern Web browsers render pages faster when they are in their standards mode than when they are in their backwards-compatible mode.
  • Better accessibility: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
  • Better search results: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search results.
  • Simpler adaptation: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

Reference Portlet Markup Template

CSS Naming Conventions

Best Practices

  • Use classes instead of ids whenever possible
    • class="portlet-titlebar" rather than id="portletTitlebar"
  • Separate class names by dashes as opposed to underscores
    • class="portlet-titlebar" rather than class="portlet_titlebar"
  • Prefix classes with 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"

Reference

Bootstrap CSS

uPortal 4.1x and 5.0 include bootstrap, therefore markup that depends on bootstrap CSS classes should render as expected.

Reference