Nonconformist Propaganda Machine

    boxe-u-visibility

    0.1.0 • Public • Published

    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.

    Install

    npm i boxe-u-visibility

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    Apache-2.0

    Unpacked Size

    16.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • typin.dev