Last Updated on August 13, 2019
Filed under General

Utility Classes & Secrets

Sweetness v1.x Only

There are a number of utility classes that can be used for various elements throughout the framework. Most shortcodes include a class option to easily assign your custom classes or those below to them as well.

Typography

  • small - Forces the text to be 80% smaller than the base size.
  • text-left - Aligns the text to the left.
  • text-right - Aligns the text to the right.
  • text-center - Aligns the text to the center.
  • text-light - Forces the element font color to be light.
  • text-dark - Forces the element font color to be dark.
  • text-uppercase - Forces the text to use uppercase characters.
  • text-lowercase - Forces the text to use lowercase characters.
  • text-capitalize - Forces the text to capitalize the first letter of each world.
  • no-text-shadow - Removes an applied text shadow from the element.
  • no-text-shadow-all - Removes an applied text shadow from and all children within the element.
  • text-shadow-light - Applies a light text shadow to the element.
  • text-shadow-dark - Applies a dark text shadow to the element.

General Styles

  • no-border-radius - Removes an applied border radius from the element.
  • no-box-shadow - Removes an applied box shadow from the element.
  • overflowvisible - Adds the css style overflow:visible to the element.
  • flat - Removes the theme's gradient texture from the element

Buttons

  • btn-link - Turns the button into a text link with margin and padding.
  • ghost - Turns the button into a "ghost" button by removing the background color and applies the color to the border on the normal state.
  • btn-rounded - Adds a small border radius to the butotn
  • btn-pill - Adds a full border radius to the button.
  • btn-square - Removes the border radius on the button
  • btn-3d - Makes the button look "3D"
  • btn-block - Makes the button 100% width of it's container.

Shortcode Classes

  • flat-slider - [slider] - Removes the frame, box box shadow and border from the theme's slider.
  • full-width-edge - [full_width] - Removes the margin and padding from the section. If a full-size image included within this section the image will take up the entire area and without the need of background sizes.
  • callout - [alert] - Merges the flexibility of the [alert] shortcode with the styling of the [callout] shortcode.

Images

  • round - Adds a border-radius of 50% (circle) to the image.
  • pretty - Adds the theme's default frame style to the image or element.
  • flat-square - Squares the image and removes all frame styling.
  • flat-circle - Circles the image and removes all frame styling.
  • alignblock - On mobile, the image will align to the center forcing any wrapped text to go below it.

Animations

Basic Animations were added to v1.5 of the framework and provide a super basic method of animating an element when it comes into the viewport. To animate an element you must include two classes:

  • in-view - (required) This triggers the animation to begin when it comes into view.
  • animate - (required) Sets the timing and initial opacity of the element.

Types

The following animations are available. Notice the capitalization of the inner words:

  • fadeIn - The element will fade into focus from it's current position.
  • fadeInUp - The element will fade into focus starting from above it's current position.
  • fadeInDown - The element will fade into focus starting from below it's current position.
  • fadeInLeft - The element will fade into focus starting from the left of it's current position.
  • fadeInRight - The element will fade into focus starting from the right of it's current position.
  • scaleIn - The element will fade into focus in an enlarged state from it's current position.
<p class="in-view animate scaleIn">Aenean lacinia bibendum nulla sed consectetur.</p>

Delay

The initial animation is set to begin at 0.5 seconds when in view. To create an animation pattern or tree, you can use the following classes to delay subsequent animation blocks. Remember all animations are triggered when they come into view after which the delay then begins.

  • delay1 - Delay the start of the animation by 1 second.
  • delay1-5 - Delay the start of the animation by 1.5 seconds.
  • delay2 - Delay the start of the animation by 2 seconds.
  • delay2-5 - Delay the start of the animation by 2.5 seconds.
  • delay3 - Delay the start of the animation by 3 seconds.
<p class="in-view animate scaleIn">Will animate first after 0.5 seconds.</p>
<p class="in-view animate scaleIn delay1">Will animate second after 1 second.</p>
<p class="in-view animate scaleIn delay1-5">Will animate third after 1.5 seconds.</p>
<p class="in-view animate scaleIn delay2">Will animate fourth after 2 seconds.</p>

Visibility

  • hide - Completely hides the element.
  • hide_on_mobile - Hides the element only on screens less than 768px.
  • hide_on_tablet - Hides the element on screens between 768px and 1024px.
  • hide_on_standard - Hides the element only on screens greater than 1025px.

Undocumented Shortcodes and Options

Inner 1/2 Columns

If you are using [one_half] and you want to use an inner column set also set to [one_half] you will need to include suffix "inner" to the set.

[one_half]
    [one_half_inner]...[/one_half_inner]
    [one_half_inner last]...[/one_half_inner]
    [clear]
[/one_half]

Inner Toggles

If you are using [toggle] and you want to use another toggle within it you will need to include suffix "inner" to the set.

[toggle title=""]
    [toggle_inner title=""]...[/toggle_inner]
[/toggle]

Equal Height Columns

Since v1.5.6, Bootstrap columns are available from the shortcode generator. To make the columns equal height to the tallest column, use the equal_height="true" argument in the [row] shortcode.

Full Width Split Backgrounds on Mobile

Because the split background are absolutely positioned, on mobile they of course would not align correctly to their content. If you would like to still display the image, you can include bg_mobile="true" within the [full_width] shortcode. This will output the image above their split content. Note that if you are using two split images, one on both sides, then only the first will be used. To remove the theme styled frame on the image, include bg_mobile_frame="false".

Google Maps Address and Direction Button

There are two additional options for the [map] shortcode. Both of these are set to false by default.

  • show_address="true" - Will display the map address on the bottom left of the map display.
  • show_directions="true" - Will show a button that links to the default get directions map on Google.

Page Title

Use [page_title] to output the current page title (unstyled).