Justify Content

The justify content utility contains helper classes for the CSS justify-content property.


Installation

npm install --save-dev iotacss-utils-justify-content

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-utils-justify-content-namespace String 'jc-'
$iota-utils-justify-content-start-name String start
$iota-utils-justify-content-end-name String end
$iota-utils-justify-content-center-name String center
$iota-utils-justify-content-res Boolean false Enable / Disable breakpoint specific classes
$iota-utils-justify-content-breakpoints Map $iota-global-breakpoints Breakpoints map

Class Syntax

Simple Class

1
.[utility-namespace][justify-content-namespace][start/end/center]

Responsive Class

1
.[utility-namespace][justify-content-namespace][start/end/center]@[breakpoint]

Class list

  • .u-jc-start
  • .u-jc-end
  • .u-jc-center

Change class names

iotaCSS allows you to fully customize all classes based on your needs. Assuming you would like to change the syntax of the classes from .u-jc-start to u-justify-content-start. To do this, you should update the namespace classes:

1
$iota-utils-align-items-namespace : 'justify-content-';

Enable responsive justify content utilities

By enabling the responsive justify content utilities, you have access to a set of utility classes which bind to breakpoints. By default, they bind to the iotaCSS global breakpoints specified in Settings.Core.

1
$iota-utils-justify-content-res: true;
1
2
3
<div class="u-jc-center u-jc-start@sm">
  Div with justify-content: center; on mobile and justify-content: flex-start; on tablets and up.
</h1>

Set breakpoints only for justify content utility

In case you would like to use different breakpoints to justify content utility only, you should use the local variable.

1
2
3
4
$iota-utils-justify-content-res: true;
$iota-utils-justify-content-breakpoints: (
  xs: screen and (max-width: 767px)
);
1
2
3
<div class="u-jc-center@xs">
  Div with justify-content: center; in mobile devices only.
</div>