{"id":42830354,"url":"https://github.com/wide/styles-utils","last_synced_at":"2026-01-30T11:26:54.620Z","repository":{"id":49191554,"uuid":"268537199","full_name":"wide/styles-utils","owner":"wide","description":"SCSS Utils Collection.","archived":false,"fork":false,"pushed_at":"2021-06-24T08:23:59.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-08-19T19:15:31.399Z","etag":null,"topics":["modulus","styles"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wide.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-01T13:57:08.000Z","updated_at":"2021-06-24T08:23:20.000Z","dependencies_parsed_at":"2022-09-05T10:30:38.388Z","dependency_job_id":null,"html_url":"https://github.com/wide/styles-utils","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/wide/styles-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wide","download_url":"https://codeload.github.com/wide/styles-utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-utils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28911821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T08:15:08.179Z","status":"ssl_error","status_checked_at":"2026-01-30T08:14:31.507Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modulus","styles"],"created_at":"2026-01-30T11:26:53.924Z","updated_at":"2026-01-30T11:26:54.612Z","avatar_url":"https://github.com/wide.png","language":"SCSS","readme":"# SCSS Utils Collection\n\n## Install\n\n```\nnpm install @wide/styles-utils --save\n```\n\n## Usage\n\n- [a11y](#a11y)\n- [breakpoint](#breakpoint)\n- [button](#button)\n- [element](#element)\n- [font](#font)\n- [grid](#grid)\n- [list](#list)\n- [pseudo-classs](#pseudo-classs)\n- [text](#text)\n- [touch](#touch)\n\n\n\u003cbr/\u003e\n\n## a11y\n\n- [only()](#a11y-only)\n- [focusable()](#a11y-focusable)\n\n### \u003ca name=\"a11y-only\"\u003e\u003c/a\u003e`only()`\n\nApplies accessible hiding to the current element.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n/* With `!important` property */\n.a11y {\n    @include mixins.a11y-only();\n}\n\n/* Without `!important` property */\n.a11y-not-important {\n    @include mixins.a11y-only(false);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Whether the visibility is important | `false` | `true` |\n\n#### Output\n```css\n/* With `!important` property */\n.a11y {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n```\n\n### \u003ca name=\"a11y-focusable\"\u003e\u003c/a\u003e`focusable()`\n\nAllows an accessibly hidden element to be focusable via keyboard navigation.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n/* With `!important` property */\n.a11y-focusable {\n    @include mixins.a11y-focusable();\n}\n\n/* Without `!important` property */\n.a11y-focusable-not-important {\n    @include mixins.a11y-focusable(false);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Whether the visibility is important | `false` | `true` |\n\n#### Output\n```css\n/* With `!important` property */\n.a11y-focusable:not(:focus) {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n```\n\n\u003cbr/\u003e\n\n\n## breakpoint\n\n- [up()](#breakpoint-up)\n- [down()](#breakpoint-down)\n- [between()](#breakpoint-between)\n- [only()](#breakpoint-only)\n- [print()](#breakpoint-print)\n\n### \u003ca name=\"breakpoint-up\"\u003e\u003c/a\u003e`up()`\n\nDefine a media query value as the minimun reaching point.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.show-from-sm {\n    @include mixins.bp-up(sm) {\n        color: green;\n    }\n\n    @include mixins.bp-up(sm, true) {\n        color: fuchsia;\n    }\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String\\|Number` | The min media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `Boolean` | Is the media query measurement is `height` ? | `false` | `false` |\n| `String` | The media query type (all, screen, ...) | `false` | `all` |\n\n#### Output\n```css\n@media (min-width: 36em) {\n    .show-from-sm {\n        color: green;\n    }\n}\n\n@media (min-height: 36em) {\n    .show-from-sm {\n        color: fuchsia;\n    }\n}\n```\n\n### \u003ca name=\"breakpoint-down\"\u003e\u003c/a\u003e`down()`\n\nDefine a media query value as the maximum reaching point.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.show-until-lg {\n    @include mixins.bp-down(lg) {\n        color: blue;\n    }\n\n    @include mixins.bp-lg(lg, true) {\n        color: red;\n    }\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String\\|Number` | The max media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `Boolean` | Is the media query measurement is `height` ? | `false` | `false` |\n| `String` | The media query type (all, screen, ...) | `false` | `all` |\n\n#### Output\n```css\n@media (max-width: 63.99875em) {\n    .show-until-lg {\n        color: blue;\n    }\n}\n\n@media (min-height: 63.99875em) {\n    .show-until-lg {\n        color: red;\n    }\n}\n```\n\n### \u003ca name=\"breakpoint-between\"\u003e\u003c/a\u003e`between()`\n\nDefine a range of media query values.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.show-between {\n    @include mixins.bp-between(sm, md) {\n        color: orange;\n    }\n\n    @include mixins.bp-between(sm, md, true) {\n        color: purple;\n    }\n\n    @include mixins.bp-between(sm, 1500) {\n        color: gold;\n    }\n    @include mixins.bp-between(1500, sm) {\n        color: yellow;\n    }\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String\\|Number` | The min media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `String\\|Number` | The max media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `Boolean` | Is the media query measurement is `height` ? | `false` | `false` |\n| `String` | The media query type (all, screen, ...) | `false` | `all` |\n\n\u003e **Note**  \n\u003e There is a security method which test the both values and sort them from the lowest to the highest\n\n#### Output\n```css\n@media (min-width: 36em) and (max-width: 48em) {\n  .show-between {\n    color: orange;\n  }\n}\n\n@media (min-height: 36em) and (max-height: 48em) {\n  .show-between {\n    color: purple;\n  }\n}\n\n@media (min-width: 36em) and (max-width: 93.75em) {\n  .show-between {\n    color: gold;\n  }\n}\n@media (min-width: 36em) and (max-width: 93.75em) {\n  .show-between {\n    color: yellow;\n  }\n}\n```\n\n### \u003ca name=\"breakpoint-only\"\u003e\u003c/a\u003e`only()`\n\nDefine a media query value as the only reaching point.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.show-only {\n    @include mixins.bp-only(xl) {\n        color: indigo;\n    }\n\n    @include mixins.bp-only(xxl) {\n        color: brown;\n    }\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String\\|Number` | The media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `String` | The media query type (all, screen, ...) | `false` | `all` |\n\n#### Output\n```css\n@media (min-width: 75em) and (max-width: 99.99875em) {\n  .test {\n    color: indigo;\n  }\n}\n\n@media (min-width: 100em) {\n  .test {\n    color: brown;\n  }\n}\n```\n\n### \u003ca name=\"breakpoint-print\"\u003e\u003c/a\u003e`print()`\n\nDefine print media query rules.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.print {\n    @include mixin.bp-print() {\n        color: beige;\n    }\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String\\|Number` | The media query value (xs, 1500px, 30em, ...) | `true` |  |\n| `String` | The media query type (all, screen, ...) | `false` | `all` |\n\n#### Output\n```css\n@media print {\n    .print {\n        color: beige;\n    }\n}\n```\n\n\u003cbr/\u003e\n\n## button\n\n- [reset()](#button-reset)\n\n### \u003ca name=\"button-reset\"\u003e\u003c/a\u003e`reset()`\n\nReset button state to normal element.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.btn-reset();\n    /* new rules here */\n}\n```\n\n#### Output\n```css\n.btn {\n    background: transparent;\n    border: 0;\n    padding: 0;\n    /* new rules here */\n}\n```\n\n\u003cbr/\u003e\n\n## element\n\n- [clearfix()](#element-clearfix)\n- [centerer()](#element-centerer)\n- [vcenter()](#element-vcenter)\n- [ratio()](#element-ratio)\n- [position()](#element-position)\n- [trbl()](#element-trbl)\n\n### \u003ca name=\"element-clearfix\"\u003e\u003c/a\u003e`reset()`\n\nMicro clearfix rules for containing floats.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.clearfix {\n    @include mixins.el-clearfix();\n}\n```\n\n#### Output\n```css\n.clearfix::after {\n    clear: both;\n    content: '';\n    display: block;\n}\n```\n\n### \u003ca name=\"element-centerer\"\u003e\u003c/a\u003e`centerer()`\n\nCenter an element on the horizontal and vertical axis in absolute position.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.center-horizontal {\n    @include mixins.el-centerer(true, false);\n}\n\n.center-vertical {\n    @include mixins.el-centerer(false);\n}\n\n.center-h-v {\n    @include mixins.el-centerer();\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Horizontal centering | `false` | `true` |\n| `Boolean` | Vertical centering | `false` | `true` |\n\n#### Output\n```css\n.center-horizontal {\n    position: absolute;\n    left: 50%;\n    transform: translate(-50%, 0);\n}\n\n.center-vertical {\n    position: absolute;\n    top: 50%;\n    transform: translate(0, -50%);\n}\n\n.center-h-v {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n}\n```\n\n### \u003ca name=\"element-vcenter\"\u003e\u003c/a\u003e`vcenter()`\n\nVertically-center the direct descendants of the current element.  \n\nCentering 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.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.v-center {\n    @include mixins.el-vcenter();\n}\n```\n\n#### Output\n```css\n.v-center {\n    font-size: 0;\n}\n.v-center::before {\n    content: '';\n    display: inline-block;\n    height: 100%;\n    vertical-align: middle;\n}\n.v-center \u003e * {\n    display: inline-block;\n    font-size: 1rem;\n    vertical-align: middle;\n}\n```\n\n### \u003ca name=\"element-ratio\"\u003e\u003c/a\u003e`ratio()`\n\nLock the aspect ratio of an element – or make it fit to content if it exceeds the boundaries of the aspect ratio.\n\nNote! the ratio is produced using the :before and :after pseudo-elements.  \nWhy it won't work on empty tags like `\u003cimg /\u003e`, `\u003cinput /\u003e` etc.\n\nIf used with flexbox – the ratio keeping pesudo element will actas a hidden flex-item.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.ratio {\n    @include mixins.el-ratio();\n}\n\n.ratio-16-9 {\n    @include mixins.el-ratio(16, 9);\n}\n\n.ratio-custom {\n    @include mixins.el-ratio(1.777778);\n}\n\n.ratio-width-height {\n    @include mixins.el-ratio(4px, 3px);\n}\n\n.ratio-custom-keyword {\n    @include mixins.el-ratio($ratio: 1.2);\n}\n```\n\n#### Parameters\nPossibility to handle one or two arguments: `ratio` or `width`, `height`\n\nIf one argument:\n\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number\\|Any` | Ratio value. Could be define as `1.2` or by keyword `$ratio: 1.2` | `false` | 1:1 |\n\nIf two arguments:\n\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | Width value | `true` | |\n| `Number` | Height value | `true` | |\n\n#### Output\n```css\n.ratio::before,\n.ratio::after {\n    content: \"\";\n    clear: both;\n    display: table;\n    margin-left: -1px;\n    width: 1px;\n}\n.ratio::before {\n    float: left;\n    padding-bottom: 100%;\n}\n\n.ratio-16-9::before,\n.ratio-16-9::after {\n    content: \"\";\n    clear: both;\n    display: table;\n    margin-left: -1px;\n    width: 1px;\n}\n.ratio-16-9::before {\n    float: left;\n    padding-bottom: 56.25%;\n}\n\n.ratio-custom::before,\n.ratio-custom::after {\n    content: \"\";\n    clear: both;\n    display: table;\n    margin-left: -1px;\n    width: 1px;\n}\n.ratio-custom::before {\n    float: left;\n    padding-bottom: 56.2499929688%;\n}\n\n.ratio-width-height::before,\n.ratio-width-height::after {\n    content: \"\";\n    clear: both;\n    display: table;\n    margin-left: -1px;\n    width: 1px;\n}\n.ratio-width-height::before {\n    float: left;\n    padding-bottom: 75%;\n}\n\n.ratio-custom-keyword::before,\n.ratio-custom-keyword::after {\n    content: \"\";\n    clear: both;\n    display: table;\n    margin-left: -1px;\n    width: 1px;\n}\n.ratio-custom-keyword::before {\n    float: left;\n    padding-bottom: 83.3333333333%;\n}\n```\n\n\n### \u003ca name=\"element-position\"\u003e\u003c/a\u003e`position()`\n\nSet position of an element using the syntax \"padding-shorthand-syntax\".\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.position {\n    @include mixins.el-position();\n}\n.position-abs-10 {\n    @include mixins.el-position(absolute, 10px);\n}\n.position-abs-10-20 {\n    @include mixins.el-position(absolute, 10px, 20px);\n}\n.position-abs-10-20-30 {\n    @include mixins.el-position(absolute, 10px, 20px, 30px);\n}\n.position-abs-10-20-30-40 {\n    @include mixins.el-position(absolute, 10px, 20px, 30px, 40px);\n}\n.position-abs-0-0-30 {\n    @include mixins.el-position($bottom: 30px);\n}\n.position-abs-10-10-30 {\n    @include mixins.el-position(absolute, 10px, $bottom: 30px);\n}\n.position-abs-10--456 {\n    @include mixins.el-position(absolute, 10px, $z-index: 456);\n}\n```\n\n#### Parameters\nPossibility to handle arguments by keywords: `position`, `top`, `right`, `bottom`, `left` and `z-index`.\n\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String` | Position | `false` | `absolute` |\n| `Number` | Top | `false` | `0` |\n| `Number` | Right | `false` | `0` |\n| `Number` | Bottom | `false` | `0` |\n| `Number` | Left | `false` | `0` |\n| `Number\\|String` | z-index | `false` | `auto` |\n\n#### Output\n```css\n.position {\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: auto;\n}\n\n.position-abs-10 {\n    bottom: 10px;\n    left: 10px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: auto;\n}\n\n.position-abs-10-20 {\n    bottom: 10px;\n    left: 20px;\n    position: absolute;\n    right: 20px;\n    top: 10px;\n    z-index: auto;\n}\n\n.position-abs-10-20-30 {\n    bottom: 30px;\n    left: 20px;\n    position: absolute;\n    right: 20px;\n    top: 10px;\n    z-index: auto;\n}\n\n.position-abs-10-20-30-40 {\n    bottom: 30px;\n    left: 40px;\n    position: absolute;\n    right: 20px;\n    top: 10px;\n    z-index: auto;\n}\n\n.position-abs-0-0-30 {\n    bottom: 30px;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: auto;\n}\n\n.position-abs-10-10-30 {\n    bottom: 30px;\n    left: 10px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: auto;\n}\n\n.position-abs-10--456 {\n    bottom: 10px;\n    left: 10px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: 456;\n}\n```\n\n### \u003ca name=\"element-trbl\"\u003e\u003c/a\u003e`trbl()`\n\nSet edges properties of an element to a unit above/below using a \"padding-shorthand-syntax\" (top, right-left, bottom)... and it takes keywords too.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.trbl {\n    @include mixins.el-trbl();\n}\n.trbl-10 {\n    @include mixins.el-trbl(10px);\n}\n.trbl-10-20 {\n    @include mixins.el-trbl(10px, 20px);\n}\n.trbl-10-20-30 {\n    @include mixins.el-trbl(10px, 20px, 30px);\n}\n.trbl-10-20-30-40 {\n    @include mixins.el-trbl(10px, 20px, 30px, 40px);\n}\n.trbl-0-0-30 {\n    @include mixins.el-trbl($bottom: 30px);\n}\n.trbl-10-10-30 {\n    @include mixins.el-trbl(10px, $bottom: 30px);\n}\n```\n\n#### Parameters\nPossibility to handle arguments by keywords: `top`, `right`, `bottom` and `left`.\n\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | Top | `false` | `0` |\n| `Number` | Right | `false` | `0` |\n| `Number` | Bottom | `false` | `0` |\n| `Number` | Left | `false` | `0` |\n\n#### Output\n```css\n.trbl {\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n}\n\n.trbl-10 {\n    bottom: 10px;\n    left: 10px;\n    right: 10px;\n    top: 10px;\n}\n\n.trbl-10-20 {\n    bottom: 10px;\n    left: 20px;\n    right: 20px;\n    top: 10px;\n}\n\n.trbl-10-20-30 {\n    bottom: 30px;\n    left: 20px;\n    right: 20px;\n    top: 10px;\n}\n\n.trbl-10-20-30-40 {\n    bottom: 30px;\n    left: 40px;\n    right: 20px;\n    top: 10px;\n}\n\n.trbl-0-0-30 {\n    bottom: 30px;\n    left: 0;\n    right: 0;\n    top: 0;\n}\n\n.trbl-10-10-30 {\n    bottom: 30px;\n    left: 10px;\n    right: 10px;\n    top: 10px;\n}\n```\n\n\u003cbr/\u003e\n\n\n\n## font\n\n- [face()](#font-face)\n- [size()](#font-size)\n\n### \u003ca name=\"font-face\"\u003e\u003c/a\u003e`face()`\n\nGenerates an `@font-face` declaration.\n\nYou can choose the specific file formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2` and `woff`.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n@include mixins.font-face(\n    \"source-sans-pro\",\n    \"fonts/source-sans-pro-regular\",\n    (\"woff2\", \"woff\")\n) {\n    font-style: normal;\n    font-weight: 400;\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `String` | The font family name | `true` | |\n| `String` | The path to the font family | `true` | |\n| `String\\|List` | A list of file formats to support | `false` | `(\"ttf\", \"woff2\", \"woff\")` |\n\n#### Output\n```css\n@font-face {\n    font-family: \"source-sans-pro\";\n    src: url(\"fonts/source-sans-pro-regular.woff2\") format(\"woff2\"), url(\"fonts/source-sans-pro-regular.woff\") format(\"woff\");\n    font-style: normal;\n    font-weight: 400;\n}\n```\n\n### \u003ca name=\"font-size\"\u003e\u003c/a\u003e`size()`\n\nGenerate a font-size and baseline-compatible line-height.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.font-12 {\n    @include mixins.font-size(12);\n}\n\n.font-12-20-i {\n    @include mixins.font-size(12, 20, true);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | The size of the font | `true` | |\n| `Number\\|String` | The line box height | `false` | `auto` |\n| `Boolean` | Whether the font-size is important | `false` | `false` |\n\n#### Output\n```css\n.font-12 {\n    font-size: 0.75em;\n    line-height: 1.05;\n}\n\n.font-12-20-i {\n    font-size: 0.75em !important;\n    line-height: 1.25em !important;\n}\n```\n\n\u003cbr/\u003e\n\n## grid\n\n- [container()](#grid-container)\n- [size()](#grid-item)\n\n### \u003ca name=\"grid-container\"\u003e\u003c/a\u003e`container()`\n\nGenerate the grid container.  \nIt uses the [negative margin trick](http://csswizardry.com/2011/08/building-better-grid-systems/) for multi-row grids.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.container {\n    @include mixins.grid-container();\n}\n\n.container-gutter-10 {\n    @include mixins.grid-container(10px, false);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | The size if the gutters | `false` | `0` |\n| `Boolean` | Define if the whitespace fix is enable | `false` | `true` |\n\n#### Output\n```css\n.container {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-size: 0;\n    margin-left: 0;\n}\n\n.container-gutter-10 {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    margin-left: -10;\n}\n```\n\n### \u003ca name=\"grid-item\"\u003e\u003c/a\u003e`item()`\n\nGenerate the grid item.\n\n1. Required in order to combine fluid widths with fixed gutters.\n2. Allows us to manipulate grids vertically, with text-level properties, etc.\n3. Default item alignment is with the tops of each other, like most traditional grid/layout systems.\n4. By default, all layout items are full-width (mobile first).\n5. [Gutters provided by left padding](http://csswizardry.com/2011/08/building-better-grid-systems/)\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.grid-item {\n    @include mixins.grid-item();\n}\n\n.grid-item-gutter-10 {\n    @include mixins.grid-item(10px, false);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | The size if the gutters | `false` | `0` |\n| `Boolean` | Define if the whitespace fix is enable | `false` | `true` |\n\n#### Output\n```css\n.grid-item {\n    box-sizing: border-box;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    font-size: 1rem;\n    padding-left: 0;\n}\n\n.grid-item-gutter-10 {\n    box-sizing: border-box;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    padding-left: 10px;\n}\n```\n\n\u003cbr/\u003e\n\n## list\n\n- [reset()](#list-reset)\n\n### \u003ca name=\"list-reset\"\u003e\u003c/a\u003e`reset()`\n\nInjects generic rules for disabling `ul`, `ol`, `li` styles.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.list {\n    @include mixins.list-reset();\n}\n```\n\n#### Output\n```css\n.list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n```\n\n\u003cbr/\u003e\n\n## pseudo-classs\n\n- [a()](#pc-a)\n- [af()](#pc-af)\n- [ah()](#pc-ah)\n- [av()](#pc-av)\n- [afh()](#pc-afh)\n- [afv()](#pc-afv)\n- [ahv()](#pc-ahv)\n- [afhv()](#pc-afhv)\n- [f()](#pc-f)\n- [fh()](#pc-fh)\n- [fv()](#pc-fv)\n- [fhv()](#pc-fhv)\n- [h()](#pc-h)\n- [hv()](#pc-hv)\n- [v()](#pc-v)\n\n### \u003ca name=\"pc-a\"\u003e\u003c/a\u003e`a()`\n\nGenerate `:active` style in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-a() {\n        background-color: red;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active {\n    background-color: red;\n}\n```\n\n### \u003ca name=\"pc-af\"\u003e\u003c/a\u003e`af()`\n\nGenerate `:active` and `:focus` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-af() {\n        background-color: blue;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:focus {\n    background-color: blue;\n}\n```\n\n### \u003ca name=\"pc-ah\"\u003e\u003c/a\u003e`ah()`\n\nGenerate `:active` and `:hover` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-ah() {\n        background-color: green;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:hover {\n    background-color: green;\n}\n```\n\n### \u003ca name=\"pc-av\"\u003e\u003c/a\u003e`av()`\n\nGenerate `:active` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-av() {\n        background-color: green;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:visited {\n    background-color: green;\n}\n```\n\n### \u003ca name=\"pc-afh\"\u003e\u003c/a\u003e`afh()`\n\nGenerate `:active`, `:focus` and `:hover` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-afh() {\n        background-color: yellow;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:focus,\n.btn:hover {\n    background-color: yellow;\n}\n```\n\n### \u003ca name=\"pc-afv\"\u003e\u003c/a\u003e`afv()`\n\nGenerate `:active`, `:focus` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-afv() {\n        background-color: yellow;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:focus,\n.btn:visited {\n    background-color: yellow;\n}\n```\n\n### \u003ca name=\"pc-ahv\"\u003e\u003c/a\u003e`ahv()`\n\nGenerate `:active`, `:hover` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-ahv() {\n        background-color: yellow;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:hover,\n.btn:visited {\n    background-color: yellow;\n}\n```\n\n### \u003ca name=\"pc-afhv\"\u003e\u003c/a\u003e`afhv()`\n\nGenerate `:active`, `:focus`, `:hover` and `visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-afhv() {\n        background-color: yellow;\n    }\n}\n```\n\n#### Output\n```css\n.btn:active,\n.btn:focus,\n.btn:hover,\n.btn:visited {\n    background-color: yellow;\n}\n```\n\n### \u003ca name=\"pc-f\"\u003e\u003c/a\u003e`f()`\n\nGenerate `:focus` style in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-f() {\n        background-color: cyan;\n    }\n}\n```\n\n#### Output\n```css\n.btn:focus {\n    background-color: cyan;\n}\n```\n\n### \u003ca name=\"pc-fh\"\u003e\u003c/a\u003e`fh()`\n\nGenerate `:focus` and `:hover` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-fh() {\n        background-color: black;\n    }\n}\n```\n\n#### Output\n```css\n.btn:focus,\n.btn:hover {\n    background-color: black;\n}\n```\n\n### \u003ca name=\"pc-fv\"\u003e\u003c/a\u003e`fv()`\n\nGenerate `:focus` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-fv() {\n        background-color: black;\n    }\n}\n```\n\n#### Output\n```css\n.btn:focus,\n.btn:visited {\n    background-color: black;\n}\n```\n\n### \u003ca name=\"pc-fhv\"\u003e\u003c/a\u003e`fhv()`\n\nGenerate `:focus`, `:hover` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-fhv() {\n        background-color: black;\n    }\n}\n```\n\n#### Output\n```css\n.btn:focus,\n.btn:hover,\n.btn:visited {\n    background-color: black;\n}\n```\n\n### \u003ca name=\"pc-h\"\u003e\u003c/a\u003e`h()`\n\nGenerate `:hover` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-h() {\n        background-color: white;\n    }\n}\n```\n\n#### Output\n```css\n.btn:hover {\n    background-color: white;\n}\n```\n\n### \u003ca name=\"pc-hv\"\u003e\u003c/a\u003e`hv()`\n\nGenerate `:hover` and `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-hv() {\n        background-color: white;\n    }\n}\n```\n\n#### Output\n```css\n.btn:hover,\n.btn:visited {\n    background-color: white;\n}\n```\n\n### \u003ca name=\"pc-v\"\u003e\u003c/a\u003e`v()`\n\nGenerate `:visited` styles in one go.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.btn {\n    @include mixins.pc-v() {\n        background-color: white;\n    }\n}\n```\n\n#### Output\n```css\n.btn:visited {\n    background-color: white;\n}\n```\n\n\u003cbr/\u003e\n\n## text\n\n- [truncate()](#text-truncate)\n\n### \u003ca name=\"text-truncate\"\u003e\u003c/a\u003e`truncate()`\n\nPrevent text from wrapping onto multiple lines for the current element.  \nAn ellipsis is appended to the end of the line.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.text-truncated {\n    @include mixins.text-truncate();\n}\n\n.text-truncated-50px {\n    @include mixins.text-truncate(50px);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Number` | The maximum width of element | `false` | `100%` |\n\n#### Output\n```css\n.text-truncated {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.text-truncated-50px {\n    max-width: 50px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n```\n\n\u003cbr/\u003e\n\n## touch\n\n- [scroll()](#touch-scroll)\n- [tap()](#touch-tap)\n- [enabled()](#touch-enabled)\n- [disabled()](#touch-disabled)\n\n### \u003ca name=\"touch-scroll\"\u003e\u003c/a\u003e`scroll()`\n\nSet whether or not touch devices use momentum-based scrolling for the given element.  \nBy default, applies momentum-based scrolling for the current element.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.touch-scroll {\n    @include mixins.touch-scroll();\n}\n```\n\n#### Output\n```css\n.touch-scroll {\n    -webkit-overflow-scrolling: touch;\n}\n```\n\n### \u003ca name=\"touch-tap\"\u003e\u003c/a\u003e`tap()`\n\nSet the color of the highlight that appears over a link while it's being tapped.  \nBy default, the highlight is suppressed.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.touch-scroll {\n    @include mixins.touch-tap();\n}\n\n.touch-scroll-red {\n    @include mixins.touch-tap(red);\n}\n```\n\n#### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Color` | The value of the highlight | `false` | `rgba(0, 0, 0, 0)` |\n\n#### Output\n```css\n.touch-scroll {\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.touch-scroll-red {\n    -webkit-tap-highlight-color: red;\n}\n```\n\n### \u003ca name=\"touch-enabled\"\u003e\u003c/a\u003e`enabled()`\n\nFinding out if touch is available for the page document.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.text-size-mobile {\n    @include mixins.touch-enabled() {\n        font-size: 1.2rem;\n    }\n}\n```\n\n#### Output\n```css\n.-touch-based .text-size-mobile {\n    font-size: 1.2rem;\n}\n```\n\n### \u003ca name=\"touch-disabled\"\u003e\u003c/a\u003e`disabled()`\n\nFinding out if touch is not available for the page document.\n\n```scss\n@use '@wide/styles-utils' as mixins;\n\n.text-size {\n    @include mixins.touch-disabled() {\n        font-size: 1rem;\n    }\n}\n```\n\n#### Output\n```css\n:not(.-touch-based) .text-size {\n    font-size: 1rem;\n}\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Authors\n\n- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)\n- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)\n\n\u003cbr /\u003e\n\n### Contributors\n\n- **Sébastien Robillard** - [github.com/robiseb](https://github.com/robiseb)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Resources \n- [Locomotive boilerplate](https://github.com/locomotivemtl/locomotive-boilerplate)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nThis project is licensed under the MIT License - see the [licence](licence) file for details","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwide%2Fstyles-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-utils/lists"}