Useful css classes for admin side. To use these helpers, add fw
to your style dependencies:
wp_register_style(..., ..., array('fw'));
Easily realign text to components with text alignment classes.
<p class="fw-text-left">Left aligned text.</p>
<p class="fw-text-center">Center aligned text.</p>
<p class="fw-text-right">Right aligned text.</p>
<p class="fw-text-justify">Justified text.</p>
<p class="fw-text-nowrap">No wrap text.</p>
Transform text in components with text capitalization classes.
<p class="fw-text-lowercase">Lowercased text.</p>
<p class="fw-text-uppercase">Uppercased text.</p>
<p class="fw-text-capitalize">Capitalized text.</p>
Images can be made responsive-friendly via the addition of the .fw-img-responsive
class.
This applies max-width: 100%;
and height: auto;
to the image so that it scales nicely to the parent element.
<img src="..." class="fw-img-responsive" alt="image Responsive" >
Use the generic delete icon for links that delete something.
<a href="#" class="dashicons fw-x"></a>
Float an element to the left or right with a class. !important
is included to avoid specificity issues.
Classes can also be used as mixins.
<div class="fw-pull-left">...</div>
<div class="fw-pull-right">...</div>
Set an element to display: block
and center via margin. Available as a mixin and class.
<div class="fw-center-block">...</div>
Easily clear floats by adding .fw-clearfix
to the parent element.
Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
<div class="fw-clearfix">...</div>
Force an element to be shown or hidden. These classes use !important
to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins. Furthermore, .fw-invisible
can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
<div class="fw-show">...</div>
<div class="fw-hidden">...</div>
Utilize the .fw-text-hide
class or mixin to help replace an element’s text content with a background image.
<h1 class="fw-text-hide">Custom heading</h1>
Css helpers includes a responsive, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Grid systems are used for creating layouts through a series of rows and columns that house your content. Here’s how the grid system works:
.fw-row
and .fw-col-xs-4
are available for quickly making grid layouts..fw-col-xs-4
..fw-col-md-
class to an element will not only affect its styling on medium devices but also on large devices if a .fw-col-lg-
class is not present.This grid system was inspired from bootstrap with some modifications:
.fw-
prefix to classes.container
and .container-fluid
)We use the following media queries to create the key breakpoints to a narrower set of devices.
/* Extra small devices (phones) */
@media (max-width: 782px) { ... }
/* Small devices (tablets) */
@media (min-width: 783px) and (max-width: 900px) { ... }
/* Medium devices (desktops) */
@media (min-width: 901px) and (max-width: 1199px) { ... }
/* Large devices (large desktops) */
@media (min-width: 1200px) { ... }
Using a set of .fw-col-*
classes, you can create grid systems that look good on any device:
.fw-col-xs-*
- extra small devices (phones)..fw-col-sm-*
- small devices (tablets).fw-col-md-*
- medium devices (desktops).fw-col-lg-*
- large devices (large desktops)Tip
More details about grid system and examples can be found here.
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
Important
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.
Use a single or combination of the available classes for toggling content across viewport breakpoints.
Extra small devices (<783px) |
Small devices (≥783px) |
Medium devices (≥901px) |
Large devices (≥1200px) |
|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
The .visible-*-*
classes for each breakpoint come in three variations, one for each CSS display property value listed below.
Group of classes | CSS display |
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
So, for extra small (xs
) screens for example, the available .visible-*-*
classes are: .visible-xs-block
, .visible-xs-inline
, and .visible-xs-inline-block
.