Helpers - Spacing

Margins

We can add default spacing to any block type element, we can even specify the side we want to add the margin to. We can achieve this by adding the direction to the class, like this 'mg-{top|right|bottom|right}-lv$'.

There is also an option to remove vertical/horizontal margins or just remove them all.

  • All: .mg-none or .mg-none-i
  • Vertical: .mg-y-none or mg-y-none-i
  • Horizontal: .mg-x-none or mg-x-none-i
mg-lv1
mg-lv2
mg-lv3
mg-lv4
mg-lv5
mg-lv1
mg-lv2
mg-lv3
mg-lv4
mg-lv5
Paddings

We can add default padding to any element. We can even specify the side we want to add the padding to, we can achieve this by adding the direction to the class, like this 'mg-{top|right|bottom|right}-lv$'.

There is also an option to remove vertical/horizontal paddings or just remove them all.

  • All: .pd-none or .pd-none-i
  • Vertical: .pd-y-none or pd-y-none-i
  • Horizontal: .pd-x-none or pd-x-none-i
pd-lv1
pd-lv2
pd-lv3
pd-lv4
pd-lv5
pd-lv1
pd-lv2
pd-lv3
pd-lv4
pd-lv5
Push
push-left
push-center
push-right
push-left
push-center
push-right
Media

I believe these classes are pretty self-explanatory, but for those that feel lost in the fog I will try to explain them. Basically these classes will hide or show elements based on media queries; show-phone for instance will only show the given element when the resolution is under the sm breakpoint.

Tips & advice

You can find the breakpoints under your media folder in a file called 'settings.json'.This is your shared variables file for scss and js.

  • show-phone
    window width < breakpoint.sm
  • show-phone-i
    window width < breakpoint.sm
  • hide-phone
    window width < breakpoint.sm
  • show-mobile
    window width < breakpoint.md
  • show-mobile-i
    window width < breakpoint.md
  • hide-mobile
    window width < breakpoint.md
  • show-tablet
    window width < breakpoint.lg
  • show-tablet-i
    window width < breakpoint.lg
  • hide-tablet
    window width < breakpoint.lg
  • hide-desktop
    window width > breakpoint.lg
Responsive video
Tips & advice

Aspect ratio by default is set to 16:9 but you could change this with the aspect-ratio helper to 4:3 o 1:1.

Aspect ratio

You can overwrite the default $aspect-ratios list in your project.