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 shadowextend
— Force an element to extend outside the content column and take up the full layout width,$w-total
, on larger screensbreakout
— Break an element out by extending it from halfway into the content column to the edge of the browserpullout
— Pull an element out to the side of the content column and extend it to the edge of the browserbar
— 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 withleft
(ie.<div class="bar left">My bar content</div>
)frame
— Add a frame to an image per settings defined in the Design Options
Buttons
button
— Default button (as defined in the 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/Yesdelete
— Delete/Cancel/Noaction
— Action/Goupdate
— 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 Xhighlight
— 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 Optionscaption
— 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 Optionsfootnotes
— 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
— addsdisplay: 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 modereadability
— triggers the Readability presentation mode
Note: If one of these classes is not present, the template will render in full width mode.