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!
alert— Makes an alert with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace
box— Makes a content box with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace
note— Makes a note with settings defined in the Design Options, also adds a bottom margin equal to one unit of whitespace
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
<div class="bar left">My bar content</div>)
frame— Add a frame to an image per settings defined in the Design Options
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):
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)
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
right— floats an element right, clears all floats, and applies both a left and bottom margin equal to one unit of whitespace
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
Note: There are also corresponding, WP-specific aliases for the above classes—
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!
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-totaland be centered within its parent (see note below)
text— Defines a column of text that expands to a maximum width of
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.
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
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.