LiveWhale CMS

Welcome, Guest Login

Support Center

Our documentation is moving:

Please check for the most up-to-date LiveWhale CMS and LiveWhale Calendar documentation. The below legacy documentation will remain available as a reference until the documentation migration is complete.

Styleguide: Markup

Last Updated: Jul 06, 2016 02:12PM PDT

Basic Coding Guide

Use your head and do good semantic markup.

  • Tag and attribute names are always lowercase.
  • Paragraphs of text should always be placed in a <p> tag. Never use multiple <br/> tags.
  • Items in list form should always be in <ul><ol>, or <dl>, Never a set of <div> or <p>
  • Every form input that has text attached should utilize a <label> tag. Especially radio or checkbox elements.
  • Even though quotes around attributes is optional, always put quotes around attributes for readability.

Table Guidelines

Use a table for tabular data, not for positioning. :)
  • Make use of <thead><tfoot><tbody>, and <th> tags (and Scope attribute) when appropriate.
  • You want the browser to load the footer before a table full of data, so <tfoot> goes above <tbody> for speed reasons.
<table summary="This is a chart of invoices for 2011.">
   <th scope="col">
      Table header 1
   <th scope="col">
      Table header 2
     <td>Table footer 1</td> <td>Table footer 2</td>
     <td>Table data 1</td> <td>Table data 2</td>

HTML5 Considerations

If you’re using HTML5, then you’ll have a few extra options, but in any case, use them properly.

  • It would be a rare case to use <header> or <footer> more than once in a document.
  • <articles> may contain <sections><sections> may contain<articles>, or they may be used alone, but in all cases they should contain actual content. Use a <div> otherwise.
  • Don’t prefix asset requests (e.g. CSS or JavaScript) with the protocol, e.g. just start with //domain/path-to-my-url when you might have usedhttp://domain/path-to-my-url. This works for CDN usage as well as server-local requests.
<p class="line note" data-attribute="106"> This is my paragraph of special text. </p>

XPHP Template Values

Frontend web pages may make use of a few special variables to display metadata about the page. These are:

  • page_title: The page title set in the backend management area for the page. Typically this would be incorporated into the title tag on a page, to make the page title variable a dynamic component of the entire title tag value. Usage: <xphp var="page_title"/>
  • page_last_modified: The date and time when this page was last edited. This variable, along with page_last_editor, could be displayed in a page footer, for example. Usage: <xphp var="page_last_modified"/>
  • page_last_editor: The last user who edited the page.  Usage: <xphp var="page_last_editor"/>

The above XPHP values are special to the page, but XPHP can insert any number of other values. Content available to a web page as a GET, POST, or GLOBAL variable in PHP can be inserted into your web page using a template variable.

To insert content from a GET variable, such as in the request “/my_page.php?lastname=Robinson”, use the following variable:

<xphp var="lastname" type="get"/>

If the “lastname” variable is a POST variable, simply change the “type” attribute to “post”:

<xphp var="lastname" type="post"/>

If the “lastname” variable is a GLOBAL variable, omit the “type” attribute completely:

<xphp var="lastname"/>

Note: When inserting content from a GET or POST variable, the output will obey any input filters configured for the page, and by default will have any HTML tags stripped.

This functionality is provided by the open source XPHP project. Advanced users may wish to tap into other XPHP functionality, such as casting variables by type. For more information, please visit:
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found