Request Access

Helper CSS Classes

Your theme comes pre-built with a wide array of controls, but every now and then you might need to do a quick css “cheat”, and might not want to go to the trouble of building an entire interface for it. For those special cases, we’ve added a few extra “helper classes” that can be used in the Additional CSS Class(es) field for any block.

Auto Margin

  • margin-top-auto
  • margin-right-auto
  • margin-bottom-auto
  • margin-left-auto

When an element is using display: flex, its children can use “auto” as a margin size to fill all available space in the parent element with that margin. This is useful for cases like:

  • A nav bar where we want all of the items to start of the left side, but then the last one should be forced to the right edge of the container.
  • A “post card triptych” pattern where we have three post cards of equal height in a row, but we want the button at the bottom of each to always be forced to the very bottom.

To add an auto margin to any side of a block, just add a CSS Class of margin-[top|right|bottom|left]-auto

Read More on CSS Tricks

Overflow

  • overflow-hidden
  • overflow-visible

CSS Classes of overflow-hidden or overflow-visible will cause that block’s overflow to be hidden or visible. Be careful with this one; use of overflow: hidden can cause unexpected results on layout, for example completely breaking Sticky positioning on any child.

Read More on MDN
Read “Overflow, A Secret Benefit”

Position

  • position-absolute
  • position-relative
  • position-static

A block’s position style attribute can be customized using the following classes:

  • position-absolute will force the block to use position: absolute. Note that this won’t do anything to actually set where the thing is being positioned, so use with care, but this could be helpful in cases where you don’t want your block to “take up space”.
  • position-relative will force the block to use position: relative. Like with absolute, there are no controls for actually moving the block relative to its starting point, but this is useful in case you need to change which block an absolutely positioned child is using as an origin point.
  • position-static forces the block to use position: static. Like the previous two, mostly just useful for modifying the behavior of absolutely positioned children.
Read More on MDN

Screen Reader Text

  • screen-reader-text

Adding a class of screen-reader-text will force the block to be rendered as a clipped 1×1 pixel, effectively making it “invisible”, except to Screen Readers.

Read More on WebAIM

Responsive Visibility

  • hide-on-desktop
  • hide-on-mobile

The Vital Responsive Visibility plugin adds hide-on-desktop and hide-on-mobile which do exactly what they sound like. Most blocks that would use it should get toggle switches to control this, but you can also just directly add the classes to anything.

View on Bitbucket