Wondering what’s next for npm?Check out our public roadmap! »

    @wide/styles-helpers

    2.0.3 • Public • Published

    SCSS Helpers Collection

    Install

    npm install @wide/styles-helpers --save
    

    Note

    Please, note that more you add helper mixins, more your CSS compiled file will be heavy.

    So add helpers you really need.

    Usage



    a11y


    Mixins

    a11y-aria()

    ARIA roles display visual cursor hints.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.a11y-aria;
    Output
    [aria-busy=true] {
        cursor: progress;
    }
    [aria-controls] {
        cursor: pointer;
    }
    [aria-disabled] {
        cursor: default;
    }

    a11y-sr()

    Screen readers.

    @use '@wide/styles-helpers' as helpers;
     
    {
        @include helpers.a11y-sr();
    }
    Output
    .a11y-sr-only {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important;
    }
    .a11y-sr-focus:not(:focus) {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important;
    }

    a11y()

    Combine both a11y-aria and a11y-sr helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    {
        @include helpers.a11y();
    }
    Output
    [aria-busy=true] {
        cursor: progress;
    }
    [aria-controls] {
        cursor: pointer;
    }
    [aria-disabled] {
        cursor: default;
    }
     
    .a11y-sr-only {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important;
    }
    .a11y-sr-focus:not(:focus) {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important;
    }


    alignment


    Variables

    All those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $aligns

    Define all alignment values to support.

    $aligns: (
        baseline,
        bottom,
        middle,
        top,
        text-top,
        text-bottom
    !default;

    $aligns-important

    Set the important property on each rules.

    $aligns-important: true;

    Mixins

    alignment-helper()

    Set all alignments classes from the $aligns variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.alignment-helper;
    Output
    .align-baseline {
        vertical-align: baseline !important;
    }
     
    .align-bottom {
        vertical-align: bottom !important;
    }
     
    .align-middle {
        vertical-align: middle !important;
    }
     
    .align-top {
        vertical-align: top !important;
    }
     
    .align-text-top {
        vertical-align: text-top !important;
    }
     
    .align-text-bottom {
        vertical-align: text-bottom !important;
    }
     
    .align-vcenter {
        font-size: 0;
    }
    .align-vcenter::before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .align-vcenter > * {
        display: inline-block;
        font-size: 1rem;
        vertical-align: middle;
    }

    alignment-helper-with-bp()

    Set all alignments classes from the $aligns variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.alignment-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .align-baseline\@xs-only {
            vertical-align: baseline !important;
        }
     
        .align-bottom\@xs-only {
            vertical-align: bottom !important;
        }
     
        .align-middle\@xs-only {
            vertical-align: middle !important;
        }
     
        .align-top\@xs-only {
            vertical-align: top !important;
        }
     
        .align-text-top\@xs-only {
            vertical-align: text-top !important;
        }
     
        .align-text-bottom\@xs-only {
            vertical-align: text-bottom !important;
        }
     
        .align-vcenter\@xs-only {
            font-size: 0;
        }
        .align-vcenter\@xs-only::before {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .align-vcenter\@xs-only > * {
            display: inline-block;
            font-size: 1rem;
            vertical-align: middle;
        }
    }
    @media (min-width: 36em) {
     /*
      * .align-baseline\@sm
      * .align-bottom\@sm
      * .align-middle\@sm
      * .align-top\@sm
      * .align-text-top\@sm
      * .align-text-bottom\@sm
      * .align-vcenter\@sm
      * .align-vcenter\@sm::before
      * .align-vcenter\@sm > *
      */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
     /*
      * .align-baseline\@sm-only
      * .align-bottom\@sm-only
      * .align-middle\@sm-only
      * .align-top\@sm-only
      * .align-text-top\@sm-only
      * .align-text-bottom\@sm-only
      * .align-vcenter\@sm-only
      * .align-vcenter\@sm-only::before
      * .align-vcenter\@sm-only > *
      */
    }
    @media (min-width: 48em) {
     /*
      * .align-baseline\@md
      * .align-bottom\@md
      * .align-middle\@md
      * .align-top\@md
      * .align-text-top\@md
      * .align-text-bottom\@md
      * .align-vcenter\@md
      * .align-vcenter\@md::before
      * .align-vcenter\@md > *
      */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
     /*
      * .align-baseline\@md-only
      * .align-bottom\@md-only
      * .align-middle\@md-only
      * .align-top\@md-only
      * .align-text-top\@md-only
      * .align-text-bottom\@md-only
      * .align-vcenter\@md-only
      * .align-vcenter\@md-only::before
      * .align-vcenter\@md-only > *
      */
    }
    @media (min-width: 64em) {
     /*
      * .align-baseline\@lg
      * .align-bottom\@lg
      * .align-middle\@lg
      * .align-top\@lg
      * .align-text-top\@lg
      * .align-text-bottom\@lg
      * .align-vcenter\@lg
      * .align-vcenter\@lg::before
      * .align-vcenter\@lg > *
      */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
     /*
      * .align-baseline\@lg-only
      * .align-bottom\@lg-only
      * .align-middle\@lg-only
      * .align-top\@lg-only
      * .align-text-top\@lg-only
      * .align-text-bottom\@lg-only
      * .align-vcenter\@lg-only
      * .align-vcenter\@lg-only::before
      * .align-vcenter\@lg-only > *
      */
    }
    @media (min-width: 75em) {
     /*
      * .align-baseline\@xl
      * .align-bottom\@xl
      * .align-middle\@xl
      * .align-top\@xl
      * .align-text-top\@xl
      * .align-text-bottom\@xl
      * .align-vcenter\@xl
      * .align-vcenter\@xl::before
      * .align-vcenter\@xl > *
      */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
     /*
      * .align-baseline\@xl-only
      * .align-bottom\@xl-only
      * .align-middle\@xl-only
      * .align-top\@xl-only
      * .align-text-top\@xl-only
      * .align-text-bottom\@xl-only
      * .align-vcenter\@xl-only
      * .align-vcenter\@xl-only::before
      * .align-vcenter\@xl-only > *
      */
    }
    @media (min-width: 100em) {
     /*
      * .align-baseline\@xxl
      * .align-bottom\@xxl
      * .align-middle\@xxl
      * .align-top\@xxl
      * .align-text-top\@xxl
      * .align-text-bottom\@xxl
      * .align-vcenter\@xxl
      * .align-vcenter\@xxl::before
      * .align-vcenter\@xxl > *
      */
    }
    @media (min-width: 100em) {
     /*
      * .align-baseline\@xxl-only
      * .align-bottom\@xxl-only
      * .align-middle\@xxl-only
      * .align-top\@xxl-only
      * .align-text-top\@xxl-only
      * .align-text-bottom\@xxl-only
      * .align-vcenter\@xxl-only
      * .align-vcenter\@xxl-only::before
      * .align-vcenter\@xxl-only > *
      */
    }

    alignment()

    Helper alignment entry point
    Combine both alignment-helper and alignment-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.alignment;
    // @include helpers.alignment(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use alignment-helper-with-bp() false true
    Output

    See alignment-helper and alignment-helper-with-bp outputs.



    clearfix


    Mixins

    clearfix()

    Define a .clearfix class.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.clearfix;
    Output
    .clearfix::after {
        clear: both;
        content: "";
        display: block;
    }


    crop


    Mixins

    crop-helper()

    Provide a cropping container in order to display media (usually images) cropped to certain ratios.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.crop-helper;
    Output
    .crop {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .crop.-r1\:1 {
        padding-bottom: 100%;
    }
    .crop.-r2\:1 {
        padding-bottom: 50%;
    }
    .crop.-r3\:2 {
        padding-bottom: 66.6666666667%;
    }
    .crop.-r4\:3 {
        padding-bottom: 75%;
    }
    .crop.-r5\:3 {
        padding-bottom: 60%;
    }
    .crop.-r5\:4 {
        padding-bottom: 80%;
    }
    .crop.-r6\:5 {
        padding-bottom: 83.3333333333%;
    }
    .crop.-r7\:3 {
        padding-bottom: 42.8571428571%;
    }
    .crop.-r11\:8 {
        padding-bottom: 72.7272727273%;
    }
    .crop.-r16\:9 {
        padding-bottom: 56.25%;
    }
    .crop.-r16\:10 {
        padding-bottom: 62.5%;
    }
    .crop_content,
    .crop > iframe,
    .crop > embed,
    .crop > object,
    .crop > video,
    .crop > picture,
    .crop > img {
        position: absolute;
        top: 0;
        left: 0;
        max-width: none;
    }
    .crop_content.-right,
    .crop > iframe.-right,
    .crop > embed.-right,
    .crop > object.-right,
    .crop > video.-right,
    .crop > picture.-right,
    .crop > img.-right {
        right: 0;
        left: auto;
    }
    .crop_content.-bottom,
    .crop > iframe.-bottom,
    .crop > embed.-bottom,
    .crop > object.-bottom,
    .crop > video.-bottom,
    .crop > picture.-bottom,
    .crop > img.-bottom {
        top: auto;
        bottom: 0;
    }
    .crop_content.-center,
    .crop > iframe.-center,
    .crop > embed.-center,
    .crop > object.-center,
    .crop > video.-center,
    .crop > picture.-center,
    .crop > img.-center {
        top: 50%;
        left: 50%;
        transform: translate(-50%-50%);
    }

    crop-helper-with-bp()

    Provide a cropping container in order to display media (usually images) cropped to certain ratios with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.crop-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .crop.-r1\:1\@xs-only {
            padding-bottom: 100%;
        }
        .crop.-r2\:1\@xs-only {
            padding-bottom: 50%;
        }
        .crop.-r3\:2\@xs-only {
            padding-bottom: 66.6666666667%;
        }
        .crop.-r4\:3\@xs-only {
            padding-bottom: 75%;
        }
        .crop.-r5\:3\@xs-only {
            padding-bottom: 60%;
        }
        .crop.-r5\:4\@xs-only {
            padding-bottom: 80%;
        }
        .crop.-r6\:5\@xs-only {
            padding-bottom: 83.3333333333%;
        }
        .crop.-r7\:3\@xs-only {
            padding-bottom: 42.8571428571%;
        }
        .crop.-r11\:8\@xs-only {
            padding-bottom: 72.7272727273%;
        }
        .crop.-r16\:9\@xs-only {
            padding-bottom: 56.25%;
        }
        .crop.-r16\:10\@xs-only {
            padding-bottom: 62.5%;
        }
    }
    @media (min-width: 36em) {
     /*
      * .crop.-r1\:1\@sm
      * .crop.-r2\:1\@sm
      * .crop.-r3\:2\@sm
      * .crop.-r4\:3\@sm
      * .crop.-r5\:3\@sm
      * .crop.-r5\:4\@sm
      * .crop.-r6\:5\@sm
      * .crop.-r7\:3\@sm
      * .crop.-r11\:8\@sm
      * .crop.-r16\:9\@sm
      * .crop.-r16\:10\@sm
      */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
     /*
      * .crop.-r1\:1\@sm-only
      * .crop.-r2\:1\@sm-only
      * .crop.-r3\:2\@sm-only
      * .crop.-r4\:3\@sm-only
      * .crop.-r5\:3\@sm-only
      * .crop.-r5\:4\@sm-only
      * .crop.-r6\:5\@sm-only
      * .crop.-r7\:3\@sm-only
      * .crop.-r11\:8\@sm-only
      * .crop.-r16\:9\@sm-only
      * .crop.-r16\:10\@sm-only
      */
    }
    @media (min-width: 48em) {
     /*
      * .crop.-r1\:1\@md
      * .crop.-r2\:1\@md
      * .crop.-r3\:2\@md
      * .crop.-r4\:3\@md
      * .crop.-r5\:3\@md
      * .crop.-r5\:4\@md
      * .crop.-r6\:5\@md
      * .crop.-r7\:3\@md
      * .crop.-r11\:8\@md
      * .crop.-r16\:9\@md
      * .crop.-r16\:10\@md
      */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
     /*
      * .crop.-r1\:1\@md-only
      * .crop.-r2\:1\@md-only
      * .crop.-r3\:2\@md-only
      * .crop.-r4\:3\@md-only
      * .crop.-r5\:3\@md-only
      * .crop.-r5\:4\@md-only
      * .crop.-r6\:5\@md-only
      * .crop.-r7\:3\@md-only
      * .crop.-r11\:8\@md-only
      * .crop.-r16\:9\@md-only
      * .crop.-r16\:10\@md-only
      */
    }
    @media (min-width: 64em) {
     /*
      * .crop.-r1\:1\@lg
      * .crop.-r2\:1\@lg
      * .crop.-r3\:2\@lg
      * .crop.-r4\:3\@lg
      * .crop.-r5\:3\@lg
      * .crop.-r5\:4\@lg
      * .crop.-r6\:5\@lg
      * .crop.-r7\:3\@lg
      * .crop.-r11\:8\@lg
      * .crop.-r16\:9\@lg
      * .crop.-r16\:10\@lg
      */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
     /*
      * .crop.-r1\:1\@lg-only
      * .crop.-r2\:1\@lg-only
      * .crop.-r3\:2\@lg-only
      * .crop.-r4\:3\@lg-only
      * .crop.-r5\:3\@lg-only
      * .crop.-r5\:4\@lg-only
      * .crop.-r6\:5\@lg-only
      * .crop.-r7\:3\@lg-only
      * .crop.-r11\:8\@lg-only
      * .crop.-r16\:9\@lg-only
      * .crop.-r16\:10\@lg-only
      */
    }
    @media (min-width: 75em) {
     /*
      * .crop.-r1\:1\@xl
      * .crop.-r2\:1\@xl
      * .crop.-r3\:2\@xl
      * .crop.-r4\:3\@xl
      * .crop.-r5\:3\@xl
      * .crop.-r5\:4\@xl
      * .crop.-r6\:5\@xl
      * .crop.-r7\:3\@xl
      * .crop.-r11\:8\@xl
      * .crop.-r16\:9\@xl
      * .crop.-r16\:10\@xl
      */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
     /*
      * .crop.-r1\:1\@xl-only
      * .crop.-r2\:1\@xl-only
      * .crop.-r3\:2\@xl-only
      * .crop.-r4\:3\@xl-only
      * .crop.-r5\:3\@xl-only
      * .crop.-r5\:4\@xl-only
      * .crop.-r6\:5\@xl-only
      * .crop.-r7\:3\@xl-only
      * .crop.-r11\:8\@xl-only
      * .crop.-r16\:9\@xl-only
      * .crop.-r16\:10\@xl-only
      */
    }
    @media (min-width: 100em) {
     /*
      * .crop.-r1\:1\@xxl
      * .crop.-r2\:1\@xxl
      * .crop.-r3\:2\@xxl
      * .crop.-r4\:3\@xxl
      * .crop.-r5\:3\@xxl
      * .crop.-r5\:4\@xxl
      * .crop.-r6\:5\@xxl
      * .crop.-r7\:3\@xxl
      * .crop.-r11\:8\@xxl
      * .crop.-r16\:9\@xxl
      * .crop.-r16\:10\@xxl
      */
    }
    @media (min-width: 100em) {
     /*
      * .crop.-r1\:1\@xxl-only
      * .crop.-r2\:1\@xxl-only
      * .crop.-r3\:2\@xxl-only
      * .crop.-r4\:3\@xxl-only
      * .crop.-r5\:3\@xxl-only
      * .crop.-r5\:4\@xxl-only
      * .crop.-r6\:5\@xxl-only
      * .crop.-r7\:3\@xxl-only
      * .crop.-r11\:8\@xxl-only
      * .crop.-r16\:9\@xxl-only
      * .crop.-r16\:10\@xxl-only
      */
    }

    crop()

    Helper crop entry point.
    Combine both crop-helper and crop-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.crop;
    // @include helpers.crop(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use crop-helper-with-bp() false true
    Output

    See crop-helper and crop-helper-with-bp outputs.



    display


    Variables

    All those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $displays

    Define all display values to support.

    $displays: (
        block,
        flex,
        inline,
        inline-block,
        inline-flex,
        list-item,
        none,
        table,
        table-cell,
        table-row
    !default;

    $displays-important

    Set the important property on each rules.

    $displays-important: true;

    $displays-prefix

    Define the prefix of all display classes.

    $displays-prefix: 'd-';

    Mixins

    display-helper()

    Set all display classes from the $displays variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.display-helper;
    Output
    .d-block {
        display: block !important;
    }
     
    .d-flex {
        display: flex !important;
    }
     
    .d-inline {
        display: inline !important;
    }
     
    .d-inline-block {
        display: inline-block !important;
    }
     
    .d-inline-flex {
        display: inline-flex !important;
    }
     
    .d-list-item {
      display: list-item !important;
    }
     
    .d-none {
        display: none !important;
    }
     
    .d-table {
        display: table !important;
    }
     
    .d-table-cell {
        display: table-cell !important;
    }
     
    .d-table-row {
        display: table-row !important;
    }

    display-helper-with-bp()

    Set all display classes from the $displays variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.display-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .d-block\@xs-only {
            display: block !important;
        }
     
        .d-flex\@xs-only {
            display: flex !important;
        }
     
        .d-inline\@xs-only {
            display: inline !important;
        }
     
        .d-inline-block\@xs-only {
            display: inline-block !important;
        }
     
        .d-inline-flex\@xs-only {
            display: inline-flex !important;
        }
     
        .d-list-item\@xs-only {
            display: list-item !important;
        }
     
        .d-none\@xs-only {
            display: none !important;
        }
     
        .d-table\@xs-only {
            display: table !important;
        }
     
        .d-table-cell\@xs-only {
            display: table-cell !important;
        }
     
        .d-table-row\@xs-only {
            display: table-row !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .d-block\@sm
         * .d-flex\@sm
         * .d-inline\@sm
         * .d-inline-block\@sm
         * .d-inline-flex\@sm
         * .d-list-item\@sm
         * .d-none\@sm
         * .d-table\@sm
         * .d-table-cell\@sm
         * .d-table-row\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .d-block\@sm-only
         * .d-flex\@sm-only
         * .d-inline\@sm-only
         * .d-inline-block\@sm-only
         * .d-inline-flex\@sm-only
         * .d-list-item\@sm-only
         * .d-none\@sm-only
         * .d-table\@sm-only
         * .d-table-cell\@sm-only
         * .d-table-row\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .d-block\@md
         * .d-flex\@md
         * .d-inline\@md
         * .d-inline-block\@md
         * .d-inline-flex\@md
         * .d-list-item\@md
         * .d-none\@md
         * .d-table\@md
         * .d-table-cell\@md
         * .d-table-row\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .d-block\@md-only
         * .d-flex\@md-only
         * .d-inline\@md-only
         * .d-inline-block\@md-only
         * .d-inline-flex\@md-only
         * .d-list-item\@md-only
         * .d-none\@md-only
         * .d-table\@md-only
         * .d-table-cell\@md-only
         * .d-table-row\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .d-block\@lg
         * .d-flex\@lg
         * .d-inline\@lg
         * .d-inline-block\@lg
         * .d-inline-flex\@lg
         * .d-list-item\@lg
         * .d-none\@lg
         * .d-table\@lg
         * .d-table-cell\@lg
         * .d-table-row\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .d-block\@lg-only
         * .d-flex\@lg-only
         * .d-inline\@lg-only
         * .d-inline-block\@lg-only
         * .d-inline-flex\@lg-only
         * .d-list-item\@lg-only
         * .d-none\@lg-only
         * .d-table\@lg-only
         * .d-table-cell\@lg-only
         * .d-table-row\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .d-block\@xl
         * .d-flex\@xl
         * .d-inline\@xl
         * .d-inline-block\@xl
         * .d-inline-flex\@xl
         * .d-list-item\@xl
         * .d-none\@xl
         * .d-table\@xl
         * .d-table-cell\@xl
         * .d-table-row\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .d-block\@xl-only
         * .d-flex\@xl-only
         * .d-inline\@xl-only
         * .d-inline-block\@xl-only
         * .d-inline-flex\@xl-only
         * .d-list-item\@xl-only
         * .d-none\@xl-only
         * .d-table\@xl-only
         * .d-table-cell\@xl-only
         * .d-table-row\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .d-block\@xxl
         * .d-flex\@xxl
         * .d-inline\@xxl
         * .d-inline-block\@xxl
         * .d-inline-flex\@xxl
         * .d-list-item\@xxl
         * .d-none\@xxl
         * .d-table@xxl
         * .font-weight-bolder\@xxl
         * .font-weight-bolder\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .d-block\@xxl-only
         * .d-flex\@xxl-only
         * .d-inline\@xxl-only
         * .d-inline-block\@xxl-only
         * .d-inline-flex\@xxl-only
         * .d-list-item\@xxl-only
         * .d-none\@xxl-only
         * .d-table@xxl-only
         * .font-weight-bolder\@xxl-only
         * .font-weight-bolder\@xxl-only
         */
    }

    display-print-helper()

    Set all display classes from the $displays variable with print media query.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.display-print-helper;
    Output
    @media print {
        /*
         * .d-block
         * .d-flex
         * .d-inline
         * .d-inline-block
         * .d-inline-flex
         * .d-list-item
         * .d-none
         * .d-table
         * .d-table-cell
         * .d-table-row
         */
    }

    display-screen-helper()

    Set all display classes from the $displays variable with screen media query.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.display-screen-helper;
    Output
    @media screen {
        /*
         * .d-block
         * .d-flex
         * .d-inline
         * .d-inline-block
         * .d-inline-flex
         * .d-list-item
         * .d-none
         * .d-table
         * .d-table-cell
         * .d-table-row
         */
    }

    display()

    Helper display entry point.
    Combine both display-helper and display-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.display;
    // @include helpers.display(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use display-helper-with-bp() false true
    Output

    See display-helper and display-helper-with-bp outputs.



    embed


    Mixins

    embed-helper()

    Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.embed-helper;
    Output
    .embed {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .embed.-r1\:1::before {
        padding-bottom: 100%;
    }
    .embed.-r2\:1::before {
        padding-bottom: 50%;
    }
    .embed.-r3\:2::before {
        padding-bottom: 66.6666666667%;
    }
    .embed.-r4\:3::before {
        padding-bottom: 75%;
    }
    .embed.-r5\:3::before {
        padding-bottom: 60%;
    }
    .embed.-r5\:4::before {
        padding-bottom: 80%;
    }
    .embed.-r6\:5::before {
        padding-bottom: 83.3333333333%;
    }
    .embed.-r7\:3::before {
        padding-bottom: 42.8571428571%;
    }
    .embed.-r11\:8::before {
        padding-bottom: 72.7272727273%;
    }
    .embed.-r16\:9::before {
        padding-bottom: 56.25%;
    }
    .embed.-r16\:10::before {
        padding-bottom: 62.5%;
    }
    .embed::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 100%;
    }
    .embed_content,
    .embed > iframe,
    .embed > embed,
    .embed > object,
    .embed > video,
    .embed > picture,
    .embed > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    embed-helper-with-bp()

    Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.embed-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .embed.-r1\:1\@xs-only::before {
            padding-bottom: 100%;
        }
        .embed.-r2\:1\@xs-only::before {
            padding-bottom: 50%;
        }
        .embed.-r3\:2\@xs-only::before {
            padding-bottom: 66.6666666667%;
        }
        .embed.-r4\:3\@xs-only::before {
            padding-bottom: 75%;
        }
        .embed.-r5\:3\@xs-only::before {
            padding-bottom: 60%;
        }
        .embed.-r5\:4\@xs-only::before {
            padding-bottom: 80%;
        }
        .embed.-r6\:5\@xs-only::before {
            padding-bottom: 83.3333333333%;
        }
        .embed.-r7\:3\@xs-only::before {
            padding-bottom: 42.8571428571%;
        }
        .embed.-r11\:8\@xs-only::before {
            padding-bottom: 72.7272727273%;
        }
        .embed.-r16\:9\@xs-only::before {
            padding-bottom: 56.25%;
        }
        .embed.-r16\:10\@xs-only::before {
            padding-bottom: 62.5%;
        }
    }
    @media (min-width: 36em) {
     /*
      * .embed.-r1\:1\@sm::before
      * .embed.-r2\:1\@sm::before
      * .embed.-r3\:2\@sm::before
      * .embed.-r4\:3\@sm::before
      * .embed.-r5\:3\@sm::before
      * .embed.-r5\:4\@sm::before
      * .embed.-r6\:5\@sm::before
      * .embed.-r7\:3\@sm::before
      * .embed.-r11\:8\@sm::before
      * .embed.-r16\:9\@sm::before
      * .embed.-r16\:10\@sm::before
      */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
     /*
      * .embed.-r1\:1\@sm-only::before
      * .embed.-r2\:1\@sm-only::before
      * .embed.-r3\:2\@sm-only::before
      * .embed.-r4\:3\@sm-only::before
      * .embed.-r5\:3\@sm-only::before
      * .embed.-r5\:4\@sm-only::before
      * .embed.-r6\:5\@sm-only::before
      * .embed.-r7\:3\@sm-only::before
      * .embed.-r11\:8\@sm-only::before
      * .embed.-r16\:9\@sm-only::before
      * .embed.-r16\:10\@sm-only::before
      */
    }
    @media (min-width: 48em) {
     /*
      * .embed.-r1\:1\@md::before
      * .embed.-r2\:1\@md::before
      * .embed.-r3\:2\@md::before
      * .embed.-r4\:3\@md::before
      * .embed.-r5\:3\@md::before
      * .embed.-r5\:4\@md::before
      * .embed.-r6\:5\@md::before
      * .embed.-r7\:3\@md::before
      * .embed.-r11\:8\@md::before
      * .embed.-r16\:9\@md::before
      * .embed.-r16\:10\@md::before
      */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
     /*
      * .embed.-r1\:1\@md-only::before
      * .embed.-r2\:1\@md-only::before
      * .embed.-r3\:2\@md-only::before
      * .embed.-r4\:3\@md-only::before
      * .embed.-r5\:3\@md-only::before
      * .embed.-r5\:4\@md-only::before
      * .embed.-r6\:5\@md-only::before
      * .embed.-r7\:3\@md-only::before
      * .embed.-r11\:8\@md-only::before
      * .embed.-r16\:9\@md-only::before
      * .embed.-r16\:10\@md-only::before
      */
    }
    @media (min-width: 64em) {
     /*
      * .embed.-r1\:1\@lg::before
      * .embed.-r2\:1\@lg::before
      * .embed.-r3\:2\@lg::before
      * .embed.-r4\:3\@lg::before
      * .embed.-r5\:3\@lg::before
      * .embed.-r5\:4\@lg::before
      * .embed.-r6\:5\@lg::before
      * .embed.-r7\:3\@lg::before
      * .embed.-r11\:8\@lg::before
      * .embed.-r16\:9\@lg::before
      * .embed.-r16\:10\@lg::before
      */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
     /*
      * .embed.-r1\:1\@lg-only::before
      * .embed.-r2\:1\@lg-only::before
      * .embed.-r3\:2\@lg-only::before
      * .embed.-r4\:3\@lg-only::before
      * .embed.-r5\:3\@lg-only::before
      * .embed.-r5\:4\@lg-only::before
      * .embed.-r6\:5\@lg-only::before
      * .embed.-r7\:3\@lg-only::before
      * .embed.-r11\:8\@lg-only::before
      * .embed.-r16\:9\@lg-only::before
      * .embed.-r16\:10\@lg-only::before
      */
    }
    @media (min-width: 75em) {
     /*
      * .embed.-r1\:1\@xl::before
      * .embed.-r2\:1\@xl::before
      * .embed.-r3\:2\@xl::before
      * .embed.-r4\:3\@xl::before
      * .embed.-r5\:3\@xl::before
      * .embed.-r5\:4\@xl::before
      * .embed.-r6\:5\@xl::before
      * .embed.-r7\:3\@xl::before
      * .embed.-r11\:8\@xl::before
      * .embed.-r16\:9\@xl::before
      * .embed.-r16\:10\@xl::before
      */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
     /*
      * .embed.-r1\:1\@xl-only::before
      * .embed.-r2\:1\@xl-only::before
      * .embed.-r3\:2\@xl-only::before
      * .embed.-r4\:3\@xl-only::before
      * .embed.-r5\:3\@xl-only::before
      * .embed.-r5\:4\@xl-only::before
      * .embed.-r6\:5\@xl-only::before
      * .embed.-r7\:3\@xl-only::before
      * .embed.-r11\:8\@xl-only::before
      * .embed.-r16\:9\@xl-only::before
      * .embed.-r16\:10\@xl-only::before
      */
    }
    @media (min-width: 100em) {
     /*
      * .embed.-r1\:1\@xxl::before
      * .embed.-r2\:1\@xxl::before
      * .embed.-r3\:2\@xxl::before
      * .embed.-r4\:3\@xxl::before
      * .embed.-r5\:3\@xxl::before
      * .embed.-r5\:4\@xxl::before
      * .embed.-r6\:5\@xxl::before
      * .embed.-r7\:3\@xxl::before
      * .embed.-r11\:8\@xxl::before
      * .embed.-r16\:9\@xxl::before
      * .embed.-r16\:10\@xxl::before
      */
    }
    @media (min-width: 100em) {
     /*
      * .embed.-r1\:1\@xxl-only::before
      * .embed.-r2\:1\@xxl-only::before
      * .embed.-r3\:2\@xxl-only::before
      * .embed.-r4\:3\@xxl-only::before
      * .embed.-r5\:3\@xxl-only::before
      * .embed.-r5\:4\@xxl-only::before
      * .embed.-r6\:5\@xxl-only::before
      * .embed.-r7\:3\@xxl-only::before
      * .embed.-r11\:8\@xxl-only::before
      * .embed.-r16\:9\@xxl-only::before
      * .embed.-r16\:10\@xxl-only::before
      */
    }

    embed()

    Helper embed entry point.
    Combine both embed-helper and embed-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.embed;
    // @include helpers.embed(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use embed-helper-with-bp() false true
    Output

    See embed-helper and embed-helper-with-bp outputs.



    flexbox


    Variables

    All those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $flexboxes

    Define all flexbox values to support.

    $flexboxes: (
        'flex-direction': (
            row,
            row-reverse,
            column,
            column-reverse
        ),
        'flex-wrap': (
            wrap,
            nowrap,
            wrap-reverse
        ),
        'justify-content': (
            flex-start,
            flex-end,
            center,
            space-between,
            space-around
        ),
        'align-content': (
            flex-start,
            flex-end,
            center,
            space-between,
            space-around,
            stretch
        ),
        'align-items': (
            flex-start,
            flex-end,
            center,
            baseline,
            stretch
        ),
        'align-self': (
            flex-start,
            flex-end,
            center,
            baseline,
            stretch
        )
    !default;

    $flexboxes-properties-class-override

    Flexbox properties list for override class name.

    $flexboxes-properties-class-override: (
        // 'flex-direction''',
        // 'flex-wrap''',
        // 'justify-content''',
        // 'align-content''',
        // 'align-items''',
        // 'align-self'''
    !default;

    If you want to custom flexbox properties class name, just uncomment and set the value.
    For example, set flex-direction as flex-d will render:

    .flex-d-row {
      flex-direction: row !important;
    }

    $flexboxes-values-class-override

    Flexbox values list for override class name.

    $flexboxes-values-class-override: (
        // 'row''',
        // 'row-reverse''',
        // 'column''',
        // 'column-reverse''',
        // 'wrap''',
        // 'nowrap''',
        // 'wrap-reverse''',
        'flex-start''start',
        'flex-end''end',
        // 'center''',
        // 'space-between''',
        // 'space-around''',
        // 'stretch''',
        // 'baseline'''
    !default;

    If you want to custom flexbox values class name, just uncomment and set the value.
    By default, flex-start is set as start. Which will render:

    .justify-content-start {
        justify-content: flex-start !important;
    }
     
    /*
     * and not anymore
     *
     * .justify-content-flex-start { ... }
     *
     */

    $flexboxes-factors

    Flexbox factor properties to loop.

    Note that the properties need to support only numeric value !

    $flexboxes-factors: (
        'flex-grow',
        'flex-shrink',
        'order'
    !default;

    $flexboxes-factors-max-loop

    Flexbox factor max loop.

    $flexboxes-factors-max-loop: 12 !default;

    $flexboxes-important

    Set the important property on each rules.

    $flexboxes-important: true;

    Mixins

    flexbox-helper()

    Set all flexbox classes from the $flexboxes variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.flexbox-helper;
    Output
    .flex-direction-row {
        flex-direction: row !important;
    }
     
    .flex-direction-row-reverse {
        flex-direction: row-reverse !important;
    }
     
    .flex-direction-column {
        flex-direction: column !important;
    }
     
    .flex-direction-column-reverse {
        flex-direction: column-reverse !important;
    }
     
    .flex-wrap-wrap {
        flex-wrap: wrap !important;
    }
     
    .flex-wrap-nowrap {
        flex-wrap: nowrap !important;
    }
     
    .flex-wrap-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }
     
    .justify-content-start {
        justify-content: flex-start !important;
    }
     
    .justify-content-end {
        justify-content: flex-end !important;
    }
     
    .justify-content-center {
        justify-content: center !important;
    }
     
    .justify-content-space-between {
        justify-content: space-between !important;
    }
     
    .justify-content-space-around {
        justify-content: space-around !important;
    }
     
    .align-content-start {
        align-content: flex-start !important;
    }
     
    .align-content-end {
        align-content: flex-end !important;
    }
     
    .align-content-center {
        align-content: center !important;
    }
     
    .align-content-space-between {
        align-content: space-between !important;
    }
     
    .align-content-space-around {
        align-content: space-around !important;
    }
     
    .align-content-stretch {
        align-content: stretch !important;
    }
     
    .align-items-start {
        align-items: flex-start !important;
    }
     
    .align-items-end {
        align-items: flex-end !important;
    }
     
    .align-items-center {
        align-items: center !important;
    }
     
    .align-items-baseline {
        align-items: baseline !important;
    }
     
    .align-items-stretch {
        align-items: stretch !important;
    }
     
    .align-self-start {
        align-self: flex-start !important;
    }
     
    .align-self-end {
        align-self: flex-end !important;
    }
     
    .align-self-center {
        align-self: center !important;
    }
     
    .align-self-baseline {
        align-self: baseline !important;
    }
     
    .align-self-stretch {
        align-self: stretch !important;
    }

    flexbox-helper-with-bp()

    Set all flexbox classes from the $flexboxes variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.flexbox-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .flex-direction-row\@xs-only {
            flex-direction: row !important;
        }
     
        .flex-direction-row-reverse\@xs-only {
            flex-direction: row-reverse !important;
        }
     
        .flex-direction-column\@xs-only {
            flex-direction: column !important;
        }
     
        .flex-direction-column-reverse\@xs-only {
            flex-direction: column-reverse !important;
        }
     
        .flex-wrap-wrap\@xs-only {
            flex-wrap: wrap !important;
        }
     
        .flex-wrap-nowrap\@xs-only {
            flex-wrap: nowrap !important;
        }
     
        .flex-wrap-wrap-reverse\@xs-only {
            flex-wrap: wrap-reverse !important;
        }
     
        .justify-content-start\@xs-only {
            justify-content: flex-start !important;
        }
     
        .justify-content-end\@xs-only {
            justify-content: flex-end !important;
        }
     
        .justify-content-center\@xs-only {
            justify-content: center !important;
        }
     
        .justify-content-space-between\@xs-only {
            justify-content: space-between !important;
        }
     
        .justify-content-space-around\@xs-only {
            justify-content: space-around !important;
        }
     
        .align-content-start\@xs-only {
            align-content: flex-start !important;
        }
     
        .align-content-end\@xs-only {
            align-content: flex-end !important;
        }
     
        .align-content-center\@xs-only {
            align-content: center !important;
        }
     
        .align-content-space-between\@xs-only {
            align-content: space-between !important;
        }
     
        .align-content-space-around\@xs-only {
            align-content: space-around !important;
        }
     
        .align-content-stretch\@xs-only {
            align-content: stretch !important;
        }
     
        .align-items-start\@xs-only {
            align-items: flex-start !important;
        }
     
        .align-items-end\@xs-only {
            align-items: flex-end !important;
        }
     
        .align-items-center\@xs-only {
            align-items: center !important;
        }
     
        .align-items-baseline\@xs-only {
            align-items: baseline !important;
        }
     
        .align-items-stretch\@xs-only {
            align-items: stretch !important;
        }
     
        .align-self-start\@xs-only {
            align-self: flex-start !important;
        }
     
        .align-self-end\@xs-only {
            align-self: flex-end !important;
        }
     
        .align-self-center\@xs-only {
            align-self: center !important;
        }
     
        .align-self-baseline\@xs-only {
            align-self: baseline !important;
        }
     
        .align-self-stretch\@xs-only {
            align-self: stretch !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .flex-direction-row\@sm
         * .flex-direction-row-reverse\@sm
         * .flex-direction-column\@sm
         * .flex-direction-column-reverse\@sm
         * .flex-wrap-wrap\@sm
         * .flex-wrap-nowrap\@sm
         * .flex-wrap-wrap-reverse\@sm
         * .justify-content-start\@sm
         * .justify-content-end\@sm
         * .justify-content-center\@sm
         * .justify-content-space-between\@sm
         * .justify-content-space-around\@sm
         * .align-content-start\@sm
         * .align-content-end\@sm
         * .align-content-center\@sm
         * .align-content-space-between\@sm
         * .align-content-space-around\@sm
         * .align-content-stretch\@sm
         * .align-items-start\@sm
         * .align-items-end\@sm
         * .align-items-center\@sm
         * .align-items-baseline\@sm
         * .align-items-stretch\@sm
         * .align-self-start\@sm
         * .align-self-end\@sm
         * .align-self-center\@sm
         * .align-self-baseline\@sm
         * .align-self-stretch\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .flex-direction-row\@sm-only
         * .flex-direction-row-reverse\@sm-only
         * .flex-direction-column\@sm-only
         * .flex-direction-column-reverse\@sm-only
         * .flex-wrap-wrap\@sm-only
         * .flex-wrap-nowrap\@sm-only
         * .flex-wrap-wrap-reverse\@sm-only
         * .justify-content-start\@sm-only
         * .justify-content-end\@sm-only
         * .justify-content-center\@sm-only
         * .justify-content-space-between\@sm-only
         * .justify-content-space-around\@sm-only
         * .align-content-start\@sm-only
         * .align-content-end\@sm-only
         * .align-content-center\@sm-only
         * .align-content-space-between\@sm-only
         * .align-content-space-around\@sm-only
         * .align-content-stretch\@sm-only
         * .align-items-start\@sm-only
         * .align-items-end\@sm-only
         * .align-items-center\@sm-only
         * .align-items-baseline\@sm-only
         * .align-items-stretch\@sm-only
         * .align-self-start\@sm-only
         * .align-self-end\@sm-only
         * .align-self-center\@sm-only
         * .align-self-baseline\@sm-only
         * .align-self-stretch\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .flex-direction-row\@md
         * .flex-direction-row-reverse\@md
         * .flex-direction-column\@md
         * .flex-direction-column-reverse\@md
         * .flex-wrap-wrap\@md
         * .flex-wrap-nowrap\@md
         * .flex-wrap-wrap-reverse\@md
         * .justify-content-start\@md
         * .justify-content-end\@md
         * .justify-content-center\@md
         * .justify-content-space-between\@md
         * .justify-content-space-around\@md
         * .align-content-start\@md
         * .align-content-end\@md
         * .align-content-center\@md
         * .align-content-space-between\@md
         * .align-content-space-around\@md
         * .align-content-stretch\@md
         * .align-items-start\@md
         * .align-items-end\@md
         * .align-items-center\@md
         * .align-items-baseline\@md
         * .align-items-stretch\@md
         * .align-self-start\@md
         * .align-self-end\@md
         * .align-self-center\@md
         * .align-self-baseline\@md
         * .align-self-stretch\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .flex-direction-row\@md-only
         * .flex-direction-row-reverse\@md-only
         * .flex-direction-column\@md-only
         * .flex-direction-column-reverse\@md-only
         * .flex-wrap-wrap\@md-only
         * .flex-wrap-nowrap\@md-only
         * .flex-wrap-wrap-reverse\@md-only
         * .justify-content-start\@md-only
         * .justify-content-end\@md-only
         * .justify-content-center\@md-only
         * .justify-content-space-between\@md-only
         * .justify-content-space-around\@md-only
         * .align-content-start\@md-only
         * .align-content-end\@md-only
         * .align-content-center\@md-only
         * .align-content-space-between\@md-only
         * .align-content-space-around\@md-only
         * .align-content-stretch\@md-only
         * .align-items-start\@md-only
         * .align-items-end\@md-only
         * .align-items-center\@md-only
         * .align-items-baseline\@md-only
         * .align-items-stretch\@md-only
         * .align-self-start\@md-only
         * .align-self-end\@md-only
         * .align-self-center\@md-only
         * .align-self-baseline\@md-only
         * .align-self-stretch\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .flex-direction-row\@lg
         * .flex-direction-row-reverse\@lg
         * .flex-direction-column\@lg
         * .flex-direction-column-reverse\@lg
         * .flex-wrap-wrap\@lg
         * .flex-wrap-nowrap\@lg
         * .flex-wrap-wrap-reverse\@lg
         * .justify-content-start\@lg
         * .justify-content-end\@lg
         * .justify-content-center\@lg
         * .justify-content-space-between\@lg
         * .justify-content-space-around\@lg
         * .align-content-start\@lg
         * .align-content-end\@lg
         * .align-content-center\@lg
         * .align-content-space-between\@lg
         * .align-content-space-around\@lg
         * .align-content-stretch\@lg
         * .align-items-start\@lg
         * .align-items-end\@lg
         * .align-items-center\@lg
         * .align-items-baseline\@lg
         * .align-items-stretch\@lg
         * .align-self-start\@lg
         * .align-self-end\@lg
         * .align-self-center\@lg
         * .align-self-baseline\@lg
         * .align-self-stretch\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .flex-direction-row\@lg-only
         * .flex-direction-row-reverse\@lg-only
         * .flex-direction-column\@lg-only
         * .flex-direction-column-reverse\@lg-only
         * .flex-wrap-wrap\@lg-only
         * .flex-wrap-nowrap\@lg-only
         * .flex-wrap-wrap-reverse\@lg-only
         * .justify-content-start\@lg-only
         * .justify-content-end\@lg-only
         * .justify-content-center\@lg-only
         * .justify-content-space-between\@lg-only
         * .justify-content-space-around\@lg-only
         * .align-content-start\@lg-only
         * .align-content-end\@lg-only
         * .align-content-center\@lg-only
         * .align-content-space-between\@lg-only
         * .align-content-space-around\@lg-only
         * .align-content-stretch\@lg-only
         * .align-items-start\@lg-only
         * .align-items-end\@lg-only
         * .align-items-center\@lg-only
         * .align-items-baseline\@lg-only
         * .align-items-stretch\@lg-only
         * .align-self-start\@lg-only
         * .align-self-end\@lg-only
         * .align-self-center\@lg-only
         * .align-self-baseline\@lg-only
         * .align-self-stretch\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .flex-direction-row\@xl
         * .flex-direction-row-reverse\@xl
         * .flex-direction-column\@xl
         * .flex-direction-column-reverse\@xl
         * .flex-wrap-wrap\@xl
         * .flex-wrap-nowrap\@xl
         * .flex-wrap-wrap-reverse\@xl
         * .justify-content-start\@xl
         * .justify-content-end\@xl
         * .justify-content-center\@xl
         * .justify-content-space-between\@xl
         * .justify-content-space-around\@xl
         * .align-content-start\@xl
         * .align-content-end\@xl
         * .align-content-center\@xl
         * .align-content-space-between\@xl
         * .align-content-space-around\@xl
         * .align-content-stretch\@xl
         * .align-items-start\@xl
         * .align-items-end\@xl
         * .align-items-center\@xl
         * .align-items-baseline\@xl
         * .align-items-stretch\@xl
         * .align-self-start\@xl
         * .align-self-end\@xl
         * .align-self-center\@xl
         * .align-self-baseline\@xl
         * .align-self-stretch\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .flex-direction-row\@xl-only
         * .flex-direction-row-reverse\@xl-only
         * .flex-direction-column\@xl-only
         * .flex-direction-column-reverse\@xl-only
         * .flex-wrap-wrap\@xl-only
         * .flex-wrap-nowrap\@xl-only
         * .flex-wrap-wrap-reverse\@xl-only
         * .justify-content-start\@xl-only
         * .justify-content-end\@xl-only
         * .justify-content-center\@xl-only
         * .justify-content-space-between\@xl-only
         * .justify-content-space-around\@xl-only
         * .align-content-start\@xl-only
         * .align-content-end\@xl-only
         * .align-content-center\@xl-only
         * .align-content-space-between\@xl-only
         * .align-content-space-around\@xl-only
         * .align-content-stretch\@xl-only
         * .align-items-start\@xl-only
         * .align-items-end\@xl-only
         * .align-items-center\@xl-only
         * .align-items-baseline\@xl-only
         * .align-items-stretch\@xl-only
         * .align-self-start\@xl-only
         * .align-self-end\@xl-only
         * .align-self-center\@xl-only
         * .align-self-baseline\@xl-only
         * .align-self-stretch\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .flex-direction-row\@xxl
         * .flex-direction-row-reverse\@xxl
         * .flex-direction-column\@xxl
         * .flex-direction-column-reverse\@xxl
         * .flex-wrap-wrap\@xxl
         * .flex-wrap-nowrap\@xxl
         * .flex-wrap-wrap-reverse\@xxl
         * .justify-content-start\@xxl
         * .justify-content-end\@xxl
         * .justify-content-center\@xxl
         * .justify-content-space-between\@xxl
         * .justify-content-space-around\@xxl
         * .align-content-start\@xxl
         * .align-content-end\@xxl
         * .align-content-center\@xxl
         * .align-content-space-between\@xxl
         * .align-content-space-around\@xxl
         * .align-content-stretch\@xxl
         * .align-items-start\@xxl
         * .align-items-end\@xxl
         * .align-items-center\@xxl
         * .align-items-baseline\@xxl
         * .align-items-stretch\@xxl
         * .align-self-start\@xxl
         * .align-self-end\@xxl
         * .align-self-center\@xxl
         * .align-self-baseline\@xxl
         * .align-self-stretch\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .flex-direction-row\@xxl-only
         * .flex-direction-row-reverse\@xxl-only
         * .flex-direction-column\@xxl-only
         * .flex-direction-column-reverse\@xxl-only
         * .flex-wrap-wrap\@xxl-only
         * .flex-wrap-nowrap\@xxl-only
         * .flex-wrap-wrap-reverse\@xxl-only
         * .justify-content-start\@xxl-only
         * .justify-content-end\@xxl-only
         * .justify-content-center\@xxl-only
         * .justify-content-space-between\@xxl-only
         * .justify-content-space-around\@xxl-only
         * .align-content-start\@xxl-only
         * .align-content-end\@xxl-only
         * .align-content-center\@xxl-only
         * .align-content-space-between\@xxl-only
         * .align-content-space-around\@xxl-only
         * .align-content-stretch\@xxl-only
         * .align-items-start\@xxl-only
         * .align-items-end\@xxl-only
         * .align-items-center\@xxl-only
         * .align-items-baseline\@xxl-only
         * .align-items-stretch\@xxl-only
         * .align-self-start\@xxl-only
         * .align-self-end\@xxl-only
         * .align-self-center\@xxl-only
         * .align-self-baseline\@xxl-only
         * .align-self-stretch\@xxl-only
         */
    }

    flexbox-factor-helper()

    Loop with $flexboxes-factors-max-loop variable to set all flexbox factor classes from the $flexboxes-factors variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.flexbox-factor-helper;
    Output
    .flex-grow-0 {
        flex-grow: 0 !important;
    }
    .flex-grow-1 {
        flex-grow: 1 !important;
    }
    /*
     * and so on until the value set to `$flexboxes-factors-max-loop`
     */
     
    .flex-shrink-0 {
        flex-shrink: 0 !important;
    }
    .flex-shrink-1 {
        flex-shrink: 1 !important;
    }
    /*
     * and so on until the value set to `$flexboxes-factors-max-loop`
     */
     
    .order-0 {
        order: 0 !important;
    }
    .order-1 {
        order: 1 !important;
    }
    /*
     * and so on until the value set to `$flexboxes-factors-max-loop`
     */

    flexbox-factor-helper-with-bp()

    Loop with $flexboxes-factors-max-loop variable to set all flexbox factor classes from the $flexboxes-factors variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.flexbox-factor-helper;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .flex-grow-0\@xs-only {
            flex-grow: 0 !important;
        }
        .flex-grow-1\@xs-only {
            flex-grow: 1 !important;
        }
        /*
        * and so on until the value set to `$flexboxes-factors-max-loop`
        */
     
        .flex-shrink-0\@xs-only {
            flex-shrink: 0 !important;
        }
        .flex-shrink-1\@xs-only {
            flex-shrink: 1 !important;
        }
        /*
        * and so on until the value set to `$flexboxes-factors-max-loop`
        */
     
        .order-0\@xs-only {
            order: 0 !important;
        }
        .order-1\@xs-only {
            order: 1 !important;
        }
        /*
        * and so on until the value set to `$flexboxes-factors-max-loop`
        */
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .flex-grow-0\@sm
         * .flex-grow-1\@sm
         * ...
         * .flex-shrink-0\@sm
         * .flex-shrink-1\@sm
         * ...
         * .order-0\@sm
         * .order-1\@sm
         * ...
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .flex-grow-0\@sm-only
         * .flex-grow-1\@sm-only
         * ...
         * .flex-shrink-0\@sm-only
         * .flex-shrink-1\@sm-only
         * ...
         * .order-0\@sm-only
         * .order-1\@sm-only
         * ...
         */
    }
    @media (min-width: 48em) {
        /*
         * .flex-grow-0\@md
         * .flex-grow-1\@md
         * ...
         * .flex-shrink-0\@md
         * .flex-shrink-1\@md
         * ...
         * .order-0\@md
         * .order-1\@md
         * ...
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .flex-grow-0\@md-only
         * .flex-grow-1\@md-only
         * ...
         * .flex-shrink-0\@md-only
         * .flex-shrink-1\@md-only
         * ...
         * .order-0\@md-only
         * .order-1\@md-only
         * ...
         */
    }
    @media (min-width: 64em) {
        /*
         * .flex-grow-0\@lg
         * .flex-grow-1\@lg
         * ...
         * .flex-shrink-0\@lg
         * .flex-shrink-1\@lg
         * ...
         * .order-0\@lg
         * .order-1\@lg
         * ...
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .flex-grow-0\@lg-only
         * .flex-grow-1\@lg-only
         * ...
         * .flex-shrink-0\@lg-only
         * .flex-shrink-1\@lg-only
         * ...
         * .order-0\@lg-only
         * .order-1\@lg-only
         * ...
         */
    }
    @media (min-width: 75em) {
        /*
         * .flex-grow-0\@xl
         * .flex-grow-1\@xl
         * ...
         * .flex-shrink-0\@xl
         * .flex-shrink-1\@xl
         * ...
         * .order-0\@xl
         * .order-1\@xl
         * ...
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .flex-grow-0\@xl-only
         * .flex-grow-1\@xl-only
         * ...
         * .flex-shrink-0\@xl-only
         * .flex-shrink-1\@xl-only
         * ...
         * .order-0\@xl-only
         * .order-1\@xl-only
         * ...
         */
    }
    @media (min-width: 100em) {
        /*
         * .flex-grow-0\@xxl
         * .flex-grow-1\@xxl
         * ...
         * .flex-shrink-0\@xxl
         * .flex-shrink-1\@xxl
         * ...
         * .order-0\@xxl
         * .order-1\@xxl
         * ...
         */
    }
    @media (min-width: 100em) {
        /*
         * .flex-grow-0\@xxl-only
         * .flex-grow-1\@xxl-only
         * ...
         * .flex-shrink-0\@xxl-only
         * .flex-shrink-1\@xxl-only
         * ...
         * .order-0\@xxl-only
         * .order-1\@xxl-only
         * ...
         */
    }

    flexbox()

    Helper flexbox entry point.
    Combine flexbox-helper, flexbox-helper-with-bp, flexbox-factor and flexbox-factor-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.flexbox;
    // @include helpers.flexbox(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use flexbox-helper-with-bp() false true
    Output

    See flexbox-helper, flexbox-helper-with-bp, flexbox-factor and flexbox-factor-with-bp outputs.



    float


    Variables

    This variable could be customized depending on what you need in your variables.scss file.
    Here is the default value.

    $floats

    Define all float values to support.

    $floats: (
        right,
        left,
        none
    !default;

    Mixins

    float-helper()

    Set all float classes from the $floats variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.float-helper;
    Output
    .float-right {
        float: right !important;
    }
     
    .float-left {
        float: left !important;
    }
     
    .float-none {
        float: none !important;
    }

    float-helper-with-bp()

    Set all float classes from the $floats variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.float-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .float-right\@xs-only {
            float: right !important;
        }
     
        .float-left\@xs-only {
            float: left !important;
        }
     
        .float-none\@xs-only {
            float: none !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .float-right\@sm
         * .float-left\@sm
         * .float-none\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .float-right\@sm-only
         * .float-left\@sm-only
         * .float-none\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .float-right\@md
         * .float-left\@md
         * .float-none\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .float-right\@md-only
         * .float-left\@md-only
         * .float-none\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .float-right\@lg
         * .float-left\@lg
         * .float-none\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .float-right\@lg-only
         * .float-left\@lg-only
         * .float-none\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .float-right\@xl
         * .float-left\@xl
         * .float-none\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .float-right\@xl-only
         * .float-left\@xl-only
         * .float-none\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .float-right\@xxl
         * .float-left\@xxl
         * .float-none\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .float-right\@xxl-only
         * .float-left\@xxl-only
         * .float-none\@xxl-only
         */
    }

    float()

    Helper float entry point.
    Combine both float-helper and float-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.float;
    // @include helpers.float(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use float-helper-with-bp() false true
    Output

    See float-helper() and float-helper-with-bp() outputs.



    font


    Variables

    Those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $fonts-style

    Define all font-style values to support.

    $fonts-style: (
        italic'italic'
    !default;

    $fonts-weight

    Define all font-weight values to support.

    $fonts-weight: (
        lighter: 100,
        light: 200,
        normal: 300,
        bold: 600,
        bolder: 800
    !default;

    $fonts-important

    Set the important property on each rules.

    $fonts-important: true;

    Mixins

    font-style-helper()

    Set all font style classes from the $fonts-style variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.font-style-helper;
    Output
    .font-weight-italic {
        font-style: "italic" !important;
    }

    font-weight-helper()

    Set all font weight classes from the $fonts-weight variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.font-weight-helper;
    Output
    .font-weight-lighter {
        font-weight: 100 !important;
    }
     
    .font-weight-light {
        font-weight: 200 !important;
    }
     
    .font-weight-normal {
        font-weight: 300 !important;
    }
     
    .font-weight-bold {
        font-weight: 600 !important;
    }
     
    .font-weight-bolder {
        font-weight: 800 !important;
    }

    font-helper-with-bp()

    Set all font style classes from the $fonts-style variable and all font weight classes from the $fonts-weight variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.font-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .font-weight-italic\@xs-only {
            font-style: "italic" !important;
        }
     
        .font-weight-lighter\@xs-only {
            font-weight: 100 !important;
        }
     
        .font-weight-light\@xs-only {
            font-weight: 200 !important;
        }
     
        .font-weight-normal\@xs-only {
            font-weight: 300 !important;
        }
     
        .font-weight-bold\@xs-only {
            font-weight: 600 !important;
        }
     
        .font-weight-bolder\@xs-only {
            font-weight: 800 !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .font-weight-italic\@sm
         * .font-weight-lighter\@sm
         * .font-weight-light\@sm
         * .font-weight-normal\@sm
         * .font-weight-bold\@sm
         * .font-weight-bolder\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .font-weight-italic\@sm-only
         * .font-weight-lighter\@sm-only
         * .font-weight-light\@sm-only
         * .font-weight-light\@sm-only
         * .font-weight-bold\@sm-only
         * .font-weight-bolder\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .font-weight-italic\@md
         * .font-weight-lighter\@md
         * .font-weight-light\@md
         * .font-weight-normal\@md
         * .font-weight-bold\@md
         * .font-weight-bolder\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .font-weight-italic\@md-only
         * .font-weight-lighter\@md-only
         * .font-weight-light\@md-only
         * .font-weight-light\@md-only
         * .font-weight-bold\@md-only
         * .font-weight-bolder\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .font-weight-italic\@lg
         * .font-weight-lighter\@lg
         * .font-weight-light\@lg
         * .font-weight-normal\@lg
         * .font-weight-bold\@lg
         * .font-weight-bolder\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .font-weight-italic\@lg-only
         * .font-weight-lighter\@lg-only
         * .font-weight-light\@lg-only
         * .font-weight-light\@lg-only
         * .font-weight-bold\@lg-only
         * .font-weight-bolder\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .font-weight-italic\@xl
         * .font-weight-lighter\@xl
         * .font-weight-light\@xl
         * .font-weight-normal\@xl
         * .font-weight-bold\@xl
         * .font-weight-bolder\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .font-weight-italic\@xl-only
         * .font-weight-lighter\@xl-only
         * .font-weight-light\@xl-only
         * .font-weight-light\@xl-only
         * .font-weight-bold\@xl-only
         * .font-weight-bolder\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .font-weight-italic\@xxl
         * .font-weight-lighter\@xxl
         * .font-weight-light\@xxl
         * .font-weight-normal\@xxl
         * .font-weight-bold\@xxl
         * .font-weight-bolder\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .font-weight-italic\@xxl-only
         * .font-weight-lighter\@xxl-only
         * .font-weight-light\@xxl-only
         * .font-weight-light\@xxl-only
         * .font-weight-bold\@xxl-only
         * .font-weight-bolder\@xxl-only
         */
    }

    font()

    Helper font entry point.
    Combine font-style-helper, font-weight-helper and font-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.font;
    // @include helpers.font(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use font-helper-with-bp() false true
    Output

    See font-style-helper, font-weight-helper and font-helper-with-bp outputs.



    overflow


    Variables

    This variable could be customized depending on what you need in your variables.scss file.
    Here is the default value.

    $overflows

    Define all position values to support.

    $overflows: (
        auto,
        hidden
    !default;

    Mixins

    overflow-helper()

    Set all float classes from the $overflows variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.overflow-helper;
    Output
    .overflow-auto {
        overflow: auto !important;
    }
     
    .overflow-hidden {
        overflow: hidden !important;
    }

    overflow-helper-with-bp()

    Set all float classes from the $overflows variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.overflow-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .overflow-auto\@xs-only {
            overflow: auto !important;
        }
     
        .overflow-hidden\@xs-only {
            overflow: hidden !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .overflow-auto\@sm
         * .overflow-hidden\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .overflow-auto\@sm-only
         * .overflow-hidden\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .overflow-auto\@md
         * .overflow-hidden\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .overflow-auto\@md-only
         * .overflow-hidden\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .overflow-auto\@lg
         * .overflow-hidden\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .overflow-auto\@lg-only
         * .overflow-hidden\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .overflow-auto\@xl
         * .overflow-hidden\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .overflow-auto\@xl-only
         * .overflow-hidden\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .overflow-auto\@xxl
         * .overflow-hidden\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .overflow-auto\@xxl-only
         * .overflow-hidden\@xxl-only
         */
    }

    overflow()

    Helper overflow entry point.
    Combine both overflow-helper and overflow-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.overflow;
    // @include helpers.overflow(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use overflow-helper-with-bp() false true
    Output

    See overflow-helper() and overflow-helper-with-bp() outputs.



    position


    Variables

    This variable could be customized depending on what you need in your variables.scss file.
    Here is the default value.

    $positions

    Define all position values to support.

    $positions: (
        absolute,
        fixed,
        initial,
        inherit,
        relative,
        static
    !default;

    Mixins

    position-helper()

    Set all position classes from the $positions variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.position-helper;
    Output
    .position-absolute {
        position: absolute !important;
    }
     
    .position-fixed {
        position: fixed !important;
    }
     
    .position-initial {
        position: initial !important;
    }
     
    .position-inherit {
        position: inherit !important;
    }
     
    .position-relative {
        position: relative !important;
    }
     
    .position-static {
        position: static !important;
    }
     
    .fixed-top,
    .fixed-bottom {
        left: 0;
        position: fixed;
        right: 0;
    }
    .fixed-top {
        top: 0;
    }
    .fixed-bottom {
        bottom: 0;
    }

    position-helper-with-bp()

    Set all position classes from the $positions variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.position-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .position-absolute\@xs-only {
            position: absolute !important;
        }
     
        .position-fixed\@xs-only {
            position: fixed !important;
        }
     
        .position-initial\@xs-only {
            position: initial !important;
        }
     
        .position-inherit\@xs-only {
            position: inherit !important;
        }
     
        .position-relative\@xs-only {
            position: relative !important;
        }
     
        .position-static\@xs-only {
            position: static !important;
        }
     
        .fixed-top\@xs-only,
        .fixed-bottom\@xs-only {
            left: 0;
            position: fixed;
            right: 0;
        }
        .fixed-top\@xs-only {
            top: 0;
        }
        .fixed-bottom\@xs-only {
            bottom: 0;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .position-absolute\@sm
         * .position-fixed\@sm
         * .position-initial\@sm
         * .position-inherit\@sm
         * .position-relative\@sm
         * .position-static\@sm
         * .fixed-top\@sm
         * .fixed-bottom\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .position-absolute\@sm-only
         * .position-fixed\@sm-only
         * .position-initial\@sm-only
         * .position-inherit\@sm-only
         * .position-relative\@sm-only
         * .position-static\@sm-only
         * .fixed-top\@sm-only
         * .fixed-bottom\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .position-absolute\@md
         * .position-fixed\@md
         * .position-initial\@md
         * .position-inherit\@md
         * .position-relative\@md
         * .position-static\@md
         * .fixed-top\@md
         * .fixed-bottom\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .position-absolute\@md-only
         * .position-fixed\@md-only
         * .position-initial\@md-only
         * .position-inherit\@md-only
         * .position-relative\@md-only
         * .position-static\@md-only
         * .fixed-top\@md-only
         * .fixed-bottom\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .position-absolute\@lg
         * .position-fixed\@lg
         * .position-initial\@lg
         * .position-inherit\@lg
         * .position-relative\@lg
         * .position-static\@lg
         * .fixed-top\@lg
         * .fixed-bottom\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .position-absolute\@lg-only
         * .position-fixed\@lg-only
         * .position-initial\@lg-only
         * .position-inherit\@lg-only
         * .position-relative\@lg-only
         * .position-static\@lg-only
         * .fixed-top\@lg-only
         * .fixed-bottom\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .position-absolute\@xl
         * .position-fixed\@xl
         * .position-initial\@xl
         * .position-inherit\@xl
         * .position-relative\@xl
         * .position-static\@xl
         * .fixed-top\@xl
         * .fixed-bottom\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .position-absolute\@xl-only
         * .position-fixed\@xl-only
         * .position-initial\@xl-only
         * .position-inherit\@xl-only
         * .position-relative\@xl-only
         * .position-static\@xl-only
         * .fixed-top\@xl-only
         * .fixed-bottom\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .position-absolute\@xxl
         * .position-fixed\@xxl
         * .position-initial\@xxl
         * .position-inherit\@xxl
         * .position-relative\@xxl
         * .position-static\@xxl
         * .fixed-top\@xxl
         * .fixed-bottom\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .position-absolute\@xxl-only
         * .position-fixed\@xxl-only
         * .position-initial\@xxl-only
         * .position-inherit\@xxl-only
         * .position-relative\@xxl-only
         * .position-static\@xxl-only
         * .fixed-top\@xxl-only
         * .fixed-bottom\@xxl-only
         */
    }

    position()

    Helper position entry point.
    Combine both position-helper and position-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.position;
    Parameters
    Type Description Mandatory Default
    Boolean Use position-helper-with-bp() false true
    Output

    See position-helper() and position-helper-with-bp() outputs.



    stretched-link


    Variables

    This variable could be customized depending on what you need in your variables.scss file.
    Here is the default value.

    $zindex-stretched

    Define the z-index value for the link.

    $zindex-stretched: 1 !default;

    Mixins

    stretched-link-helper()

    Set stretched-link classes.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.stretched-link-helper;
    Output
    .stretched-link::after {
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: auto;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }
     
    .stretched-link-b::before {
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: auto;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }

    stretched-link-helper-with-bp()

    Set stretched-link classes with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.stretched-link-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .stretched-link\@xs-only::after {
            bottom: 0;
            content: "";
            left: 0;
            pointer-events: auto;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }
     
        .stretched-link-b\@xs-only::before {
            bottom: 0;
            content: "";
            left: 0;
            pointer-events: auto;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .stretched-link\@sm
         * .stretched-link-b\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .stretched-link\@sm-only
         * .stretched-link-b\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .stretched-link\@md
         * .stretched-link-b\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .stretched-link\@md-only
         * .stretched-link-b\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .stretched-link\@lg
         * .stretched-link-b\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .stretched-link\@lg-only
         * .stretched-link-b\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .stretched-link\@xl
         * .stretched-link-b\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .stretched-link\@xl-only
         * .stretched-link-b\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .stretched-link\@xxl
         * .stretched-link-b\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .stretched-link\@xxl-only
         * .stretched-link-b\@xxl-only
         */
    }

    stretched-link()

    Helper stretched-link entry point.
    Combine both stretched-link-helper and stretched-link-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.stretched-link;
    // @include helpers.stretched-link(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use of stretched-link-helper-with-bp() false true
    Output

    See stretched-link-helper() and stretched-link-helper-with-bp() outputs.



    text


    Variables

    All those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $text-aligns

    Define all text align values to support.

    $text-aligns: (
        center,
        justify,
        left,
        right
    !default;

    $text-transforms

    Define all text transform values to support.

    $text-transforms: (
        capitalize,
        lowercase,
        uppercase
    !default;

    $text-important

    Set the important property on each rules.

    $text-important: true;

    Mixins

    text-aligns-helper()

    Set all text-align classes from the $text-aligns variable.

    @use '@wide/styles-helpers' as helpers;
     
    /*
     * $text-aligns variable defined in `variables.scss`
     */
    $text-aligns: (
        center,
        justify,
        left,
        right
    !default;
    /* */
     
    @include helpers.text-aligns-helper;
    Output
    .text-center {
        text-align: center !important;
    }
     
    .text-justify {
        text-align: justify !important;
    }
     
    .text-left {
        text-align: left !important;
    }
     
    .text-right {
        text-align: right !important;
    }

    text-transforms-helper()

    Set all text-transform classes from the $text-transforms variable.

    @use '@wide/styles-helpers' as helpers;
     
    /*
     * $text-transforms variable defined in `variables.scss`
     */
    $text-transforms: (
        capitalize,
        lowercase,
        uppercase
    !default;
    /* */
     
    @include helpers.text-transforms-helper;
    Output
    .text-capitalize {
        text-transform: capitalize !important;
    }
     
    .text-lowercase {
        text-transform: lowercase !important;
    }
     
    .text-uppercase {
        text-transform: uppercase !important;
    }

    text-miscs-helper()

    Set text-miscs classes.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.text-miscs-helper;
    Output
    .text-decoration-none {
        text-decoration: none !important;
    }
    .text-break {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    .text-truncate {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .text-wrap {
        white-space: normal !important;
    }
    .text-nowrap {
        white-space: nowrap !important;
    }
    .text-reset {
        color: inherit !important;
    }

    text-helper-with-bp()

    Combine text-aligns-helper, text-transforms-helper and text-miscs-helper helpers in one helper with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.text-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .text-center\@xs-only {
            text-align: center !important;
        }
     
        .text-justify\@xs-only {
            text-align: justify !important;
        }
     
        .text-left\@xs-only {
            text-align: left !important;
        }
     
        .text-right\@xs-only {
            text-align: right !important;
        }
     
        .text-capitalize\@xs-only {
            text-transform: capitalize !important;
        }
     
        .text-lowercase\@xs-only {
            text-transform: lowercase !important;
        }
     
        .text-uppercase\@xs-only {
            text-transform: uppercase !important;
        }
     
        .text-decoration-none\@xs-only {
            text-decoration: none !important;
        }
        .text-break\@xs-only {
            overflow-wrap: break-word !important;
            word-break: break-word !important;
        }
        .text-truncate\@xs-only {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .text-wrap\@xs-only {
            white-space: normal !important;
        }
        .text-nowrap\@xs-only {
            white-space: nowrap !important;
        }
        .text-reset\@xs-only {
            color: inherit !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .text-center\@sm
         * .text-justify\@sm
         * .text-left\@sm
         * .text-right\@sm
         * .text-capitalize\@sm
         * .text-lowercase\@sm
         * .text-uppercase\@sm
         * .text-decoration-none\@sm
         * .text-break\@sm
         * .text-truncate\@sm
         * .text-wrap\@sm
         * .text-nowrap\@sm
         * .text-reset\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .text-center\@sm-only
         * .text-justify\@sm-only
         * .text-left\@sm-only
         * .text-lerightft\@sm-only
         * .text-capitalize\@sm-only
         * .text-lowercase\@sm-only
         * .text-uppercase\@sm-only
         * .text-decoration-none\@sm-only
         * .text-break\@sm-only
         * .text-truncate\@sm-only
         * .text-wrap\@sm-only
         * .text-nowrap\@sm-only
         * .text-reset\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .text-center\@md
         * .text-justify\@md
         * .text-left\@md
         * .text-right\@md
         * .text-capitalize\@md
         * .text-lowercase\@md
         * .text-uppercase\@md
         * .text-decoration-none\@md
         * .text-break\@md
         * .text-truncate\@md
         * .text-wrap\@md
         * .text-nowrap\@md
         * .text-reset\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .text-center\@md-only
         * .text-justify\@md-only
         * .text-left\@md-only
         * .text-right\@md-only
         * .text-capitalize\@md-only
         * .text-lowercase\@md-only
         * .text-uppercase\@md-only
         * .text-decoration-none\@md-only
         * .text-break\@md-only
         * .text-truncate\@md-only
         * .text-wrap\@md-only
         * .text-nowrap\@md-only
         * .text-reset\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .text-center\@lg
         * .text-justify\@lg
         * .text-left\@lg
         * .text-right\@lg
         * .text-capitalize\@lg
         * .text-lowercase\@lg
         * .text-uppercase\@lg
         * .text-decoration-none\@lg
         * .text-break\@lg
         * .text-truncate\@lg
         * .text-wrap\@lg
         * .text-nowrap\@lg
         * .text-reset\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .text-center\@lg-only
         * .text-justify\@lg-only
         * .text-left\@lg-only
         * .text-right\@lg-only
         * .text-capitalize\@lg-only
         * .text-lowercase\@lg-only
         * .text-uppercase\@lg-only
         * .text-decoration-none\@lg-only
         * .text-break\@lg-only
         * .text-truncate\@lg-only
         * .text-wrap\@lg-only
         * .text-nowrap\@lg-only
         * .text-reset\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .text-center\@xl
         * .text-justify\@xl
         * .text-left\@xl
         * .text-right\@xl
         * .text-capitalize\@xl
         * .text-lowercase\@xl
         * .text-uppercase\@xl
         * .text-decoration-none\@xl
         * .text-break\@xl
         * .text-truncate\@xl
         * .text-wrap\@xl
         * .text-nowrap\@xl
         * .text-reset\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .text-center\@xl-only
         * .text-justify\@xl-only
         * .text-left\@xl-only
         * .text-right\@xl-only
         * .text-capitalize\@xl-only
         * .text-lowercase\@xl-only
         * .text-uppercase\@xl-only
         * .text-decoration-none\@xl-only
         * .text-break\@xl-only
         * .text-truncate\@xl-only
         * .text-wrap\@xl-only
         * .text-nowrap\@xl-only
         * .text-reset\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .text-center\@xxl
         * .text-justify\@xxl
         * .text-left\@xxl
         * .text-right\@xxl
         * .text-capitalize\@xxl
         * .text-lowercase\@xxl
         * .text-uppercase\@xxl
         * .text-decoration-none\@xxl
         * .text-break\@xxl
         * .text-truncate\@xxl
         * .text-wrap\@xxl
         * .text-nowrap\@xxl
         * .text-reset\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .text-center\@xxl-only
         * .text-justify\@xxl-only
         * .text-left\@xxl-only
         * .text-right\@xxl-only
         * .text-capitalize\@xxl-only
         * .text-lowercase\@xxl-only
         * .text-uppercase\@xxl-only
         * .text-decoration-none\@xxl-only
         * .text-break\@xxl-only
         * .text-truncate\@xxl-only
         * .text-wrap\@xxl-only
         * .text-nowrap\@xxl-only
         * .text-reset\@xxl-only
         */
    }

    text()

    Helper text entry point.
    Combine text-aligns-helper, text-transforms-helper, text-miscs-helper and text-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.text;
    // @include helpers.text(false); 
    Output

    See text-aligns-helper(), text-transforms-helper(), text-miscs-helper() and text-helper-with-bp() outputs.



    visibility


    Variables

    All those variables could be customized depending on what you need in your variables.scss file.
    Here are the default values.

    $visibilities

    Define all visibility values to support.

    $visibilities: (
        visible,
        hidden
    !default;

    $visibilities-important

    Set the important property on each rules.

    $visibilities-important: true;

    $visibilities-prefix

    Define the prefix of all visibility classes.

    $visibilities-prefix: 'v-';

    Mixins

    visibility-helper()

    Set all visibility classes from the $visibilities variable.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.visibility-helper;
    Output
    .v-visible {
        visibility: visible !important;
    }
     
    .v-hidden {
        visibility: hidden !important;
    }

    visibility-helper-with-bp()

    Set all visibility classes from the $visibilities variable with breakpoints media queries.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.visibility-helper-with-bp;
    Output
    @media (min-width: 20.375em) and (max-width: 35.99875em) {
        .v-visible\@xs-only {
            visibility: visible !important;
        }
     
        .v-hidden\@xs-only {
            visibility: hidden !important;
        }
    }
    /* and so on */
    @media (min-width: 36em) {
        /*
         * .v-visible\@sm
         * .v-hidden\@sm
         */
    }
    @media (min-width: 36em) and (max-width: 47.99875em) {
        /*
         * .v-visible\@sm-only
         * .v-hidden\@sm-only
         */
    }
    @media (min-width: 48em) {
        /*
         * .v-visible\@md
         * .v-hidden\@md
         */
    }
    @media (min-width: 48em) and (max-width: 63.99875em) {
        /*
         * .v-visible\@md-only
         * .v-hidden\@md-only
         */
    }
    @media (min-width: 64em) {
        /*
         * .v-visible\@lg
         * .v-hidden\@lg
         */
    }
    @media (min-width: 64em) and (max-width: 74.99875em) {
        /*
         * .v-visible\@lg-only
         * .v-hidden\@lg-only
         */
    }
    @media (min-width: 75em) {
        /*
         * .v-visible\@xl
         * .v-hidden\@xl
         */
    }
    @media (min-width: 75em) and (max-width: 99.99875em) {
        /*
         * .v-visible\@xl-only
         * .v-hidden\@xl-only
         */
    }
    @media (min-width: 100em) {
        /*
         * .v-visible\@xxl
         * .v-hidden\@xxl
         */
    }
    @media (min-width: 100em) {
        /*
         * .v-visible\@xxl-only
         * .v-hidden\@xxl-only
         */
    }

    visibility-print-helper()

    Set all visibility classes from the $visibilities variable in print media query.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.visibility-print-helper;
    Output
    @media print {
        /*
         * .v-visible
         * .v-hidden
         */
    }

    visibility-screen-helper()

    Set all visibility classes from the $visibilities variable in screen media query.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.visibility-screen-helper;
    Output
    @media screen {
        /*
         * .v-visible
         * .v-hidden
         */
    }

    visibility()

    Helper visibility entry point.
    Combine both visibility-helper and visibility-helper-with-bp helpers in one helper.

    @use '@wide/styles-helpers' as helpers;
     
    @include helpers.visibility;
    // @include helpers.visibility(false); 
    Parameters
    Type Description Mandatory Default
    Boolean Use visibility-helper-with-bp() false true
    Output

    See visibility-helper and visibility-helper-with-bp outputs.



    Authors


    Contributors



    Resources



    License

    This project is licensed under the MIT License - see the licence file for details

    Keywords

    none

    Install

    npm i @wide/styles-helpers

    DownloadsWeekly Downloads

    103

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    141 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar