.u-mv for margin-top and margin-bottom ( margin vertical )
.u-mh for margin-right and margin-left ( margin horizontal )
iotaCSS provides an extremely smart and flexible way to create responsive margins. There are 3 ways to do it:
Create responsive margin sizes
This features allows you to create one set of margins that will have different size in different breakpoints. For example
let’s say you want to create a set of margins that will be 10px in mobile and 20px from tablets and up:
Create responsive margin classes
This feature allows you to use classes with breakpoint suffixes and use them to adjust the size of an elements margin
on different breakpoints. Assuming we would like to create two margin sizes, one small and one large and we will like
to have small margin on mobile and large margin on tablets and up. To create this, you should do this:
This feature is a combination of the two ones above and it’s really useful when you would like to apply a set of responsive
margin sizes on a specific breakpoint and after. For example, let’s say that you have a responsive margin size named ‘small’
and it has a 5px margin on mobile, 10px margin on tablets and 20px margin on desktop. If you want for example to skip mobile
but still make it 10px for tablet and 20px for desktop you need to use a responsive class that has a responsive size.
Paragraph with margin small applied on all breakpoints.
Paragraph with margin small applied on tablet devices and up.
Specify Margin Directions
iotaCSS also provides you the ability to generate only the margin directions you need, to avoid generating CSS you don’t use. To do
this, you need instead of passing a number in the margin size, you should pass a list.
Assuming you would like to specify a new margin size named ‘small’ and you want to only generate the margin bottom of 10px, you can do it