Sandbox

wdac-grid

The grid is composed of a grid wrapper + one to infinity columns. You can create easy layouts with this shortcode. The key is the width attribute. These widths are separated by spaces in the wdac-column shortcode and control what widths are used for that column. Keep in mind that layouts are MOBILE FIRST, so numbers without the "@" symbol means the smallest size / the default size. Typically this is 100. When you see @d, that means "at desktop". You can also use @s, @l, @xl, and @j (small, large, extra large, and jumbo).

• class
• attr

wdac-column

• class
• width (100)

wdac-button

• href
• rel (follow)
• target (_self)
• class
• prepend
• append

wdac-phone

• class
• nolink (false)
• raw (false)

wdac-accordion

• group
• title
• class

wdac-img

• src
• class
• alt (Image)
• loading (lazy)
• is-video (false)
• loop (true)

wdac-toc

• open (false)

Content is expected in format

[wdac-toc]
Location 1||#location-1
Location 2||#location-2
[/wdac-toc]

wdac-bookmark

• Title
• id

wdac-gallery

• title
• id

wdac-case-study

• id

wdac-case-study-slider

• category
• exclude
• limit (8)
• desktop-exclude

wdac-service-columns

Will display services and the post associated to them from the registration area.

• force_global (false)

wdac-quote

• id -- Review id

Slider

These are collection of shortcodes

• Container - Sets up the boundary for the slider + the slider controls
• Slider - The slider itself
• Controls - The arrows
• Slide - each individual slide inside the slider.

They are expected to be in this format

  [wdac-slider-container]
    Content can go here.
    [wdac-slider-controls]
    [wdac-slider]
      [wdac-slide][/wdac-slide]
      [wdac-slide][/wdac-slide]
      [wdac-slide][/wdac-slide]
      [wdac-slide][/wdac-slide]
    [/wdac-slider]
    Content can go here.
  [/wdac-slider-container]

The parameters for each one are

• wdac-slider-container
  • id
  • class
  • slides (3) -- Slides displayed per view
  • slides-desktop -- Slides displayed per view on desktop
  • loop (true)
  • navigation (true)
  • special (false) -- If this is set to true it will make the active slide red and match heights
• wdac-slider
  • class
  • reverse (false)
• wdac-slide
  • class (sharp wdac-border-grey wdac-border-top wdac-border-bottom wdac-border-left wdac-border-right wdac-height--100 wdac-bg-white)
  • title (Card Title)
  • href
  • card (true)
  • lightbox

Classes

There's a plethora of utility functions available to content team to work with. Below are the most common and most frequently used. We'll expand this area as the site grows / as needed.

Widths

For controlling width of elements (for grids or for really anything) you can use the following syntax:

wdac-width--{{percentage}} wdac-width--{{percentage}}@d

Sizing is based on percentages (with some rounding) and is mobile first. That means classes without an "at" symbol go first, then the next smallest, then the next smallest, etc. Jumbo size always goes last in terms of priority, even though classes can be written in any order. Let's see a practical example.

[wdac-img src="https://hexxen.com/wp-content/uploads/2022/07/default.jpeg" class="wdac-width--100 wdac-width--50@d wdac-width--33@l" alt="Super cool image"]
  

For this, the image is 1/1 (full) size. When the screen gets to desktop size (@d) it becomes 50% wide. When the screen gets to large size (@l) it becomes 33%ish wide.

There are also two special widths that can be used in combination with the grid system:

• wdac-width--auto takes the size of its content and nothing more.
• wdac-width--expand takes all remaining available room.

The above two are often used together when you want one side of a grid to be smaller (auto) and the other side to be whatever room is left (expand).

Text Modifiers

Heading classes (make text look like headings)

• wdac-h1
• wdac-h2
• wdac-h3
• wdac-h4
• wdac-h5
• wdac-h6

Alignment classes:

• wdac-text-center
• wdac-text-left
• wdac-text-right

Note: You can also use @d, @l, @xl, and @j modifiers to change alignment dependent on screen size. Example for making something centered on mobile, but left on desktop: class="wdac-text-center wdac-text-left@d"

Font Weights / Styling

• wdac-text-normal
• wdac-text-medium
• wdac-text-semibold
• wdac-text-bold
• wdac-text-extrabold
• wdac-text-black (note that this class is for font weight and NOT color)
• wdac-text-italic
• wdac-text-small
• wdac-text-smaller

Text Colors

• wdac-text-primary
• wdac-text-primary-shade
• wdac-text-white
• wdac-text-dark-grey
• wdac-text-grey
• wdac-text-color-black (note that this class includes COLOR in the name to separate it from the font weight modifier)
• wdac-text-first-line-primary (first line of text is red)

Lists

Ordered and unordered lists work as per usual. To make unordered lists look fancy, you can use the arrow list class. See example:

<ul class="wdac-arrow-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
    

Columns

You can easily make content take up multiple columns via the grid system OR you can use these special classes:

• wdac-col--1
• wdac-col--2
• wdac-col--3
• ...

See example:

<p class="wdac-col--2@d">This is a small bit of content that I wrote myself. I'm very proud. This is a small bit of content that I wrote myself. I'm very proud. This is a small bit of content that I wrote myself. I'm very proud.</p>
    

Padding / Margin

We have a lot of control over padding and margins via classes. The syntax is very simple and is based on percentages. For example:

<p class="wdac-bg-grey wdac-margin-top--100 wdac-margin-top--200@d wdac-padding-x--25 wdac-padding-x--50@d">This is my formatted content</p>

These classes always start with wdac-margin- or wdac-padding- and then you designate a direction. To simplify, you can use "y" for both top and bottom, and "x" for left and right, similar to the x and y axis on a graph. After that, you have TWO dashes and then the multiplier. This multiplier is based on 60px for Hexxen. So 100 means 60px, 200 means 120px, 50 means 30px, etc.

Breaking it down into parts:

• wdac-bg-grey is a background color class. We'll talk about that later (all it does is make the background grey).
• wdac-margin-top--100 means for the top margin, we want it to be 100%, or 60px.
• wdac-margin-top--200@d means for the top margin, we want it to be 200%, or 120px, but ONLY for desktop (@d means "at desktop").
• wdac-padding-x--25 means for left AND right padding, we want it to be 25% or 15px.
• wdac-padding-x--50@d means for left AND right padding, we want it to be 50% or 15px, but ONLY for desktop.

This syntax is identical for both padding and margin, with some very specific exceptions that probably won't be used by content team at all (margins can be negative). Also note: to remove margins or padding, use the zero multiplier like wdac-margin-y--0.

Fluid Padding / Fluid Margin

Take everything you know about the above Padding / Margin rules and let's make it more dynamic. We also have more dynamic spacing options called fluid margin and fluid padding. These classes behave very similarly to the normal padding / margin, but they will grow and shrink with the viewport height.

You will notice that the padding and margins of the site will grow and shrink. This is because most of the site uses this dynamic / fluid system. Let's modify our example.

<p class="wdac-margin-fluid-top--100 wdac-margin-fluid-top--200@d wdac-padding-fluid-x--25 wdac-padding-fluid-x--50@d">This is my formatted content</p>

Live example using these rules:

This is my formatted content

In most cases: you want to use fluid classes unless you want very fine control over the spacing.