Margin Utility

Installation

npm install --save-dev iotacss-utils-margin

Dependencies

• Settings.Core
• Tools.Core

Settings

Class Syntax

Simple Class

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

Responsive Class

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

Class List

Margin Classes

• .u-m for margin
• .u-mt for margin-top
• .u-mr for margin-right
• .u-mb for margin-bottom
• .u-ml for margin-left
• .u-mv for margin-top and margin-bottom ( margin vertical )
• .u-mh for margin-right and margin-left ( margin horizontal )

Responsive Margin

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:

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

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:

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

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

Create responsive margin 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 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.

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

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

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.

1
$iota-utils-margin-default: m mt mr mb ml mv mh;

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

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

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