Webmaster's Guide

Box/layout styles:

  • box - default box - large box head and no borders/backgrounds.
  • bbox - background box - medium-sized box head, with head and body background colors separate.
    • alt - alternate head background color.
  • lbox - light box - small box head with a soft line between head and body.
  • cbox - color box - nicely padded head and body on a single background color.
    • alt - alternate background color.
  • fbox - footer box - no borders and largeish head that renders inline when possible.

Additional (combo) classes:

  • w{NN} - make a box span NN% of the container width.
    • tw{NN} - tablet-format (iPad portrait) emergency widths.
    • rightcol - makes the box float to the right. (Useful for maintaining proper content order on mobile screens.)
    • flex - gives box a flexible width up to the maximum indicated by w{NN}/tw{NN}
  • One-column layouts:
    • w25, w33, w50, w67, w75 - basic widths.
    • tw33, tw50, tw67, tw100 - tablet only.
  • Two-column layouts:
    • w33, w42, w50, w58, w67 - basic widths.
    • tw42, tw58, tw67 - tablet only.
  • nohead - hide (not remove) the box heading

Content-specific box styles:

  • slideshow - turns a list of content .items with banner images (and optional h3 titles) into a cross-fading slideshow spannig the full box width.
    • Images are centered inside the container and cropped at the sides on narrower screens.
  • productlist quickproducts - miniature productlist optimized for narrow boxes.
    • morebutton - replace the "Add to Cart" button with a big "More Info" button.
  • articlelist - for basic article/news list ...
    • fancydates - for fancy newslist date display
  • navbox - for simple <ul>-based linklists with arrow icons
  • fbox modifiers:
    • social - for <ul> list of social media links (facebook, twitter, rss, youtube, gplus, pinterest)
    • compact - icon only links.
    • postlist - for mailinglist subscription box
  • footer - for contact info ("pgfoot2"/Lower Footer)

Content Styles

  • ul.minitable - simple right-aligned list where <strong> (bold) text floats to the left. Nice for opening hours, etc.