Skip to content

wide/styles-utils

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
src
src
 
 
.editorconfig
.editorconfig
 
 
.gitignore
.gitignore
 
 
.stylelintrc
.stylelintrc
 
 
index.scss
index.scss
 
 
licence
licence
 
 
package.json
package.json
 
 
readme.md
readme.md
 
 

Repository files navigation

SCSS Utils Collection

Install

npm install @wide/styles-utils --save

Usage


a11y

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()

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

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()

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()

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()

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()

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()

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()

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


Contributors



Resources



License

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

About

SCSS Utils Collection.

Topics

styles modulus

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

0 stars

Watchers

8 watching

Forks

0 forks
Report repository

Releases 7

2.1.2 Latest
Jun 24, 2021
+ 6 releases

Packages

No packages published

Contributors 2

  •  
  •  

Languages