{"id":13491051,"url":"https://github.com/grabr/quantum-css","last_synced_at":"2025-03-28T07:31:48.615Z","repository":{"id":65371750,"uuid":"71656699","full_name":"grabr/quantum-css","owner":"grabr","description":"Atomic CSS library written in SCSS.","archived":true,"fork":false,"pushed_at":"2019-01-24T15:48:26.000Z","size":2040,"stargazers_count":28,"open_issues_count":5,"forks_count":4,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-09T13:48:08.418Z","etag":null,"topics":["atomic","atomic-css","css","scss"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/grabr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-22T18:05:10.000Z","updated_at":"2024-10-21T23:16:32.000Z","dependencies_parsed_at":"2023-01-19T22:55:29.748Z","dependency_job_id":null,"html_url":"https://github.com/grabr/quantum-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabr%2Fquantum-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabr%2Fquantum-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabr%2Fquantum-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabr%2Fquantum-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grabr","download_url":"https://codeload.github.com/grabr/quantum-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245989286,"owners_count":20705800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["atomic","atomic-css","css","scss"],"created_at":"2024-07-31T19:00:53.136Z","updated_at":"2025-03-28T07:31:48.606Z","avatar_url":"https://github.com/grabr.png","language":"CSS","readme":"# Quantum CSS\n\n[![npm version](https://badge.fury.io/js/quantum-css.svg)](https://www.npmjs.com/package/quantum-css)\n[![travis ci status](https://travis-ci.org/Grabr/quantum-css.svg)](https://travis-ci.org/Grabr/quantum-css)\n\n\u003e “Everything should be made as simple as possible, but no simpler.” \u0026ndash; Albert Einstein \u003csup\u003e[1](http://quoteinvestigator.com/2011/05/13/einstein-simple/)\u003c/sup\u003e\n\n\n## Preface \n\nQuantum CSS is an atomic CSS library written in SCSS.\n\nYou won’t need to write any CSS rules and media queries while using Quantum CSS. Creating highly responsive UIs becomes pleasure while extension pattern provides means of controlled customization. You can create molecules with avaialble atoms using [`@extend`][1].\n\nHere is a sample button component with rounded corners, hover and focus transition animations (which are disabled on small screens to provide better experience on touch devices):\n\n```html\n\u003cbutton class=\"btn btn-fb\" type=\"button\"\u003e\n  \u003c!-- Content --\u003e\n\u003c/button\u003e\n```\n\n```sass\n.btn {\n  @extend .px15, .h40; // Size\n  @extend .bds-s, .bdw1, .bdr5; // Border style solid, border width 1px and rounded corners\n  @extend .trp-c, .trd200ms; // Color transitions\n\n  \u0026-fb  { @extend .bgc-fb, .c-w, .bdc-tt, .SM_bgc-dfb-hf } // Facebook\n  \u0026-tw  { @extend .bgc-tw, .c-w, .bdc-tt, .SM_bgc-dtw-hf } // Twitter\n}\n```\n\nBenefits of using [`@extend`][1] approach:\n\n- Highly standardized styles. Limited amount of building blocks allows you to have more order in your design.\n\n- Stylesheet compilation time errors. Build fails if unknown atoms are used.\n\n- Easy to remember class names. Atoms naming convention was heavily inspired by [Emmet](http://docs.emmet.io/cheat-sheet/), and most of the time abbreviations are first letters of words that property or value names consist of.\n\n\n## Contents\n\n\n1. [**Naming Conventions**](#naming-conventions)\n\n  - [Value Aliases](#value-aliases)\n  - [Color Values](#color-values)\n  - [Unit-less Properties](#unit-less-properties)\n\n1. [**Breakpoints**](#breakpoints)\n\n1. [**Pseudo-classes and Pseudo-elements**](#pseudos)\n\n1. [**Grid System**](#grid-system)\n\n  - [Containers](#grid-containers)\n  - [Rows](#grid-rows)\n  - [Columns](#grid-columns)\n  - [Column Ordering](#column-ordering)\n\n1. [**Atom Index**](#atom-index)\n\n  - [**Name Pattern**](#name-pattern)\n\n  - [**Background**](#background)  \n     [`background-color`](#background-color)  \n     [`background-attachment`](#background-attachment)  \n     [`background-clip`](#background-clip)  \n     [`background-image`](#background-image)  \n     [`background-origin`](#background-origin)  \n     [`background-repeat`](#background-repeat)  \n     [`background-size`](#background-size)  \n     \n     [`background-position`](#background-position)  \n     [`background-position-x`](#background-position-x)  \n     [`background-position-y`](#background-position-y)  \n     \n     [`fill`](#fill)  \n     \n  - [**Border**](#border)  \n     [`border-color`](#border-color)  \n     [`border-top-color`](#border-color)  \n     [`border-right-color`](#border-color)  \n     [`border-bottom-color`](#border-color)  \n     [`border-left-color`](#border-color)  \n     \n     [`border-width`](#border-width)  \n     [`border-top-width`](#border-width)  \n     [`border-right-width`](#border-width)  \n     [`border-bottom-width`](#border-width)  \n     [`border-left-width`](#border-width)  \n     \n     [`border-style`](#border-style)  \n     [`border-top-style`](#border-style)  \n     [`border-right-style`](#border-style)  \n     [`border-bottom-style`](#border-style)  \n     [`border-left-style`](#border-style)  \n     \n     [`border-radius`](#border-radius)  \n     [`border-top-right-radius`](#border-radius)  \n     [`border-top-left-radius`](#border-radius)  \n     [`border-bottom-right-radius`](#border-radius)  \n     [`border-bottom-left-radius`](#border-radius)  \n  \n  - [**Images**](#images)  \n     [`object-fit`](#object-fit)  \n\n  - [**Transforms**](#transforms)  \n     [`transform`](#transform)  \n\n  - [**Flexible Box Layout**](#flexible-box-layout)  \n     [`flex-direction`](#flex-direction)  \n     [`flex-wrap`](#flex-wrap)  \n     [`flex-grow`](#flex-grow)  \n     [`flex-shrink`](#flex-shrink)  \n     [`flex-basis`](#flex-basis)  \n     [`justify-content`](#justify-content)  \n     [`align-items`](#align-items)  \n     [`align-content`](#align-content)  \n     [`align-self`](#align-self)  \n     [`order`](#order)  \n  \n  - [**Positioning**](#positioning)  \n     [`float`](#float)  \n     [`clear`](#clear)  \n     [`position`](#position)  \n     [`top`](#top-right-bottom-left)  \n     [`right`](#top-right-bottom-left)  \n     [`bottom`](#top-right-bottom-left)  \n     [`left`](#top-right-bottom-left)  \n     [`z-index`](#z-index)  \n  \n  - [**Fonts**](#fonts)  \n     [`font-size`](#font-size)  \n     [`line-height`](#line-height)  \n     [`font-family`](#font-family)  \n     [`font-weight`](#font-weight)  \n     [`font-style`](#font-style)  \n     [`font-variant`](#font-variant)  \n     [`font-size-adjust`](#font-size-adjust)  \n     [`font-stretch`](#font-stretch)  \n     [`-webkit-font-smoothing`](#-webkit-font-smoothing)  \n     [`-moz-osx-font-smoothing`](#-moz-osx-font-smoothing)\n  \n  - [**Transitions**](#transitions)  \n     [`transition-property`](#transition-property)  \n     [`transition-duration`](#transition-duration)  \n     [`transition-timing-function`](#transition-timing-function)  \n\n  - [**Text**](#text)  \n     [`letter-spacing`](#letter-spacing)  \n     [`overflow-wrap`](#overflow-wrap)  \n     [`text-align`](#text-align)  \n     [`text-align-last`](#text-align-last)  \n     [`text-indent`](#text-indent)  \n     [`text-decoration`](#text-decoration)  \n     [`text-transform`](#text-transform)  \n     [`white-space`](#white-space)  \n     [`word-break`](#word-break)  \n     [`word-wrap`](#word-wrap)  \n  \n  - [**Lists and Counters**](#lists-and-counters)  \n     [`list-style`](#list-style)  \n     [`list-style-position`](#list-style-position)  \n     [`list-style-type`](#list-style-type)  \n  \n  - [**Colors**](#colors)  \n     [`color`](#color)  \n     [`opacity`](#opacity)  \n  \n  - [**Box Model**](#box-model)  \n     [`box-sizing`](#box-sizing)  \n     [`height`](#height)  \n     [`width`](#width)  \n     [`margin`](#margin)  \n     [`padding`](#padding)  \n     [`overflow`](#overflow)  \n     [`overflow-x`](#overflow-x)  \n     [`overflow-y`](#overflow-y)  \n     [`-webkit-overflow-scrolling`](#-webkit-overflow-scrolling)  \n     [`visibility`](#visibility)  \n  \n  - [**Page**](#page)  \n     [`page-break-before`](#page-break-before)  \n     [`page-break-inside`](#page-break-inside)  \n     [`page-break-after`](#page-break-after)  \n  \n  - [**User Interface**](#user-interface)  \n     [`cursor`](#cursor)  \n     [`resize`](#resize)  \n     [`text-overflow`](#text-overflow)  \n     [`user-select`](#user-select)  \n     \n  - [**Table**](#table)  \n     [`border-collapse`](#border-collapse)  \n     [`caption-side`](#caption-side)  \n     [`empty-cells`](#empty-cells)  \n     [`table-layout`](#table-layout)  \n     [`vertical-align`](#vertical-align)  \n     \n  - [**Miscellaneous**](#miscellaneous)  \n     [`display`](#display)  \n  \n1. [**License**](#license)\n\n\n## Naming Conventions\n\nIn Quantum CSS every class name consists of four parts in given order:\n\n1. Optional [breakpoint](#breakpoints) name: `SM`, `MD` etc.\n1. Property abbreviation: \u003ca href=\"#border-color\"\u003e\u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etc\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"#border-color\"\u003e\u003ccode\u003e\u003cb\u003ews\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e etc. \n1. Value abbreviation: `w`, `100p`, `360d` etc.\n1. Optional pseudo-class or pseudo-element modifier: `hf`, `h` etc. \n\nYou can configure separators between each parts of class name with following variables:\n\n- `$breakpoint-sep` define separator between breakpoint name and property abbreviation.\n\n- `$literal-sep` and `$ordinal-sep` define separators that are inserted between property name and literal value abbreviation or ordinal one respectively.\n\n- `$pseudo-sep` defines separator between pseudo modifier from value abbreviation.\n\n\n### Value Aliases\n\nAliases for commonly used values:\n\n- `p` → `%`\n- `e` → `em`\n- `x` → `ex`\n- `r` → `rem`\n- `d` → `deg`\n- `t` → `turn`\n\nThese aliases are used instead of full units:\n\n- \u003ca href=\"#width\"\u003e\u003ccode\u003e\u003cb\u003ew\u003c/b\u003e100p\u003c/code\u003e\u003c/a\u003e → `width: 100%`\n- \u003ca href=\"#height\"\u003e\u003ccode\u003eSM_\u003cb\u003emah\u003c/b\u003e42\u003c/code\u003e\u003c/a\u003e → `@media (min-width: 576px) { max-height: 42px }`\n\n\n### Color Values\n\nNames for colors are used fo increase readability. By default, [Tango palette](http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Color_Palette) is used for every color-related atom. You can specify your own palette overriding variables in [`_variables.scss`](scss/_variables.scss).\n\nGreyscale        | Value\n---------------- | ---------\n1. White `w`     | `#fff`\n2. Grey 15% `g1` | `#eeeeec`\n3. Grey 30% `g2` | `#d3d7cf`\n4. Grey 45% `g3` | `#babdb6`\n5. Grey 60% `g4` | `#888a85`\n6. Grey 75% `g5` | `#555753`\n7. Grey 90% `g6` | `#2e3436`\n8. Black `b`     | `#000`\n\nColor             | Light `l` | Medium    | Dark `d`\n----------------- | --------- | --------- | ---------\n 9. Yellow    `y` | `#fce94f` | `#edd400` | `#c4a000`\n10. Orange    `o` | `#fcaf3e` | `#f57900` | `#ce5c00`\n11. Chocolate `c` | `#e9b96e` | `#c17d11` | `#8f5902`\n12. Green     `g` | `#8ae234` | `#73d216` | `#4e9a06`\n13. Navy      `n` | `#729fcf` | `#3465a4` | `#204a87`\n14. Purple    `p` | `#ad7f8a` | `#75507b` | `#5c3566`\n15. Red       `r` | `#ef2929` | `#cc0000` | `#a40000`\n\nCSS-literal colors:\n\n- `cc` → [`currentColor`](https://developer.mozilla.org/en/docs/Web/CSS/color_value#currentColor_keyword)  \n- `t`  → `transparent`\n- `i`  → `inherit`\n\nGenerated atom examples:\n\n- \u003ca href=\"#background-color\"\u003e\u003ccode\u003eSM_\u003cb\u003ebg\u003c/b\u003ec-dg\u003c/code\u003e\u003c/a\u003e → `background-color: #4e9a06` Dark green\n- \u003ca href=\"#border-color\"\u003e\u003ccode\u003e\u003cb\u003ebd\u003c/b\u003erc-w\u003c/code\u003e\u003c/a\u003e → `border-right-color: white`\n- \u003ca href=\"#color\"\u003e\u003ccode\u003eLG_\u003cb\u003ec\u003c/b\u003e-b\u003c/code\u003e\u003c/a\u003e → `color: black`\n\n\n### Unit-less Properties\n\nSome CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:\n\n- \u003ca href=\"#line-height\"\u003e\u003ccode\u003e\u003cb\u003elh\u003c/b\u003e1\u003c/code\u003e\u003c/a\u003e → `line-height: 1`\n- \u003ca href=\"#font-weight\"\u003e\u003ccode\u003e\u003cb\u003ef\u003c/b\u003ew400\u003c/code\u003e\u003c/a\u003e → `font-weight: 400`\n- \u003ca href=\"#opacity\"\u003e\u003ccode\u003e\u003cb\u003eop\u003c/b\u003e37\u003c/code\u003e\u003c/a\u003e → `opacity: 0.37`\n\n## Breakpoints\n\nOne of the most powerful features of Quantum is breakpoint-based media queries.\n\n\n## \u003ca name=\"pseudos\"\u003e\u003c/a\u003ePseudo-classes and Pseudo-elements\n\nYou can configure set of pseudo-classes and pseudo-elements for which atoms are generated via `$pseudos`. To emit disjunction of pseudos use comma-separated list.\n\n```sass\n$pseudos: (hf: (hover, focus));\n\n.c-w-hf:hover,\n.c-w-hf:focus {\n  color: white;\n}\n```\n\nSpace-separated list defines selector conjunction:\n\n```sass\n$pseudos: (eh: empty hover);\n\n.c-w-eh:empty:hover {\n  color: white;\n}\n```\n\nCombine those different list types for precise class targeting:\n\n```sass\n$pseudos: (foo: (active hover, active focus));\n\n.c-w-foo:active:hover,\n.c-w-foo:active:focus {\n  color: white;\n}\n```\n\n\n## Grid System\n\n\n### \u003ca name=\"grid-containers\"\u003e\u003c/a\u003eContainers \u003ccode\u003e\u003cb\u003eg\u003c/b\u003e\u003c/code\u003e\n\nAs well as in [Bootstrap](http://v4-alpha.getbootstrap.com/layout/overview/#containers) Containers are the most basic layout element and are required when using grid system. Use \u003ccode\u003e\u003cb\u003eg\u003c/b\u003e-f\u003c/code\u003e to create a fixed-width centered responsive layout of columns.\n\nWhile containers _can_ be nested, most layouts do not require a nested container.\n\n```html\n\u003cdiv class=\"g g-f\"\u003e\n  \u003c!-- Fixed-width grid conteiner --\u003e\n\u003c/div\u003e\n```\n\nWidths of fixed-width container are stored in `$grid-widths`.\n\n\n### \u003ca name=\"grid-rows\"\u003e\u003c/a\u003eRows \u003ccode\u003e\u003cb\u003eg\u003c/b\u003er\u003c/code\u003e\n\nRows are horizontal groups of columns that ensure your columns are lined up properly.\n\n```html\n\u003cdiv class=\"g g-f\"\u003e\n  \u003cdiv class=\"gr\"\u003e\n    \u003c!-- Place columns here --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### \u003ca name=\"grid-columns\"\u003e\u003c/a\u003eColumns \u003ccode\u003e\u003cb\u003eg\u003c/b\u003ec\u003c/code\u003e\n\nContent should be placed within columns, and only columns may be immediate children of rows.\n\nColumn classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use \u003ccode\u003eSM_\u003cb\u003eg\u003c/b\u003ec4\u003c/code\u003e. You can change number of columns in grid altering [`$grid-col-count`](scss/_variables.scss).\n\nColumn widths are set in percentages, so they’re always fluid and sized relative to their parent element.\n\nColumns have horizontal padding to create the gutters between individual columns. Gutters can be configured per every breakpoint via [`$grid-gutters`](scss/_variables.scss).\n\n```html\n\u003cdiv class=\"g g-f\"\u003e\n  \u003cdiv class=\"gr\"\u003e\n    \u003cdiv class=\"gc12 SM_gc6\"\u003e\n      \u003c!-- Place content here --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### Column Ordering\n\nIn addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.\n\nMove columns to the right using \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eg\u003c/b\u003eo(0…12/1)\u003c/code\u003e classes. These classes increase the left margin of a column by specified number of columns. For example, `MD_go4` moved `MD_gc4` over four columns.\n\nChange the order of columns by relatively shifting them to the left with \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eg\u003c/b\u003esl(0…12/1)\u003c/code\u003e or to the right with \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eg\u003c/b\u003esr(0…12/1)\u003c/code\u003e classes.\n\n```html\n\u003cdiv class=\"g g-f\"\u003e\n  \u003cdiv class=\"gr\"\u003e\n    \u003cdiv class=\"gc12 SM_gc6 SM_go3\"\u003e\n      \u003c!-- Place content here --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Atom Index\n\nValues for each atom are listed in the order they are listed in generated CSS.\n\n\n### Name Pattern\n\n- `(1…10/2)` Range of possible values from `1` to `10` with step `2`.\n- `[breakpoint_]` and `[-pseudo]` Optional [breakpoint](#breakpoints) and [pseudo-element or pseudo-class](#pseudos).\n- `{key}` and `{value}` Placeholders for map key and map value.\n\nExample `[breakpoint_]fw(100…900/100)` expands to `fw100`, `fw200` … `SM_fw100`, `SM_fw200` … `LG_fw900`.\n\n\n### Background\n\n\n#### [`background-color`](https://developer.mozilla.org/en/docs/Web/CSS/background-color)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebg\u003c/b\u003ec{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `background-color: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$background-colors\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`background-attachment`](https://developer.mozilla.org/en/docs/Web/CSS/background-attachment)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ea-f\u003c/code\u003e → `fixed`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ea-s\u003c/code\u003e → `scroll`\n\n\n#### [`background-clip`](https://developer.mozilla.org/en/docs/Web/CSS/background-clip)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ecp-bb\u003c/code\u003e → `border-box`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ecp-pb\u003c/code\u003e → `padding-box`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ecp-cb\u003c/code\u003e → `content-box`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ecp-i\u003c/code\u003e  → `inherit`\n\n\n#### [`background-image`](https://developer.mozilla.org/en/docs/Web/CSS/background-image)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ei-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ei-i\u003c/code\u003e → `inherit`\n\n\n#### [`background-origin`](https://developer.mozilla.org/en/docs/Web/CSS/background-origin)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003eo-bb\u003c/code\u003e → `border-box`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003eo-pb\u003c/code\u003e → `padding-box`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003eo-cb\u003c/code\u003e → `content-box`\n\n\n#### [`background-repeat`](https://developer.mozilla.org/en/docs/Web/CSS/background-repeat)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003er-n\u003c/code\u003e → `no-repeat`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003er-x\u003c/code\u003e → `repeat-x`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003er-y\u003c/code\u003e → `repeat-y`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003er-s\u003c/code\u003e → `space`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003er-r\u003c/code\u003e → `round`\n\n\n#### [`background-size`](https://developer.mozilla.org/en/docs/Web/CSS/background-size)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ez-a\u003c/code\u003e  → `auto`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ez-ct\u003c/code\u003e → `contain`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ez-cv\u003c/code\u003e → `cover`\n\n\n#### [`background-position`](https://developer.mozilla.org/en/docs/Web/CSS/background-position)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-tc\u003c/code\u003e → `top center`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-tl\u003c/code\u003e → `top left`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-cr\u003c/code\u003e → `center right`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-cc\u003c/code\u003e → `center center`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-cl\u003c/code\u003e → `center left`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-br\u003c/code\u003e → `bottom right`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-bc\u003c/code\u003e → `bottom center`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003ep-bl\u003c/code\u003e → `bottom left`\n\n\n#### [`background-position-x`](https://developer.mozilla.org/en/docs/Web/CSS/background-position-x)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epx-r\u003c/code\u003e → `right`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epx-c\u003c/code\u003e → `center`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epx-l\u003c/code\u003e → `left`\n\n\n#### [`background-position-y`](https://developer.mozilla.org/en/docs/Web/CSS/background-position-y)\n\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epy-t\u003c/code\u003e → `top`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epy-c\u003c/code\u003e → `center`\n1. \u003ccode\u003e\u003cb\u003ebg\u003c/b\u003epy-b\u003c/code\u003e → `bottom`\n\n\n#### [`fill`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efi\u003c/b\u003e{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `fill: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$background-colors\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n### Border\n\n\n#### [`border-color`](https://developer.mozilla.org/en/docs/Web/CSS/border-color)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ec{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e  → `border-color: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003exc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003elc{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003erc{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003eyc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etc{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ebc{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003etc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `border-top-color: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ebc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `border-bottom-color: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003erc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `border-right-color: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003elc{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `border-left-color: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$border-colors\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`border-width`](https://developer.mozilla.org/en/docs/Web/CSS/border-width)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ew{key}\u003c/code\u003e  → `border-width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003exw{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003elw{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003erw{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003eyw{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etw{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ebw{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003etw{key}\u003c/code\u003e → `border-top-width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ebw{key}\u003c/code\u003e → `border-bottom-width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003erw{key}\u003c/code\u003e → `border-right-width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003elw{key}\u003c/code\u003e → `border-left-width: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$border-widths\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`border-style`](https://developer.mozilla.org/en/docs/Web/CSS/border-style)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003es{key}\u003c/code\u003e  → `border-style: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003exs{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003els{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ers{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003eys{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ets{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ebs{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ets{key}\u003c/code\u003e → `border-top-style: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ebs{key}\u003c/code\u003e → `border-bottom-style: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ers{key}\u003c/code\u003e → `border-right-style: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003els{key}\u003c/code\u003e → `border-left-style: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$border-styles\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\nBy default, all available border styles are included. Border style atoms are emitted for every breakpoint what can\ncause significant increase of outputted CSS file. Be sure to remove unused border styles in order to reduce file size.\n\n\n\n#### [`border-radius`](https://developer.mozilla.org/en/docs/Web/CSS/border-radius)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003er{key}\u003c/code\u003e   → `border-radius: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003etr{key}\u003c/code\u003e  = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etlr{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etrr{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003err{key}\u003c/code\u003e  = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etrr{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ebrr{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ebr{key}\u003c/code\u003e  = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003eblr{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ebrr{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003elr{key}\u003c/code\u003e  = \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003etlr{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003eblr{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003etrr{key}\u003c/code\u003e → `border-top-right-radius: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003etlr{key}\u003c/code\u003e → `border-top-left-radius: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003ebrr{key}\u003c/code\u003e → `border-bottom-right-radius: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ebd\u003c/b\u003eblr{key}\u003c/code\u003e → `border-bottom-left-radius: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$border-radiuses\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n### Images\n\n\n#### [`object-fit`](https://developer.mozilla.org/en/docs/Web/CSS/object-fit)\n\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-n\u003c/code\u003e  → `none`\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-f\u003c/code\u003e  → `fill`\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-ct\u003c/code\u003e → `contain`\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-cv\u003c/code\u003e → `cover`\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-sd\u003c/code\u003e → `scale-down`\n1. \u003ccode\u003e\u003cb\u003eof\u003c/b\u003e-i\u003c/code\u003e  → `inherit`\n\n\n### Transforms\n\n\n#### [`transform`](https://developer.mozilla.org/en/docs/Web/CSS/transform)\n\n1. \u003ccode\u003e\u003cb\u003ets\u003c/b\u003e-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003ets\u003c/b\u003e-i\u003c/code\u003e → `inherit`\n1. \u003ccode\u003e\u003cb\u003ets\u003c/b\u003er(45d…360/45d)\u003c/code\u003e    → `transform: rotate(45deg)`…`rotate(360deg)`\n1. \u003ccode\u003e\u003cb\u003ets\u003c/b\u003er(-45d…-360/-45d)\u003c/code\u003e → `transform: rotate(-45deg)`…`rotate(-360deg)`\n1. \u003ccode\u003e\u003cb\u003ets\u003c/b\u003es(0…200/25)\u003c/code\u003e       → `transform: scale(0)`…`scale(2)`\n\n\n### Flexible Box Layout\nThese shortcuts are available if [display](#display) atom is included.\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003e-r\u003c/code\u003e  = \u003ca href=\"#display\"\u003e\u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-fx\u003c/code\u003e\u003c/a\u003e, \u003ccode\u003e\u003cb\u003efx\u003c/b\u003ed-r\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003e-rr\u003c/code\u003e = \u003ca href=\"#display\"\u003e\u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-fx\u003c/code\u003e\u003c/a\u003e, \u003ccode\u003e\u003cb\u003efx\u003c/b\u003ed-rr\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003e-c\u003c/code\u003e  = \u003ca href=\"#display\"\u003e\u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-fx\u003c/code\u003e\u003c/a\u003e, \u003ccode\u003e\u003cb\u003efx\u003c/b\u003ed-c\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003e-cr\u003c/code\u003e = \u003ca href=\"#display\"\u003e\u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-fx\u003c/code\u003e\u003c/a\u003e, \u003ccode\u003e\u003cb\u003efx\u003c/b\u003ed-cr\u003c/code\u003e\n\n\n#### [`flex-direction`](https://developer.mozilla.org/en/docs/Web/CSS/flex-direction)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ed-r\u003c/code\u003e  → `row`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ed-rr\u003c/code\u003e → `row-reverse`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ed-c\u003c/code\u003e  → `column`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ed-cr\u003c/code\u003e → `column-reverse`\n\n\n#### [`flex-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/flex-wrap)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ew-n\u003c/code\u003e  → `nowrap`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ew-w\u003c/code\u003e  → `wrap`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003ew-wr\u003c/code\u003e → `wrap-reverse`\n\n\n#### [`flex-grow`](https://developer.mozilla.org/en/docs/Web/CSS/flex-grow)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eg(0…10/1)\u003c/code\u003e → `flex-grow: 0`…`10`\n\n\n#### [`flex-shrink`](https://developer.mozilla.org/en/docs/Web/CSS/flex-shrink)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003es(0…10/1)\u003c/code\u003e → `flex-shrink: 0`…`10`\n\n\n#### [`flex-basis`](https://developer.mozilla.org/en/docs/Web/CSS/flex-basis)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eb-a\u003c/code\u003e   → `auto`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eb-mac\u003c/code\u003e → `max-content`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eb-mic\u003c/code\u003e → `min-content`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eb-fc\u003c/code\u003e  → `fit-content`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efx\u003c/b\u003eb-c\u003c/code\u003e   → `content`\n\n\n#### [`justify-content`](https://developer.mozilla.org/en/docs/Web/CSS/justify-content)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ejc\u003c/b\u003e-fs\u003c/code\u003e → `flex-start`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ejc\u003c/b\u003e-fe\u003c/code\u003e → `flex-end`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ejc\u003c/b\u003e-c\u003c/code\u003e  → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ejc\u003c/b\u003e-sb\u003c/code\u003e → `space-between`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ejc\u003c/b\u003e-sa\u003c/code\u003e → `space-around`\n\n\n#### [`align-items`](https://developer.mozilla.org/en/docs/Web/CSS/align-items)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eai\u003c/b\u003e-fs\u003c/code\u003e → `flex-start`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eai\u003c/b\u003e-fe\u003c/code\u003e → `flex-end`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eai\u003c/b\u003e-c\u003c/code\u003e  → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eai\u003c/b\u003e-bs\u003c/code\u003e → `baseline`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eai\u003c/b\u003e-s\u003c/code\u003e  → `stretch`\n\n\n#### [`align-content`](https://developer.mozilla.org/en/docs/Web/CSS/align-content)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-fs\u003c/code\u003e → `flex-start`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-fe\u003c/code\u003e → `flex-end`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-c\u003c/code\u003e  → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-sb\u003c/code\u003e → `space-between`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-sa\u003c/code\u003e → `space-around`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eac\u003c/b\u003e-s\u003c/code\u003e  → `stretch`\n\n\n#### [`align-self`](https://developer.mozilla.org/en/docs/Web/CSS/align-self)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-a\u003c/code\u003e  → `auto`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-fs\u003c/code\u003e → `flex-start`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-fe\u003c/code\u003e → `flex-end`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-c\u003c/code\u003e  → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-b\u003c/code\u003e  → `baseline`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eas\u003c/b\u003e-s\u003c/code\u003e  → `stretch`\n\n\n#### [`order`](https://developer.mozilla.org/en/docs/Web/CSS/order)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eord\u003c/b\u003e(0…10/1)\u003c/code\u003e → `order: 0`…`10`\n\n\n### Positioning\n\n\n#### [`float`](https://developer.mozilla.org/en/docs/Web/CSS/float)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efl\u003c/b\u003e-l\u003c/code\u003e → `left`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efl\u003c/b\u003e-r\u003c/code\u003e → `right`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003efl\u003c/b\u003e-n\u003c/code\u003e → `none`\n\n\n#### [`clear`](https://developer.mozilla.org/en/docs/Web/CSS/clear)\n\n1. \u003ccode\u003e\u003cb\u003ecl\u003c/b\u003e-l\u003c/code\u003e → `left`\n1. \u003ccode\u003e\u003cb\u003ecl\u003c/b\u003e-r\u003c/code\u003e → `right`\n1. \u003ccode\u003e\u003cb\u003ecl\u003c/b\u003e-b\u003c/code\u003e → `both`\n1. \u003ccode\u003e\u003cb\u003ecl\u003c/b\u003e-n\u003c/code\u003e → `none`\n\n\n#### [`position`](https://developer.mozilla.org/en/docs/Web/CSS/position)\n\n1. \u003ccode\u003e\u003cb\u003epos\u003c/b\u003e-s\u003c/code\u003e → `static`\n1. \u003ccode\u003e\u003cb\u003epos\u003c/b\u003e-a\u003c/code\u003e → `absolute`\n1. \u003ccode\u003e\u003cb\u003epos\u003c/b\u003e-r\u003c/code\u003e → `relative`\n1. \u003ccode\u003e\u003cb\u003epos\u003c/b\u003e-f\u003c/code\u003e → `fixed`\n\n\n#### [`top`](https://developer.mozilla.org/en/docs/Web/CSS/top) [`right`](https://developer.mozilla.org/en/docs/Web/CSS/right) [`bottom`](https://developer.mozilla.org/en/docs/Web/CSS/bottom) [`left`](https://developer.mozilla.org/en/docs/Web/CSS/left)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003e{key}\u003c/code\u003e → `top: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003er\u003c/b\u003e{key}\u003c/code\u003e → `right: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eb\u003c/b\u003e{key}\u003c/code\u003e → `bottom: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003el\u003c/b\u003e{key}\u003c/code\u003e → `left: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$positions\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`z-index`](https://developer.mozilla.org/en/docs/Web/CSS/z-index)\n\n1. \u003ccode\u003e\u003cb\u003ez\u003c/b\u003e(0…10/1)\u003c/code\u003e  → `z-index: 0`…`10`\n1. \u003ccode\u003e\u003cb\u003ez\u003c/b\u003e-a\u003c/code\u003e → `auto`\n1. \u003ccode\u003e\u003cb\u003ez\u003c/b\u003e-i\u003c/code\u003e → `inherit`\n\n\n### Fonts\n\n\n#### [`font-size`](https://developer.mozilla.org/en/docs/Web/CSS/font-size)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-xxs\u003c/code\u003e → `xx-small`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-xs\u003c/code\u003e  → `x-small`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-s\u003c/code\u003e   → `small`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-m\u003c/code\u003e   → `medium`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-l\u003c/code\u003e   → `large`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-xl\u003c/code\u003e  → `x-large`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-xxl\u003c/code\u003e → `xx-large`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-lr\u003c/code\u003e  → `larger`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-sr\u003c/code\u003e  → `smaller`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez-i\u003c/code\u003e   → `inherit`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ez{key}\u003c/code\u003e → `font-size: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$font-sizes\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`line-height`](https://developer.mozilla.org/en/docs/Web/CSS/line-height)\n\n1. \u003ccode\u003e\u003cb\u003elh\u003c/b\u003e-n\u003c/code\u003e → `normal`\n1. \u003ccode\u003e\u003cb\u003elh\u003c/b\u003e-i\u003c/code\u003e → `inherit`\n1. \u003ccode\u003e\u003cb\u003elh\u003c/b\u003e0\u003c/code\u003e  → `0`\n1. \u003ccode\u003e\u003cb\u003elh\u003c/b\u003e1\u003c/code\u003e  → `1`\n1. \u003ccode\u003e\u003cb\u003elh\u003c/b\u003e{key}\u003c/code\u003e → `line-height: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$line-heights\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`font-family`](https://developer.mozilla.org/en/docs/Web/CSS/font-family)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-s\u003c/code\u003e   → `serif`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-ss\u003c/code\u003e  → `sans-serif`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-m\u003c/code\u003e   → `monospace`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-c\u003c/code\u003e   → `cursive`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-f\u003c/code\u003e   → `fantasy`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-i\u003c/code\u003e   → `inherit`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es{key}\u003c/code\u003e → `font-family: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$font-families\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`font-weight`](https://developer.mozilla.org/en/docs/Web/CSS/font-weight)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew(100…900/100)\u003c/code\u003e  → `font-weight: 100`…`900`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew-n\u003c/code\u003e  → `normal`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew-b\u003c/code\u003e  → `bold`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew-br\u003c/code\u003e → `bolder`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew-lr\u003c/code\u003e → `lighter`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003ew-i\u003c/code\u003e  → `inherit`\n\n\n#### [`font-style`](https://developer.mozilla.org/en/docs/Web/CSS/font-style)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-n\u003c/code\u003e  → `normal`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-i\u003c/code\u003e  → `italic`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ef\u003c/b\u003es-o\u003c/code\u003e  → `oblique`\n\n\n#### [`font-variant`](https://developer.mozilla.org/en/docs/Web/CSS/font-variant)\n\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-cl\u003c/code\u003e  → `common-ligatures`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-apc\u003c/code\u003e → `all-petite-caps`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-asc\u003c/code\u003e → `all-small-caps`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-sc\u003c/code\u003e  → `small-caps`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-c\u003c/code\u003e   → `contextual`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-df\u003c/code\u003e  → `diagonal-fractions`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-sf\u003c/code\u003e  → `stacked-fractions`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-hf\u003c/code\u003e  → `historical-forms`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-hl\u003c/code\u003e  → `historical-ligatures`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-i\u003c/code\u003e   → `inherit`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-n\u003c/code\u003e   → `normal`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-tn\u003c/code\u003e  → `tabular-nums`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-pn\u003c/code\u003e  → `proportional-nums`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003ev-pw\u003c/code\u003e  → `proportional-width`\n\n\n#### [`font-size-adjust`](https://developer.mozilla.org/en/docs/Web/CSS/font-size-adjust)\n\n\u003ccode\u003e\u003cb\u003ef\u003c/b\u003eza-n\u003c/code\u003e  → `none`\n\n\n#### [`font-stretch`](https://developer.mozilla.org/en/docs/Web/CSS/font-stretch)\n\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-n\u003c/code\u003e  → `normal`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-uc\u003c/code\u003e → `ultra-condensed`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-ec\u003c/code\u003e → `extra-condensed`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-c\u003c/code\u003e  → `condensed`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-sc\u003c/code\u003e → `semi-condensed`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-se\u003c/code\u003e → `semi-expanded`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-e\u003c/code\u003e  → `expanded`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-ee\u003c/code\u003e → `extra-expanded`\n1. \u003ccode\u003e\u003cb\u003ef\u003c/b\u003est-ue\u003c/code\u003e → `ultra-expanded`\n\n\n#### [`-webkit-font-smoothing`](https://developer.mozilla.org/en/docs/Web/CSS/-webkit-font-smoothing)\n\n1. \u003ccode\u003e\u003cb\u003ewf\u003c/b\u003esm-a\u003c/code\u003e  → `antialiased`\n1. \u003ccode\u003e\u003cb\u003ewf\u003c/b\u003esm-sa\u003c/code\u003e → `subpixel-antialiased`\n1. \u003ccode\u003e\u003cb\u003ewf\u003c/b\u003esm-n\u003c/code\u003e  → `none`\n\n\n#### [`-moz-osx-font-smoothing`](https://developer.mozilla.org/en/docs/Web/CSS/-moz-osx-font-smoothing)\n\n1. \u003ccode\u003e\u003cb\u003emf\u003c/b\u003esm-a\u003c/code\u003e → `auto`\n1. \u003ccode\u003e\u003cb\u003emf\u003c/b\u003esm-g\u003c/code\u003e → `grayscale`\n\n\n### Transitions\n\n\n#### [`transition-property`](https://developer.mozilla.org/en/docs/Web/CSS/transition-property)\n\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003ep-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003ep-a\u003c/code\u003e → `all`\n\n\n#### [`transition-duration`](https://developer.mozilla.org/en/docs/Web/CSS/transition-duration)\n\n\u003ccode\u003e\u003cb\u003etr\u003c/b\u003ed(100ms…1000ms/100ms)\u003c/code\u003e  → `transition-duration: 100ms`…`1000ms`\n\n\n#### [`transition-timing-function`](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function)\n\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-e\u003c/code\u003e   → `ease`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-ei\u003c/code\u003e  → `ease-in`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-eo\u003c/code\u003e  → `ease-out`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-eio\u003c/code\u003e → `ease-in-out`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-l\u003c/code\u003e   → `linear`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-ss\u003c/code\u003e  → `step-start`\n1. \u003ccode\u003e\u003cb\u003etr\u003c/b\u003etf-se\u003c/code\u003e  → `step-end`\n\n\n### Text\n\n\n#### [`letter-spacing`](https://developer.mozilla.org/en/docs/Web/CSS/letter-spacing)\n\n1. \u003ccode\u003e\u003cb\u003els\u003c/b\u003e-n\u003c/code\u003e   → `normal`\n1. \u003ccode\u003e\u003cb\u003els\u003c/b\u003e-i\u003c/code\u003e   → `inherit`\n1. \u003ccode\u003e\u003cb\u003els\u003c/b\u003e{key}\u003c/code\u003e → `letter-spacing: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$letter-spacings\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`overflow-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-wrap)\n\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ew-n\u003c/code\u003e → `normal`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ew-b\u003c/code\u003e → `break-word`\n\n\n#### [`text-align`](https://developer.mozilla.org/en/docs/Web/CSS/text-align)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ea-l\u003c/code\u003e → `left`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ea-c\u003c/code\u003e → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ea-r\u003c/code\u003e → `right`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ea-j\u003c/code\u003e → `justify`\n\n\n#### [`text-align-last`](https://developer.mozilla.org/en/docs/Web/CSS/text-align-last)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003eal-l\u003c/code\u003e → `left`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003eal-c\u003c/code\u003e → `center`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003eal-r\u003c/code\u003e → `right`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003eal-j\u003c/code\u003e → `justify`\n\n\n#### [`text-indent`](https://developer.mozilla.org/en/docs/Web/CSS/text-indent)\n\n\u003ccode\u003e\u003cb\u003et\u003c/b\u003ei{key}\u003c/code\u003e → `text-indent: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$text-indents\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`text-decoration`](https://developer.mozilla.org/en/docs/Web/CSS/text-decoration)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ed-n[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `none`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ed-u[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `underline`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ed-o\u003c/code\u003e → `overline`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003et\u003c/b\u003ed-lt\u003c/code\u003e → `line-through`\n\n\n#### [`text-transform`](https://developer.mozilla.org/en/docs/Web/CSS/text-transform)\n\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003et-c\u003c/code\u003e  → `capitalize`\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003et-u\u003c/code\u003e  → `uppercase`\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003et-l\u003c/code\u003e  → `lowercase`\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003et-n\u003c/code\u003e  → `none`\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003et-fw\u003c/code\u003e → `full-width`\n\n\n#### [`white-space`](https://developer.mozilla.org/en/docs/Web/CSS/white-space)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ews\u003c/b\u003e-n \u003c/code\u003e → `normal`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ews\u003c/b\u003e-p \u003c/code\u003e → `pre`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ews\u003c/b\u003e-nw\u003c/code\u003e → `nowrap`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ews\u003c/b\u003e-pw\u003c/code\u003e → `pre-wrap`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ews\u003c/b\u003e-pl\u003c/code\u003e → `pre-line`\n\n\n#### [`word-break`](https://developer.mozilla.org/en/docs/Web/CSS/word-break)\n\n1. \u003ccode\u003e\u003cb\u003ewo\u003c/b\u003eb-n\u003c/code\u003e  → `normal`\n1. \u003ccode\u003e\u003cb\u003ewo\u003c/b\u003eb-ka\u003c/code\u003e → `keep-all`\n1. \u003ccode\u003e\u003cb\u003ewo\u003c/b\u003eb-ba\u003c/code\u003e → `break-all`\n\n\n#### [`word-wrap`](https://developer.mozilla.org/en/docs/Web/CSS/word-wrap)\n\n1. \u003ccode\u003e\u003cb\u003ewo\u003c/b\u003ew-n\u003c/code\u003e  → `normal`\n1. \u003ccode\u003e\u003cb\u003ewo\u003c/b\u003ew-bw\u003c/code\u003e → `break-word`\n\n\n### Lists and Counters\n\n\n#### [`list-style`](https://developer.mozilla.org/en/docs/Web/CSS/list-style)\n\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003es-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003es-i\u003c/code\u003e → `inherit`\n\n\n#### [`list-style-position`](https://developer.mozilla.org/en/docs/Web/CSS/list-style-position)\n\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003esp-in\u003c/code\u003e → `inside`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003esp-o\u003c/code\u003e  → `outside`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003esp-i\u003c/code\u003e  → `inherit`\n\n\n#### [`list-style-type`](https://developer.mozilla.org/en/docs/Web/CSS/list-style-type)\n\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-n\u003c/code\u003e    → `none`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-d\u003c/code\u003e    → `disc`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-c\u003c/code\u003e    → `circle`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-s\u003c/code\u003e    → `square`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-dc\u003c/code\u003e   → `decimal`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-dclz\u003c/code\u003e → `decimal-leading-zero`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-lr\u003c/code\u003e   → `lower-roman`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-ur\u003c/code\u003e   → `upper-roman`\n1. \u003ccode\u003e\u003cb\u003eli\u003c/b\u003est-i\u003c/code\u003e    → `inherit`\n\n\n### Colors\n\n\n#### [`color`](https://developer.mozilla.org/en/docs/Web/CSS/color)\n\n\u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ec\u003c/b\u003e{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `color: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$colors\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`opacity`](https://developer.mozilla.org/en/docs/Web/CSS/opacity)\n\n\u003ccode\u003e\u003cb\u003eop\u003c/b\u003e(0…100/1)\u003c/code\u003e → `opacity: 0`…`1`\n\n\n### Box Model\n\n\n#### [`box-shadow`](https://developer.mozilla.org/en/docs/Web/CSS/box-shadow)\n\n\u003ccode\u003e\u003cb\u003ebx\u003c/b\u003es{key}[-\u003ca href=\"#pseudos\"\u003epseudo\u003c/a\u003e]\u003c/code\u003e → `box-shadow: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$box-shadows\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`box-sizing`](https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)\n\n1. \u003ccode\u003e\u003cb\u003ebx\u003c/b\u003ez-cb\u003c/code\u003e → `content-box`\n1. \u003ccode\u003e\u003cb\u003ebx\u003c/b\u003ez-bb\u003c/code\u003e → `border-box`\n1. \u003ccode\u003e\u003cb\u003ebx\u003c/b\u003ez-i\u003c/code\u003e  → `inherit`\n\n\n#### [`height`](https://developer.mozilla.org/en/docs/Web/CSS/height)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003eh\u003c/b\u003e{key}\u003c/code\u003e   → `height: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emah\u003c/b\u003e-n\u003c/code\u003e   → `max-height: none`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emah\u003c/b\u003e{key}\u003c/code\u003e → `max-height: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emih\u003c/b\u003e{key}\u003c/code\u003e → `min-height: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$heights\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`width`](https://developer.mozilla.org/en/docs/Web/CSS/width)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ew\u003c/b\u003e{key}\u003c/code\u003e   → `width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emaw\u003c/b\u003e-n\u003c/code\u003e   → `max-width: none`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emaw\u003c/b\u003e{key}\u003c/code\u003e → `max-width: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003emiw\u003c/b\u003e{key}\u003c/code\u003e → `min-width: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$widths\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`margin`](https://developer.mozilla.org/en/docs/Web/CSS/margin)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003e{key}\u003c/code\u003e  → `margin: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003ex-a\u003c/code\u003e   → `margin-left: auto`, `margin-right: auto`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003ex{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003em\u003c/b\u003el{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003em\u003c/b\u003er{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003ey{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003em\u003c/b\u003et{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003em\u003c/b\u003eb{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003et{key}\u003c/code\u003e → `margin-top: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003er{key}\u003c/code\u003e → `margin-right: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003eb{key}\u003c/code\u003e → `margin-bottom: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003em\u003c/b\u003el{key}\u003c/code\u003e → `margin-left: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$margins\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`padding`](https://developer.mozilla.org/en/docs/Web/CSS/padding)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003e{key}\u003c/code\u003e  → `padding: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003ex{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ep\u003c/b\u003el{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ep\u003c/b\u003er{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003ey{key}\u003c/code\u003e = \u003ccode\u003e\u003cb\u003ep\u003c/b\u003et{key}\u003c/code\u003e, \u003ccode\u003e\u003cb\u003ep\u003c/b\u003eb{key}\u003c/code\u003e\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003et{key}\u003c/code\u003e → `padding-top: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003er{key}\u003c/code\u003e → `padding-right: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003eb100p\u003c/code\u003e → `padding-bottom: 100%`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003eb{key}\u003c/code\u003e → `padding-bottom: {value}`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ep\u003c/b\u003el{key}\u003c/code\u003e → `padding-left: {value}`\n\nSpecify mapping in \u003ccode\u003e\u003ca href=\"scss/_variables.scss\"\u003e$paddings\u003c/a\u003e: (key: value)\u003c/code\u003e.\n\n\n#### [`overflow`](https://developer.mozilla.org/en/docs/Web/CSS/overflow)\n\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003e-v\u003c/code\u003e → `visible`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003e-h\u003c/code\u003e → `hidden`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003e-s\u003c/code\u003e → `scroll`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003e-a\u003c/code\u003e → `auto`\n\n\n#### [`overflow-x`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-x)\n\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ex-v\u003c/code\u003e → `visible`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ex-h\u003c/code\u003e → `hidden`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ex-s\u003c/code\u003e → `scroll`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ex-a\u003c/code\u003e → `auto`\n\n\n#### [`overflow-y`](https://developer.mozilla.org/en/docs/Web/CSS/overflow-y)\n\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ey-v\u003c/code\u003e → `visible`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ey-h\u003c/code\u003e → `hidden`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ey-s\u003c/code\u003e → `scroll`\n1. \u003ccode\u003e\u003cb\u003eov\u003c/b\u003ey-a\u003c/code\u003e → `auto`\n\n\n#### [`-webkit-overflow-scrolling`](https://developer.mozilla.org/en/docs/Web/CSS/-webkit-overflow-scrolling)\n\n1. \u003ccode\u003e\u003cb\u003ewov\u003c/b\u003es-t\u003c/code\u003e → `touch`\n1. \u003ccode\u003e\u003cb\u003ewov\u003c/b\u003es-a\u003c/code\u003e → `auto`\n\n\n#### [`visibility`](https://developer.mozilla.org/en/docs/Web/CSS/visibility)\n\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ev\u003c/b\u003e-v\u003c/code\u003e → `visible`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ev\u003c/b\u003e-h\u003c/code\u003e → `hidden`\n1. \u003ccode\u003e[\u003ca href=\"#breakpoints\"\u003ebreakpoint\u003c/a\u003e\\_]\u003cb\u003ev\u003c/b\u003e-c\u003c/code\u003e → `collapse`\n\n\n### Page\n\n\n#### [`page-break-before`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-before)\n\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003eb-a\u003c/code\u003e  → `auto`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003eb-al\u003c/code\u003e → `always`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003eb-av\u003c/code\u003e → `avoid`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003eb-l\u003c/code\u003e  → `left`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003eb-r\u003c/code\u003e  → `right`\n\n\n#### [`page-break-inside`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-inside)\n\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ei-a\u003c/code\u003e  → `auto`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ei-av\u003c/code\u003e → `avoid`\n\n\n#### [`page-break-after`](https://developer.mozilla.org/en/docs/Web/CSS/page-break-after)\n\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ea-a\u003c/code\u003e  → `auto`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ea-al\u003c/code\u003e → `always`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ea-av\u003c/code\u003e → `avoid`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ea-l\u003c/code\u003e  → `left`\n1. \u003ccode\u003e\u003cb\u003epgb\u003c/b\u003ea-r\u003c/code\u003e  → `right`\n\n\n### User Interface\n\n\n#### [`cursor`](https://developer.mozilla.org/en/docs/Web/CSS/cursor)\n\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-a\u003c/code\u003e     → `auto`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-d\u003c/code\u003e     → `default`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-cm\u003c/code\u003e    → `context-menu`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-h\u003c/code\u003e     → `help`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-p\u003c/code\u003e     → `pointer`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-ps\u003c/code\u003e    → `progress`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-w\u003c/code\u003e     → `wait`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-cl\u003c/code\u003e    → `cell`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-c\u003c/code\u003e     → `crosshair`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-t\u003c/code\u003e     → `text`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-al\u003c/code\u003e    → `alias`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-cp\u003c/code\u003e    → `copy`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-m\u003c/code\u003e     → `move`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-nd\u003c/code\u003e    → `no-drop`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-na\u003c/code\u003e    → `not-allowed`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-as\u003c/code\u003e    → `all-scroll`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-cr\u003c/code\u003e    → `col-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-rr\u003c/code\u003e    → `row-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-nr\u003c/code\u003e    → `n-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-er\u003c/code\u003e    → `e-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-sr\u003c/code\u003e    → `s-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-wr\u003c/code\u003e    → `w-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-ner\u003c/code\u003e   → `ne-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-nwr\u003c/code\u003e   → `nw-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-ser\u003c/code\u003e   → `se-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-swr\u003c/code\u003e   → `sw-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-ewr\u003c/code\u003e   → `ew-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-nsr\u003c/code\u003e   → `ns-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-neswr\u003c/code\u003e → `nesw-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-nwser\u003c/code\u003e → `nwse-resize`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-zi\u003c/code\u003e    → `zoom-in`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-zo\u003c/code\u003e    → `zoom-out`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-g\u003c/code\u003e     → `grab`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-gr\u003c/code\u003e    → `grabbing`\n1. \u003ccode\u003e\u003cb\u003ecur\u003c/b\u003e-n\u003c/code\u003e     → `none`\n\n\n#### [`resize`](https://developer.mozilla.org/en/docs/Web/CSS/resize)\n\n1. \u003ccode\u003e\u003cb\u003erz\u003c/b\u003e-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003erz\u003c/b\u003e-b\u003c/code\u003e → `both`\n1. \u003ccode\u003e\u003cb\u003erz\u003c/b\u003e-h\u003c/code\u003e → `horizontal`\n1. \u003ccode\u003e\u003cb\u003erz\u003c/b\u003e-v\u003c/code\u003e → `vertical`\n\n\n#### [`text-overflow`](https://developer.mozilla.org/en/docs/Web/CSS/text-overflow)\n\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003eov-e\u003c/code\u003e → `ellipsis`\n1. \u003ccode\u003e\u003cb\u003et\u003c/b\u003eov-c\u003c/code\u003e → `clip`\n\n\n#### [`user-select`](https://developer.mozilla.org/en/docs/Web/CSS/user-select)\n\n1. \u003ccode\u003e\u003cb\u003eus\u003c/b\u003e-n\u003c/code\u003e → `none`\n1. \u003ccode\u003e\u003cb\u003eus\u003c/b\u003e-t\u003c/code\u003e → `text`\n1. \u003ccode\u003e\u003cb\u003eus\u003c/b\u003e-a\u003c/code\u003e → `all`\n\n\n### Table\n\n\n#### [`border-collapse`](https://developer.mozilla.org/en/docs/Web/CSS/border-collapse)\n\n1. \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ece-c\u003c/code\u003e → `collapse`\n1. \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ece-s\u003c/code\u003e → `separate`\n1. \u003ccode\u003e\u003cb\u003ebd\u003c/b\u003ece-i\u003c/code\u003e → `inherit`\n\n\n#### [`caption-side`](https://developer.mozilla.org/en/docs/Web/CSS/caption-side)\n\n1. \u003ccode\u003e\u003cb\u003ecps\u003c/b\u003e-t\u003c/code\u003e → `top`\n1. \u003ccode\u003e\u003cb\u003ecps\u003c/b\u003e-b\u003c/code\u003e → `bottom`\n\n\n#### [`empty-cells`](https://developer.mozilla.org/en/docs/Web/CSS/empty-cells)\n\n1. \u003ccode\u003e\u003cb\u003eec\u003c/b\u003e-s\u003c/code\u003e → `show`\n1. \u003ccode\u003e\u003cb\u003eec\u003c/b\u003e-h\u003c/code\u003e → `hide`\n\n\n#### [`table-layout`](https://developer.mozilla.org/en/docs/Web/CSS/table-layout)\n\n1. \u003ccode\u003e\u003cb\u003etbl\u003c/b\u003e-a\u003c/code\u003e → `auto`\n1. \u003ccode\u003e\u003cb\u003etbl\u003c/b\u003e-f\u003c/code\u003e → `fixed`\n\n\n#### [`vertical-align`](https://developer.mozilla.org/en/docs/Web/CSS/vertical-align)\n\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-sp\u003c/code\u003e → `super`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-t\u003c/code\u003e  → `top`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-tt\u003c/code\u003e → `text-top`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-m\u003c/code\u003e  → `middle`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-bs\u003c/code\u003e → `baseline`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-b\u003c/code\u003e  → `bottom`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-tb\u003c/code\u003e → `text-bottom`\n1. \u003ccode\u003e\u003cb\u003eva\u003c/b\u003e-sb\u003c/code\u003e → `sub`\n\n\n### Miscellaneous\n\n\n#### [`display`](https://developer.mozilla.org/en/docs/Web/CSS/display)\n\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-n\u003c/code\u003e    → `none`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-b\u003c/code\u003e    → `block`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-fx\u003c/code\u003e   → `flex`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-li\u003c/code\u003e   → `list-item`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-ri\u003c/code\u003e   → `run-in`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-i\u003c/code\u003e    → `inline`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-itb\u003c/code\u003e  → `inline-table`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-ifx\u003c/code\u003e  → `inline-flex`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-ib\u003c/code\u003e   → `inline-block`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tb\u003c/code\u003e   → `table`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tcp\u003c/code\u003e  → `table-caption`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tc\u003c/code\u003e   → `table-column`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tcg\u003c/code\u003e  → `table-column-group`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-thg\u003c/code\u003e  → `table-header-group`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tfg\u003c/code\u003e  → `table-footer-group`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tr\u003c/code\u003e   → `table-row`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-trg\u003c/code\u003e  → `table-row-group`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-tcl\u003c/code\u003e  → `table-cell`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-rb\u003c/code\u003e   → `ruby`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-rbb\u003c/code\u003e  → `ruby-base`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-rbbc\u003c/code\u003e → `ruby-base-container`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-rbt\u003c/code\u003e  → `ruby-text`\n1. \u003ccode\u003e\u003cb\u003ed\u003c/b\u003e-rbtc\u003c/code\u003e → `ruby-text-container`\n\n\n## License\n\nThe code is available under [MIT licence](LICENSE).\n\n[1]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrabr%2Fquantum-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrabr%2Fquantum-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrabr%2Fquantum-css/lists"}