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>