Padding Utility

Installation

npm install --save-dev iotacss-utils-padding

Dependencies

• Settings.Core
• Tools.Core

Settings

Class Syntax

Simple Class

1
.[utility-namespace][padding-namespace][t/r/b/l/v/h][extra-padding-name]

Responsive Class

1
.[utility-namespace][padding-namespace][t/r/b/l/v/h][extra-padding-name]@[breakpoint]

Class List

Padding Classes

• .u-p for padding
• .u-pt for padding-top
• .u-pr for padding-right
• .u-pb for padding-bottom
• .u-pl for padding-left
• .u-pv for padding-top and padding-bottom ( padding vertical )
• .u-ph for padding-right and padding-left ( padding horizontal )

Responsive Padding

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:

1
2
3
4
$iota-utils-padding-default: (
  null : 10px,
  sm   : 20px
);

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:

1
2
3
4
5
$iota-utils-padding-extra: (
  -small: 10px,
  -large: 20px
);
$iota-utils-padding-res: true;

1
2
3
<p class="u-pb-small u-pb-large@sm">
  Paragraph with small padding bottom in mobile and large padding bottom from tablets and up.
</p>

Create responsive padding classes width responsive sizes

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.

1
2
3
4
5
6
7
8
$iota-utils-padding-extra: (
  -small: (
    null : 5px,
    sm   : 10px,
    sm   : 20px
  )
);
$iota-utils-padding-res: true;

1
2
3
4
5
6
<p class="u-pb-small">
  Paragraph with padding small applied on all breakpoints.
</p>
<p class="u-pb-small@sm">
  Paragraph with padding small applied on tablet devices and up.
</p>

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.

1
$iota-utils-padding-default: p pt pr pb pl pv ph;

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 like this:

1
2
3
$iota-utils-padding-extra: (
  -small: null null null 10px;
);

That will generate only the class .u-pb-small instead of generating all the set of padding classes.