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
     * .