Focus Content Style Classes

Focus contains quite a few CSS classes you can use to spice up your content.

These classes should be applied in WordPress posts/pages, Text Boxes, Modular Content, or even in more advanced customizations where this level of presentational control is desired.

Watch this video: I’ll show you how to apply Focus content classes so you can build pages like a pro!

Content Callouts

  • alert — Makes an alert with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace $x2
  • box — Makes a content box with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace $x2
  • note — Makes a note with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace $x2

Dynamic Presentation Styles

  • pop — Make an element “pop” by giving it a box shadow
  • extend — Force an element to extend outside the content column and take up the full layout width, $w-total, on larger screens
  • breakout — Break an element out by extending it from halfway into the content column to the edge of the browser
  • pullout — Pull an element out to the side of the content column and extend it to the edge of the browser
  • bar — creates a pseudo sidebar on Readability and Focus templates (large screens only); on Focus templates, the bar appears on the right by default but can be moved to the left side by combining this class with left (ie. <div class="bar left">My bar content</div>)
  • frame — Add a frame to an image per settings defined in the Design Options

Buttons

The following classes can be used in conjunction with the button class to deploy different types of buttons (all of which are defined in the Design Options):

  • save — Save/Yes
  • delete — Delete/Cancel/No
  • action — Action/Go
  • update — Update

Special Text Elements

  • drop_cap — Turns text into a drop cap; for example, <span class="drop_cap">X</span> will produce a drop cap X
  • highlight — Mimics “highlighter” behavior; should be applied to an inline element (such as <span class="highlight">Highlight this text</span>); highlight color is defined in the Design Options
  • caption — Intended for use on a <p> tag that immediately follows an <img /> tag; applies special formatting and spacing for captions; color is defined in the Design Options
  • footnotes — Should be applied to a wrapping <div> that includes footnotes where each note is wrapped in <p> tags (see markup example)

Positioning:

  • center — When applied to…
    • a block-level element, it will center text within that element
    • if the block-level element has a pre-defined width, it will center the entire element within its parent
  • left — floats an element left, clears all floats, and applies both a right and bottom margin equal to one unit of whitespace $x2
  • right — floats an element right, clears all floats, and applies both a left and bottom margin equal to one unit of whitespace $x2
  • block — adds display: block, clears all floats, doesn’t allow text to wrap around the element, and also applies a bottom margin equal to one unit of whitespace $x2

Note: There are also corresponding, WP-specific aliases for the above classes—aligncenter, alignleft, alignright, and alignnone, respectively.

In practice, the WordPress classes get used more often than the Focus classes because they appear in automatic WP output (for example, images inside posts). Despite this, I prefer the Focus classes for brevity and clarity.

Advanced Customization Styles

Golden Ratio Typography and Spacing

  • grt — Applies the Golden Ratio Typography style package. The modular GRT CSS boilerplate greatly enhances the customization experience!

Structural Classes

These are advanced classes that should only be deployed in the context of the Skin Editor (or in larger-scale customizations). These classes do not belong, for example, inside your WordPress post content, Modular Content, Text Boxes, etc.

  • container — On smaller screens, a <div> with this class will maintain gutters on the left and right sides; on larger screens, it’ll expand to a maximum width of $w-total and be centered within its parent (see note below)
  • text — Defines a column of text that expands to a maximum width of $w-content

The container is intended to be part of a 2-element construction. It should be wrapped in a <section> tag that spans the full width of the screen.

Template Styles

I’m including this section for completeness, but these styles are dependent upon the rest of the page being constructed properly. They should only be applied to the <body> tag!

  • focus — triggers the Focus presentation mode
  • readability — triggers the Readability presentation mode

Note: If one of these classes is not present, the template will render in full width mode.