.u-pv for padding-top and padding-bottom ( padding vertical )
.u-ph for padding-right and padding-left ( padding horizontal )
iotaCSS provides an extremely smart and flexible way to create responsive paddings. There are 3 ways to do it:
Create responsive padding sizes
This features allows you to create one set of paddings that will have different size in different breakpoints. For example
let’s say you want to create a set of paddings that will be 10px in mobile and 20px from tablets and up:
Create responsive padding classes
This feature allows you to use classes with breakpoint suffixes and use them to adjust the size of an elements padding
on different breakpoints. Assuming we would like to create two padding sizes, one small and one large and we will like
to have small padding on mobile and large padding 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
padding sizes on a specific breakpoint and after. For example, let’s say that you have a responsive padding size named ‘small’
and it has a 5px padding on mobile, 10px padding on tablets and 20px padding 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 padding small applied on all breakpoints.
Paragraph with padding small applied on tablet devices and up.
Specify Padding Directions
iotaCSS also provides you the ability to generate only the padding directions you need, to avoid generating CSS you don’t use. To do
this, you need instead of passing a number in the padding size, you should pass a list.
Assuming you would like to specify a new padding size named ‘small’ and you want to only generate the padding bottom of 10px, you can do it