@wide/styles-helpers

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
• alignment
• clearfix
• container
• crop
• display
• embed
• flexbox
• float
• font
• overflow
• position
• stretched-link
• text
• visibility

a11y

• Mixins
  • a11y-aria()
  • a11y-sr()
  • 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
  • $aligns
  • $aligns-important
• Mixins
  • alignment-helper()
  • alignment-helper-with-bp()
  • 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()

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()
  • crop-helper-with-bp()
  • 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
  • $displays
  • $displays-important
  • $displays-prefix
• Mixins
  • display-helper()
  • display-helper-with-bp()
  • display-print-helper()
  • display-screen-helper()
  • 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()
  • embed-helper-with-bp()
  • 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
  • $flexboxes
  • $flexboxes-properties-class-override
  • $flexboxes-values-class-override
  • $flexboxes-factors
  • $flexboxes-factors-max-loop
  • $flexboxes-important
• Mixins
  • flexbox-helper()
  • flexbox-helper-with-bp()
  • flexbox-factor-helper()
  • flexbox-factor-helper-with-bp()
  • 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
  • $floats
• Mixins
  • float-helper()
  • float-helper-with-bp()
  • 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
  • $fonts-style
  • $fonts-weight
  • $fonts-important
• Mixins
  • font-style-helper()
  • font-weight-helper()
  • font-helper-with-bp()
  • 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
  • $overflows
• Mixins
  • overflow-helper()
  • overflow-helper-with-bp()
  • 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
  • $positions
• Mixins
  • position-helper()
  • position-helper-with-bp()
  • 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
  • $zindex-stretched
• Mixins
  • stretched-link-helper()
  • stretched-link-helper-with-bp()
  • 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
  • $text-aligns
  • $text-transforms
  • $text-important
• Mixins
  • text-aligns-helper()
  • text-transforms-helper()
  • text-miscs-helper()
  • text-helper-with-bp()
  • 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
  • $visibilities
  • $visibilities-important
  • $visibilities-prefix
• Mixins
  • visibility-helper()
  • visibility-helper-with-bp()
  • visibility-print-helper()
  • visibility-screen-helper()
  • 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

• Aymeric Assier - github.com/myeti
• Julien Martins Da Costa - github.com/jdacosta

Contributors

• Sébastien Robillard - github.com/robiseb

Resources

• Locomotive boilerplate

License

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