boxe-u-visibility

Visibility helper classes from/until a specific breakpoint e.g. u-hidden, u-hidden-from-mobile.

Install using npm:

$ npm install --save boxe-u-visibility

Import:

@import 'boxe-u-visibility/_visibility';

Settings

Variants

Control visibility variant classes that get generated by visibility utility.

Defaults:

// $boxe-visibility-variants.
$boxe-visibility-variants: (
  hidden: none,
  block:  block,
  inline: inline,
  flex:   flex,
  inline-block: inline-block,
  inline-flex:  inline-flex
) !default;

Enable breakpoints

Disable or Enable generation of breakpoint based classes.

Defaults:

// Enable breakpoint based classes.
$boxe-breakpoint-visibility-enabled: true !default;

Breakpoint suffix

Customise the symbol that gets inserted before breakpoint name.

Defaults:

// Breakpoint suffix.
$boxe-visibility-breakpoint-suffix: '-' !default;

From suffix

Customise the suffix that gets inserted in -from classes. e.g. u-hidden-from-mobile.

Defaults:

// From suffix
$boxe-visibility-from-suffix: '-from' !default;

Until suffix

Customise the suffix that gets inserted in -until classes. e.g. u-hidden-until-tablet.

Defaults:

// From suffix
$boxe-visibility-until-suffix: '-until' !default;

Customisation

Example:

$boxe-visibility-variants: (
  hidden: none,
  block:  block
);
$boxe-visibility-from-suffix: '-frm';
$boxe-visibility-until-suffix: '-untl';
@import 'boxe-u-visibility/_visibility';

Result:

.u-hidden {
  display: none;
}

.u-block {
  display: block;
}

@media (min-width: 20em) {
  .u-hidden-frm-mobile {
    display: none;
  }
  .u-block-frm-mobile {
    display: block;
  }
}

@media (max-width: 19.99em) {
  .u-hidden-untl-mobile {
    display: none;
  }
  .u-block-untl-mobile {
    display: block;
  }
}

@media (min-width: 46.25em) {
  .u-hidden-frm-tablet {
    display: none;
  }
  .u-block-frm-tablet {
    display: block;
  }
}

@media (max-width: 46.24em) {
  .u-hidden-untl-tablet {
    display: none;
  }
  .u-block-untl-tablet {
    display: block;
  }
}
...

Dependencies

sass-mq - Used for generating breakpoint based classes.