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.