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>