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. (Exceptions to this rule are noted below.)

Watch the 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

Special Presentation Styles

  • extend — Force an element to “break out” of the content column and take up the entire layout width $w-total on screens large enough to accommodate this behavior
  • 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
  • frame — Add a frame to an image per settings 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 here)
  • 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>)

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 a bottom margin equal to one unit of whitespace $x2
  • right — floats an element right, clears all floats, and applies both a left and a 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, on 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. Modular construction greatly enhances the customization experience!

Button Styles

Once you’ve added flexible button styles to your Focus environment, you can deploy ’em like a boss:

  • button — Default button (as defined in Design Options)

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

By default, button styles are limited to <button> tags and <input type="submit" /> elements.

Structural Classes

These are advanced classes that should only be deployed in the context of the Skin Editor (or in larger-scale constructions). 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.