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
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
Push
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.
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
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.