SCSS Utils Collection

Install

npm install @wide/styles-utils --save

Usage

• a11y
• breakpoint
• button
• element
• font
• grid
• list
• pseudo-classs
• text
• touch

a11y

• only()
• focusable()

only()

Applies accessible hiding to the current element.

@use '@wide/styles-utils' as mixins;

/* With `!important` property */
.a11y {
    @include mixins.a11y-only();
}

/* Without `!important` property */
.a11y-not-important {
    @include mixins.a11y-only(false);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Boolean | Whether the visibility is important | false | true |

Output

/* With `!important` property */
.a11y {
    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;
}

focusable()

Allows an accessibly hidden element to be focusable via keyboard navigation.

@use '@wide/styles-utils' as mixins;

/* With `!important` property */
.a11y-focusable {
    @include mixins.a11y-focusable();
}

/* Without `!important` property */
.a11y-focusable-not-important {
    @include mixins.a11y-focusable(false);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Boolean | Whether the visibility is important | false | true |

Output

/* With `!important` property */
.a11y-focusable: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;
}

breakpoint

• up()
• down()
• between()
• only()
• print()

up()

Define a media query value as the minimun reaching point.

@use '@wide/styles-utils' as mixins;

.show-from-sm {
    @include mixins.bp-up(sm) {
        color: green;
    }

    @include mixins.bp-up(sm, true) {
        color: fuchsia;
    }
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String\|Number | The min media query value (xs, 1500px, 30em, ...) | true | | | Boolean | Is the media query measurement is height ? | false | false | | String | The media query type (all, screen, ...) | false | all |

Output

@media (min-width: 36em) {
    .show-from-sm {
        color: green;
    }
}

@media (min-height: 36em) {
    .show-from-sm {
        color: fuchsia;
    }
}

down()

Define a media query value as the maximum reaching point.

@use '@wide/styles-utils' as mixins;

.show-until-lg {
    @include mixins.bp-down(lg) {
        color: blue;
    }

    @include mixins.bp-lg(lg, true) {
        color: red;
    }
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String\|Number | The max media query value (xs, 1500px, 30em, ...) | true | | | Boolean | Is the media query measurement is height ? | false | false | | String | The media query type (all, screen, ...) | false | all |

Output

@media (max-width: 63.99875em) {
    .show-until-lg {
        color: blue;
    }
}

@media (min-height: 63.99875em) {
    .show-until-lg {
        color: red;
    }
}

between()

Define a range of media query values.

@use '@wide/styles-utils' as mixins;

.show-between {
    @include mixins.bp-between(sm, md) {
        color: orange;
    }

    @include mixins.bp-between(sm, md, true) {
        color: purple;
    }

    @include mixins.bp-between(sm, 1500) {
        color: gold;
    }
    @include mixins.bp-between(1500, sm) {
        color: yellow;
    }
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String\|Number | The min media query value (xs, 1500px, 30em, ...) | true | | | String\|Number | The max media query value (xs, 1500px, 30em, ...) | true | | | Boolean | Is the media query measurement is height ? | false | false | | String | The media query type (all, screen, ...) | false | all |

Note
There is a security method which test the both values and sort them from the lowest to the highest

Output

@media (min-width: 36em) and (max-width: 48em) {
  .show-between {
    color: orange;
  }
}

@media (min-height: 36em) and (max-height: 48em) {
  .show-between {
    color: purple;
  }
}

@media (min-width: 36em) and (max-width: 93.75em) {
  .show-between {
    color: gold;
  }
}
@media (min-width: 36em) and (max-width: 93.75em) {
  .show-between {
    color: yellow;
  }
}

only()

Define a media query value as the only reaching point.

@use '@wide/styles-utils' as mixins;

.show-only {
    @include mixins.bp-only(xl) {
        color: indigo;
    }

    @include mixins.bp-only(xxl) {
        color: brown;
    }
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String\|Number | The media query value (xs, 1500px, 30em, ...) | true | | | String | The media query type (all, screen, ...) | false | all |

Output

@media (min-width: 75em) and (max-width: 99.99875em) {
  .test {
    color: indigo;
  }
}

@media (min-width: 100em) {
  .test {
    color: brown;
  }
}

print()

Define print media query rules.

@use '@wide/styles-utils' as mixins;

.print {
    @include mixin.bp-print() {
        color: beige;
    }
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String\|Number | The media query value (xs, 1500px, 30em, ...) | true | | | String | The media query type (all, screen, ...) | false | all |

Output

@media print {
    .print {
        color: beige;
    }
}

button

• reset()

reset()

Reset button state to normal element.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.btn-reset();
    /* new rules here */
}

Output

.btn {
    background: transparent;
    border: 0;
    padding: 0;
    /* new rules here */
}

element

• clearfix()
• centerer()
• vcenter()
• ratio()
• position()
• trbl()

reset()

Micro clearfix rules for containing floats.

@use '@wide/styles-utils' as mixins;

.clearfix {
    @include mixins.el-clearfix();
}

Output

.clearfix::after {
    clear: both;
    content: '';
    display: block;
}

centerer()

Center an element on the horizontal and vertical axis in absolute position.

@use '@wide/styles-utils' as mixins;

.center-horizontal {
    @include mixins.el-centerer(true, false);
}

.center-vertical {
    @include mixins.el-centerer(false);
}

.center-h-v {
    @include mixins.el-centerer();
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Boolean | Horizontal centering | false | true | | Boolean | Vertical centering | false | true |

Output

.center-horizontal {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.center-vertical {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.center-h-v {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

vcenter()

Vertically-center the direct descendants of the current element.

Centering is achieved by displaying children as inline-blocks. Any whitespace between elements is nullified by redefining the font size of the container and its children.

@use '@wide/styles-utils' as mixins;

.v-center {
    @include mixins.el-vcenter();
}

Output

.v-center {
    font-size: 0;
}
.v-center::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.v-center > * {
    display: inline-block;
    font-size: 1rem;
    vertical-align: middle;
}

ratio()

Lock the aspect ratio of an element – or make it fit to content if it exceeds the boundaries of the aspect ratio.

Note! the ratio is produced using the :before and :after pseudo-elements.
Why it won't work on empty tags like <img />, <input /> etc.

If used with flexbox – the ratio keeping pesudo element will actas a hidden flex-item.

@use '@wide/styles-utils' as mixins;

.ratio {
    @include mixins.el-ratio();
}

.ratio-16-9 {
    @include mixins.el-ratio(16, 9);
}

.ratio-custom {
    @include mixins.el-ratio(1.777778);
}

.ratio-width-height {
    @include mixins.el-ratio(4px, 3px);
}

.ratio-custom-keyword {
    @include mixins.el-ratio($ratio: 1.2);
}

Parameters

Possibility to handle one or two arguments: ratio or width, height

If one argument:

| Type | Description | Mandatory | Default | |---|---|---|---| | Number\|Any | Ratio value. Could be define as 1.2 or by keyword $ratio: 1.2 | false | 1:1 |

If two arguments:

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | Width value | true | | | Number | Height value | true | |

Output

.ratio::before,
.ratio::after {
    content: "";
    clear: both;
    display: table;
    margin-left: -1px;
    width: 1px;
}
.ratio::before {
    float: left;
    padding-bottom: 100%;
}

.ratio-16-9::before,
.ratio-16-9::after {
    content: "";
    clear: both;
    display: table;
    margin-left: -1px;
    width: 1px;
}
.ratio-16-9::before {
    float: left;
    padding-bottom: 56.25%;
}

.ratio-custom::before,
.ratio-custom::after {
    content: "";
    clear: both;
    display: table;
    margin-left: -1px;
    width: 1px;
}
.ratio-custom::before {
    float: left;
    padding-bottom: 56.2499929688%;
}

.ratio-width-height::before,
.ratio-width-height::after {
    content: "";
    clear: both;
    display: table;
    margin-left: -1px;
    width: 1px;
}
.ratio-width-height::before {
    float: left;
    padding-bottom: 75%;
}

.ratio-custom-keyword::before,
.ratio-custom-keyword::after {
    content: "";
    clear: both;
    display: table;
    margin-left: -1px;
    width: 1px;
}
.ratio-custom-keyword::before {
    float: left;
    padding-bottom: 83.3333333333%;
}

position()

Set position of an element using the syntax "padding-shorthand-syntax".

@use '@wide/styles-utils' as mixins;

.position {
    @include mixins.el-position();
}
.position-abs-10 {
    @include mixins.el-position(absolute, 10px);
}
.position-abs-10-20 {
    @include mixins.el-position(absolute, 10px, 20px);
}
.position-abs-10-20-30 {
    @include mixins.el-position(absolute, 10px, 20px, 30px);
}
.position-abs-10-20-30-40 {
    @include mixins.el-position(absolute, 10px, 20px, 30px, 40px);
}
.position-abs-0-0-30 {
    @include mixins.el-position($bottom: 30px);
}
.position-abs-10-10-30 {
    @include mixins.el-position(absolute, 10px, $bottom: 30px);
}
.position-abs-10--456 {
    @include mixins.el-position(absolute, 10px, $z-index: 456);
}

Parameters

Possibility to handle arguments by keywords: position, top, right, bottom, left and z-index.

| Type | Description | Mandatory | Default | |---|---|---|---| | String | Position | false | absolute | | Number | Top | false | 0 | | Number | Right | false | 0 | | Number | Bottom | false | 0 | | Number | Left | false | 0 | | Number\|String | z-index | false | auto |

Output

.position {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: auto;
}

.position-abs-10 {
    bottom: 10px;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: auto;
}

.position-abs-10-20 {
    bottom: 10px;
    left: 20px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: auto;
}

.position-abs-10-20-30 {
    bottom: 30px;
    left: 20px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: auto;
}

.position-abs-10-20-30-40 {
    bottom: 30px;
    left: 40px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: auto;
}

.position-abs-0-0-30 {
    bottom: 30px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: auto;
}

.position-abs-10-10-30 {
    bottom: 30px;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: auto;
}

.position-abs-10--456 {
    bottom: 10px;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 456;
}

trbl()

Set edges properties of an element to a unit above/below using a "padding-shorthand-syntax" (top, right-left, bottom)... and it takes keywords too.

@use '@wide/styles-utils' as mixins;

.trbl {
    @include mixins.el-trbl();
}
.trbl-10 {
    @include mixins.el-trbl(10px);
}
.trbl-10-20 {
    @include mixins.el-trbl(10px, 20px);
}
.trbl-10-20-30 {
    @include mixins.el-trbl(10px, 20px, 30px);
}
.trbl-10-20-30-40 {
    @include mixins.el-trbl(10px, 20px, 30px, 40px);
}
.trbl-0-0-30 {
    @include mixins.el-trbl($bottom: 30px);
}
.trbl-10-10-30 {
    @include mixins.el-trbl(10px, $bottom: 30px);
}

Parameters

Possibility to handle arguments by keywords: top, right, bottom and left.

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | Top | false | 0 | | Number | Right | false | 0 | | Number | Bottom | false | 0 | | Number | Left | false | 0 |

Output

.trbl {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.trbl-10 {
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 10px;
}

.trbl-10-20 {
    bottom: 10px;
    left: 20px;
    right: 20px;
    top: 10px;
}

.trbl-10-20-30 {
    bottom: 30px;
    left: 20px;
    right: 20px;
    top: 10px;
}

.trbl-10-20-30-40 {
    bottom: 30px;
    left: 40px;
    right: 20px;
    top: 10px;
}

.trbl-0-0-30 {
    bottom: 30px;
    left: 0;
    right: 0;
    top: 0;
}

.trbl-10-10-30 {
    bottom: 30px;
    left: 10px;
    right: 10px;
    top: 10px;
}

font

• face()
• size()

face()

Generates an @font-face declaration.

You can choose the specific file formats you need to output; the mixin supports eot, ttf, svg, woff2 and woff.

@use '@wide/styles-utils' as mixins;

@include mixins.font-face(
    "source-sans-pro",
    "fonts/source-sans-pro-regular",
    ("woff2", "woff")
) {
    font-style: normal;
    font-weight: 400;
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | String | The font family name | true | | | String | The path to the font family | true | | | String\|List | A list of file formats to support | false | ("ttf", "woff2", "woff") |

Output

@font-face {
    font-family: "source-sans-pro";
    src: url("fonts/source-sans-pro-regular.woff2") format("woff2"), url("fonts/source-sans-pro-regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}

size()

Generate a font-size and baseline-compatible line-height.

@use '@wide/styles-utils' as mixins;

.font-12 {
    @include mixins.font-size(12);
}

.font-12-20-i {
    @include mixins.font-size(12, 20, true);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | The size of the font | true | | | Number\|String | The line box height | false | auto | | Boolean | Whether the font-size is important | false | false |

Output

.font-12 {
    font-size: 0.75em;
    line-height: 1.05;
}

.font-12-20-i {
    font-size: 0.75em !important;
    line-height: 1.25em !important;
}

grid

• container()
• size()

container()

Generate the grid container.
It uses the negative margin trick for multi-row grids.

@use '@wide/styles-utils' as mixins;

.container {
    @include mixins.grid-container();
}

.container-gutter-10 {
    @include mixins.grid-container(10px, false);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | The size if the gutters | false | 0 | | Boolean | Define if the whitespace fix is enable | false | true |

Output

.container {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    margin-left: 0;
}

.container-gutter-10 {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: -10;
}

item()

Generate the grid item.

1. Required in order to combine fluid widths with fixed gutters.
2. Allows us to manipulate grids vertically, with text-level properties, etc.
3. Default item alignment is with the tops of each other, like most traditional grid/layout systems.
4. By default, all layout items are full-width (mobile first).
5. Gutters provided by left padding

@use '@wide/styles-utils' as mixins;

.grid-item {
    @include mixins.grid-item();
}

.grid-item-gutter-10 {
    @include mixins.grid-item(10px, false);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | The size if the gutters | false | 0 | | Boolean | Define if the whitespace fix is enable | false | true |

Output

.grid-item {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 1rem;
    padding-left: 0;
}

.grid-item-gutter-10 {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: 10px;
}

list

• reset()

reset()

Injects generic rules for disabling ul, ol, li styles.

@use '@wide/styles-utils' as mixins;

.list {
    @include mixins.list-reset();
}

Output

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

pseudo-classs

• a()
• af()
• ah()
• av()
• afh()
• afv()
• ahv()
• afhv()
• f()
• fh()
• fv()
• fhv()
• h()
• hv()
• v()

a()

Generate :active style in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-a() {
        background-color: red;
    }
}

Output

.btn:active {
    background-color: red;
}

af()

Generate :active and :focus styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-af() {
        background-color: blue;
    }
}

Output

.btn:active,
.btn:focus {
    background-color: blue;
}

ah()

Generate :active and :hover styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-ah() {
        background-color: green;
    }
}

Output

.btn:active,
.btn:hover {
    background-color: green;
}

av()

Generate :active and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-av() {
        background-color: green;
    }
}

Output

.btn:active,
.btn:visited {
    background-color: green;
}

afh()

Generate :active, :focus and :hover styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-afh() {
        background-color: yellow;
    }
}

Output

.btn:active,
.btn:focus,
.btn:hover {
    background-color: yellow;
}

afv()

Generate :active, :focus and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-afv() {
        background-color: yellow;
    }
}

Output

.btn:active,
.btn:focus,
.btn:visited {
    background-color: yellow;
}

ahv()

Generate :active, :hover and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-ahv() {
        background-color: yellow;
    }
}

Output

.btn:active,
.btn:hover,
.btn:visited {
    background-color: yellow;
}

afhv()

Generate :active, :focus, :hover and visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-afhv() {
        background-color: yellow;
    }
}

Output

.btn:active,
.btn:focus,
.btn:hover,
.btn:visited {
    background-color: yellow;
}

f()

Generate :focus style in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-f() {
        background-color: cyan;
    }
}

Output

.btn:focus {
    background-color: cyan;
}

fh()

Generate :focus and :hover styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-fh() {
        background-color: black;
    }
}

Output

.btn:focus,
.btn:hover {
    background-color: black;
}

fv()

Generate :focus and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-fv() {
        background-color: black;
    }
}

Output

.btn:focus,
.btn:visited {
    background-color: black;
}

fhv()

Generate :focus, :hover and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-fhv() {
        background-color: black;
    }
}

Output

.btn:focus,
.btn:hover,
.btn:visited {
    background-color: black;
}

h()

Generate :hover styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-h() {
        background-color: white;
    }
}

Output

.btn:hover {
    background-color: white;
}

hv()

Generate :hover and :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-hv() {
        background-color: white;
    }
}

Output

.btn:hover,
.btn:visited {
    background-color: white;
}

v()

Generate :visited styles in one go.

@use '@wide/styles-utils' as mixins;

.btn {
    @include mixins.pc-v() {
        background-color: white;
    }
}

Output

.btn:visited {
    background-color: white;
}

text

• truncate()

truncate()

Prevent text from wrapping onto multiple lines for the current element.
An ellipsis is appended to the end of the line.

@use '@wide/styles-utils' as mixins;

.text-truncated {
    @include mixins.text-truncate();
}

.text-truncated-50px {
    @include mixins.text-truncate(50px);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Number | The maximum width of element | false | 100% |

Output

.text-truncated {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncated-50px {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

touch

• scroll()
• tap()
• enabled()
• disabled()

scroll()

Set whether or not touch devices use momentum-based scrolling for the given element.
By default, applies momentum-based scrolling for the current element.

@use '@wide/styles-utils' as mixins;

.touch-scroll {
    @include mixins.touch-scroll();
}

Output

.touch-scroll {
    -webkit-overflow-scrolling: touch;
}

tap()

Set the color of the highlight that appears over a link while it's being tapped.
By default, the highlight is suppressed.

@use '@wide/styles-utils' as mixins;

.touch-scroll {
    @include mixins.touch-tap();
}

.touch-scroll-red {
    @include mixins.touch-tap(red);
}

Parameters

| Type | Description | Mandatory | Default | |---|---|---|---| | Color | The value of the highlight | false | rgba(0, 0, 0, 0) |

Output

.touch-scroll {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.touch-scroll-red {
    -webkit-tap-highlight-color: red;
}

enabled()

Finding out if touch is available for the page document.

@use '@wide/styles-utils' as mixins;

.text-size-mobile {
    @include mixins.touch-enabled() {
        font-size: 1.2rem;
    }
}

Output

.-touch-based .text-size-mobile {
    font-size: 1.2rem;
}

disabled()

Finding out if touch is not available for the page document.

@use '@wide/styles-utils' as mixins;

.text-size {
    @include mixins.touch-disabled() {
        font-size: 1rem;
    }
}

Output

:not(.-touch-based) .text-size {
    font-size: 1rem;
}

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