Display Utility

The display utility contains helper classes for the CSS display property.

Installation

npm install --save-dev iotacss-utils-display

Dependencies

Settings

Name	Type	Default	Description
$iota-utils-display-res	Boolean	false	Enable / Disable breakpoint specific classes
$iota-utils-display-breakpoints	Map	$iota-global-breakpoints	Breakpoints map
$iota-utils-display-namespace	String	' '
$iota-utils-display-block-name	String	block
$iota-utils-display-hidden-name	String	hidden
$iota-utils-display-inline-name	String	inline
$iota-utils-display-inline-block-name	String	inline-block

Class Syntax

Simple Class

1 .u-[hidden/inline/inline-block/block]

Responsive Class

1 .[utility-namespace][hidden/inline/inline-block/block]@[breakpoint]

Class list

.u-inline
.u-inline-block
.u-block
.u-hidden

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-absolute to u-display-absolute. To do this, you should update the namespace classes:

1 $iota-utils-display-namespace     : 'display';

Enable responsive display utilities

By enabling the responsive display 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-display-res: true;

1
2
3 <h1 class="u-hidden u-block@sm">
  Heading hidden in mobile and display block on tablets and up.
</h1>

Set breakpoints only for display utility

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

1
2
3
4 $iota-utils-display-res: true;
$iota-utils-display-breakpoints: (
  xs: screen and (max-width: 767px)
);

1
2
3 <h1 class="u-hidden@xs">
  Heading hidden only in mobile by using a max-width breakpoint.
</h1>