{"id":24073779,"url":"https://github.com/dasx10/less-query","last_synced_at":"2026-05-01T23:34:07.428Z","repository":{"id":115711297,"uuid":"295183358","full_name":"dasx10/less-query","owner":"dasx10","description":"Modified approach to responsive layout","archived":false,"fork":false,"pushed_at":"2021-06-25T22:05:53.000Z","size":2850,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-02-29T04:49:49.998Z","etag":null,"topics":["css","flexible","fron-end","grid-system","less","media","mixin","mq","query","responsive","retina","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/less-query","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dasx10.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-13T15:45:28.000Z","updated_at":"2021-06-25T22:05:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"876d37ab-2ccb-47fd-a0e8-719c52b33dbf","html_url":"https://github.com/dasx10/less-query","commit_stats":null,"previous_names":["dasx10/less-mixin"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dasx10%2Fless-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dasx10%2Fless-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dasx10%2Fless-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dasx10%2Fless-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dasx10","download_url":"https://codeload.github.com/dasx10/less-query/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240941515,"owners_count":19882063,"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":["css","flexible","fron-end","grid-system","less","media","mixin","mq","query","responsive","retina","web"],"created_at":"2025-01-09T17:56:48.139Z","updated_at":"2026-05-01T23:34:07.388Z","avatar_url":"https://github.com/dasx10.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LESS QUERY\n[![Build Status](https://travis-ci.com/dasx10/less-query.svg?branch=master)](https://travis-ci.com/dasx10/less-query)\n----\n**Modified approach to responsive layout**\n----\n\n##### Navigation\n\u003cnav id=\"navigation\"\u003e\n\t\u003cul\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#install\"\u003eInstall\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#standard-grid-system\"\u003eStandard grid system\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#mixins\"\u003eMixins\u003c/a\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\u003ca href=\"#core\"\u003eCore\u003c/a\u003e\n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\u003ca href=\"#display\"\u003eDisplay\u003c/a\u003e\n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\u003ca href=\"#block-model\"\u003eBlock model\u003c/a\u003e\n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\u003ca href=\"#typography\"\u003eTypography\u003c/a\u003e\n\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\n\t\t\t\t\t\u003ca href=\"#other\"\u003eOther\u003c/a\u003e\n\t\t\t\t\u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#experimental-mixins\"\u003eExperimental mixins\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#functions\"\u003eFunctions\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#examples\"\u003eExample\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#recommendation\"\u003eRecommendation\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#overriding-standard-variables\"\u003eOverriding standard variables\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003ca href=\"#faq\"\u003eF.A.Q.\u003c/a\u003e\n\t\t\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/nav\u003e\n\n---\n## Install\n```\nnpm install -D less-query\n```\n\nset the entry point to your file\n\n```\n@import './node_modules/less-query/style.less';\n```\n\n---\n\n\n## Standard grid system\n\n\u003cdetails id=\"grid-system-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tDefault break point\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003ewidth\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003ext\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e320px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eextra tiny\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003eti\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e430px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etiny\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003exs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e540px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eextra small\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003esm\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e720px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003esmall\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emd\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e960px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emedium\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003elg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1140px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003elarge\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003exl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1320px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eextra large\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003ehu\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1530px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003ehuge\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003exh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1680px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eextra huge\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"grid-system-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tDefault grid system setup\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003eparams\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003ecolumns count\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e12\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber of columns in a column\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\u003ca href=\"#offsets-a\"\u003eoffset\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e2em\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eColumn indents\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003econtainer\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1680px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eStandard container width\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"example-grid-system-mixin\"\u003e\n\t\u003csummary\u003eExample grid system mixin\u003c/summary\u003e\n\n\t// input\n\t.grid{\n\t\t.row;\n\t\t\u0026__col{\n\t\t\t.col(12, sm, 6, md, 4, lg, 3);\n\t\t}\n\t}\n\n\t// output\n\t.grid {\n\t\tmargin-left: -15px;\n\t\tmargin-right: -15px;\n\t\tdisplay: flex;\n\t\tflex-flow: row wrap;\n\t}\n\n\t.grid__col {\n\t\tword-wrap: break-word;\n\t\tbox-sizing: border-box;\n\t\tmargin-left: 15px;\n\t\tmargin-right: 15px;\n\t}\n\n\t@media (max-width: 720px) {\n\t\t.grid__col {\n\t\t\twidth: calc(100% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 720px) and (max-width: 960px) {\n\t\t.grid__col {\n\t\t\twidth: calc(50% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 960px) and (max-width: 1140px) {\n\t\t.grid__col {\n\t\t\twidth: calc(33.333333333333336% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 1140px) {\n\t\t.grid__col {\n\t\t\twidth: calc(25% - 30px);\n\t\t}\n\t}\n\u003c/details\u003e\n\n\u003cp\u003eGo back to \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eGo to \u003ca href=\"#overriding-standard-variables\"\u003eoverriding this variables\u003c/a\u003e\u003c/p\u003e\n\n## Mixins\n\n### Core\n\u003cdetails id=\"grid-system-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tBreak point mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003einput\u003c/th\u003e\n\t\t\t\t\u003cth\u003esystem\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.row\u003c/td\u003e\n\t\t\t\t\u003ctd\u003ekeyword\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003erow for columns\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.col\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003ecolumn\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.col-count\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eoverrides the default column count\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.mq\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emedia width builder\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.to\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emedia max width only\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.from\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emedia min width only\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.mqh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003egrid\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emedia height builder\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.container\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size (container)\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.wrp\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emixin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epadding max size (container)\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003cdetails id=\"example-grid-system-mixin\"\u003e\n\t\u003csummary\u003eExample grid system mixin\u003c/summary\u003e\n\n\t// input\n\t.grid{\n\t\t.row;\n\t\t\u0026__col{\n\t\t\t.col(12, sm, 6, md, 4, lg, 3);\n\t\t}\n\t}\n\n\t// output\n\t.grid {\n\t\tmargin-left: -15px;\n\t\tmargin-right: -15px;\n\t\tdisplay: flex;\n\t\tflex-flow: row wrap;\n\t}\n\n\t.grid__col {\n\t\tword-wrap: break-word;\n\t\tbox-sizing: border-box;\n\t\tmargin-left: 15px;\n\t\tmargin-right: 15px;\n\t}\n\n\t@media (max-width: 720px) {\n\t\t.grid__col {\n\t\t\twidth: calc(100% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 720px) and (max-width: 960px) {\n\t\t.grid__col {\n\t\t\twidth: calc(50% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 960px) and (max-width: 1140px) {\n\t\t.grid__col {\n\t\t\twidth: calc(33.333333333333336% - 30px);\n\t\t}\n\t}\n\n\t@media (min-width: 1140px) {\n\t\t.grid__col {\n\t\t\twidth: calc(25% - 30px);\n\t\t}\n\t}\n\u003c/details\u003e\n\t\u003cdetails id=\"grid-s-mix\"\u003e\n\t\u003csummary\u003eExample .mq\u003c/summary\u003e\n\n\t.mq(xs, { .p(1px); color:red }, 1200px, .m(2px));\n\n\t/*\n\t\t@media (min-width: 540px) and (max-width: 1200px) {\n\t\t\t.class-grid {\n\t\t\t\tpadding: 1px;\n\t\t\t\tcolor: red;\n\t\t\t}\n\t\t}\n\n\t\t@media (min-width: 1200px) {\n\t\t\t.class-grid {\n\t\t\t\tmargin: 2px;\n\t\t\t}\n\t\t}\n\t*/\n\u003c/details\u003e\n\u003chr /\u003e\n\n\u003c/details\u003e\n\n\n### Display\n\u003cdetails id=\"grid-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tGrid mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-area\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ga\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-auto-column\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gac\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-auto-row\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gar\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-template\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-template-column\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gtc\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-template-row\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gtr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-column\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gc\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-column-gap\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gcg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-column-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gcs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-column-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gce\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-row\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-row-gap\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.grg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-row-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.grs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-row-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gre\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.grid-gap\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.gg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"flex-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tFlex box mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-basis\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-direction\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxd\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-flow\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxf\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-grow\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-shrink\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.flex-wrap\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fxw\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\n\u003cdetails id=\"align-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tAlign mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.align-content\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ac\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.align-items\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ai\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.align-self\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.as\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"justify-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tJustify mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.justify-content\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.jc\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.justify-items\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ji\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.justify-self\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.js\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\n### Block model\n\u003cdetails id=\"height-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tHeight mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.h\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mih\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"width-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tWidth mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.w\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.miw\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mw\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmw\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"margin-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tMargin mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-top\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-right\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-bottom\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-left\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ml\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.my\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-y-right\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.myr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-y-left\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.myl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-top-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mxt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-bottom-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mxb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-inline\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-il\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-inline-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-ils\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-inline-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-ile\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-block\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-bl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-block-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-bls\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.margin-block-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.m-ble\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample margin mixins\u003c/summary\u003e\n\n\t.m(1rem 2rem);  // margin: 1rem 2rem;\n\t.mt(10px); \t\t// margin-top: 10px;\n\t.mb(10px); \t\t// margin-bottom: 10px;\n\t.ml(10px); \t\t// margin-left: 10px;\n\t.mr(10px); \t\t// margin-right: 10px;\n\n\t.my(5px); \t\t// margin-top: 5px; margin-bottom: 5px;\n\t.mx(5px); \t\t// margin-right: 5px; margin-left: 5px;\n\u003c/details\u003e\n\u003chr /\u003e\n\n\u003c/details\u003e\n\n\u003cdetails id=\"padding-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tPadding mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-top\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-right\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-bottom\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-left\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.py\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.px\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-y-right\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pyr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-y-left\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pyl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-top-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pxt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-bottom-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pxb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-inline\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-il\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-inline-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-ils\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-inline-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-ile\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-block\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-bl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-block-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-bls\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.padding-block-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.p-ble\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample padding mixins\u003c/summary\u003e\n\n\t.p(1rem 2rem);  // padding: 1rem 2rem;\n\t.pt(10px); \t\t// padding-top: 10px;\n\t.pb(10px); \t\t// padding-bottom: 10px;\n\t.pl(10px); \t\t// padding-left: 10px;\n\t.pr(10px); \t\t// padding-right: 10px;\n\n\t.py(5px); \t\t// padding-top: 5px; padding-bottom: 5px;\n\t.px(5px); \t\t// padding-right: 5px; padding-left: 5px;\n\u003c/details\u003e\n\u003chr /\u003e\n\n\u003c/details\u003e\n\n\u003cdetails id=\"border-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tBorder mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.border\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bd\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.border-style\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bds\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.border-color\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bdc\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.border-radius\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bd-rs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"inline-size-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tInline-size mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inline-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.il-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-inline-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.miil-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-inline-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mil-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-inline-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmil-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"block-size-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tBlock-size mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.block-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bl-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-block-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mibl-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-block-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mbl-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-block-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmbl-sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"position-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tPosition mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.a\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.a\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eAll position\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.top\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.right\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.r\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.bottom\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.b\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.left\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.l\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etop + bottom\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eright + left\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.is\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-block\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isbl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-block-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isbls\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-block-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isble\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-inline\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isil\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-inline-start\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isils\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.inset-inline-end\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.isile\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"box-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tBox mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.box-shadow\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bsh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.box-sizing\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\n### Typography\n\u003cdetails id=\"text-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tText mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-align\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ta\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-decoration\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.td\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-indent\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ti\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-shadow\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ts\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-transform\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.tt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.text-overflow\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.tv\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"font-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tFont mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.font\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.f\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.font-style\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fs\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.font-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.fz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.font-weight\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.f\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.font-family\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ff\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"word-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tWord mixins\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.word-break\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.wb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.word-spacing\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ws\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.word-wrap\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ww\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\n### Other\n\u003cdetails id=\"background-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tBackground mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bg\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-attachment\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bga\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-clip\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgcl\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-color\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgc\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-image\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgi\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-origin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgo\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-position\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgp\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-repeat\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgr\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.background-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bgz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"any-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tAny mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\u003cth\u003e\n\t\u003ca href=\"#standard-grid-system\"\u003egrid system\u003c/a\u003e\n\u003c/th\u003e\n\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.line-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.lh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.order\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.od\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.letter-spacing\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ls\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.display\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.d\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.resize\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.rz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.position\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.pos\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.vertical-align\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.va\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.clip\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.cp\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\nGo back to \u003ca href=\"#mixins\"\u003emixins\u003c/a\u003e | \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\n\n## Experimental mixins\n\n\u003cdetails id=\"size-mixin\"\u003e\n\t\u003csummary title=\"height + width\"\u003e\n\t\tSize mixins\n\t\u003c/summary\u003e\n\t\u003cp\u003eblock-size + inline-size\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.sz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.misz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.msz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmsz\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"box-mixin\"\u003e\n\t\u003csummary title=\"height + width\"\u003e\n\t\tSize (width + height) mixins\n\t\u003c/summary\u003e\n\t\u003cp\u003eHeight + width\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.box\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.bx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.min-box\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mibx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.max-box\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mbx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.minmax-box\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.mmbx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"even-mixin\"\u003e\n\t\u003csummary title=\"Align + justify\"\u003e\n\t\tEven mixin\n\t\u003c/summary\u003e\n\t\u003cp\u003eAlign + justify\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003eshort\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.even-content\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ec\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.even-items\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.ei\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.even-self\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e.es\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"triangle-mixin\"\u003e\n\t\u003csummary\u003e\n\t\tTriangle mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003einput\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003eMulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-r\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-b\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-l\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-rt\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.triangle-rb\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"shift-mixin\"\u003e\n\t\u003csummary title=\"margin + padding\"\u003e\n\t\tShift mixins\n\t\u003c/summary\u003e\n\t\u003cp\u003emargin + padding\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-r\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-b\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-l\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.shift-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"out-mixin\"\u003e\n\t\u003csummary title=\"-margin +padding\"\u003e\n\t\tOut mixins\n\t\u003c/summary\u003e\n\t\u003cp\u003e-margin +padding\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-r\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-b\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-l\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.out-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"pull-mixin\"\u003e\n\t\u003csummary title=\"-margin +padding\"\u003e\n\t\tPull mixins\n\t\u003c/summary\u003e\n\t\u003cp\u003e-margin +padding\u003c/p\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-r\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-b\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-l\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-y\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.pull-x\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003e\n\t\tAny experimental mixin\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003emixin\u003c/th\u003e\n\t\t\t\t\u003cth\u003egrid system\u003c/th\u003e\n\t\t\t\t\u003cth\u003emulti line\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.reset\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enormalize\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.round\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eborder-radius: 50%;\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e.circle\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003efalse\u003c/td\u003e\n\t\t\t\t\u003ctd\u003ecircle\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"pxrt\"\u003e\n\t\u003csummary\u003e\n\t\tPixel ratio\n\t\u003c/summary\u003e\n\t\u003cp\u003eMixin: .pxrt()\u003c/p\u003e\n\t\u003cp\u003eParams: pixel ration (number) or mixin\u003c/p\u003e\n\n\t.pxrt(\n\t\t1, { background-image:url('1.webp') },\n\t\t2, { background-image:url('2.webp') },\n\t\t3, { background-image:url('3.webp') }\n\t);\n\t// 1x upload only 1.webp\n\t// retina 2x upload only 2.webp\n\t// retina 3x upload only 3.webp\n\u003c/details\u003e\n\n\n\nGo back to \u003ca href=\"#mixins\"\u003e mixins\u003c/a\u003e | \u003ca href=\"#experimental-mixins\"\u003eexperimental mixins\u003c/a\u003e | \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\n\n## Functions\n\n\u003cdetails id=\"flexible-function\"\u003e\n\t\u003csummary\u003e\n\t\tFlexible function\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003efirst param *\u003c/th\u003e\n\t\t\t\t\u003cth\u003esecond param *\u003c/th\u003e\n\t\t\t\t\u003cth\u003enext params\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003efw\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin-width, max-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eadapts to width\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003efh\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin-height, max-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eadapts to height\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003efmin\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin-size, max-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eadapts to min height or width desktop size\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003efmax\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin-size, max-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eadapts to max height or width desktop size\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003efd\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emax size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003emin-width, min-height, max-width, max-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eadapts to desktop size\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample\u003c/summary\u003e\n\n\t// flexible font\n\t.fz(fw(12px, 20px)); // -\u003e font-size: calc(10.4px + 0.5vw);\n\u003c/details\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003e\n\t\tDefault params (next params)\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003evalue\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emin-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e240px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emin-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e320px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emax-height\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1080px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emax-width\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1920px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emin-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e320px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003emax-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e1920px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\t\u003chr /\u003e\n\u003c/details\u003e\n\u003cdetails id=\"converter-function\"\u003e\n\t\u003csummary\u003e\n\t\tConverter unit function\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003efirst param *\u003c/th\u003e\n\t\t\t\t\u003cth\u003esecond param\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoEm\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber params\u003c/td\u003e\n\t\t\t\t\u003ctd\u003ethe default font-size of this block\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to em (If the font-size is already set for the block. The second parameter is optional. Not applicable if the font-size in the block is set in ЕМ) (If you did not specify the parameter and the parameter was not found. The font value for root will be taken)\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoRem\u003c/td\u003e\n\t\t\t\t\u003ctd\u003enumber params\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault :root or html font-size\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to rem (unless you specify 2 parameter. The function will try to find it automatically. if the value cannot be found, the default value is 16px)\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoP\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epx unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to %\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoW\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epx unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to vw\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoH\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epx unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to vh\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoM\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epx unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to vmax\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoMi\u003c/td\u003e\n\t\t\t\t\u003ctd\u003epx unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert pixel to vmin\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003etoPx\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eany number unit\u003c/td\u003e\n\t\t\t\t\u003ctd\u003edefault width layout\u003c/td\u003e\n\t\t\t\t\u003ctd\u003econvert unit to px\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003e\n\t\tExample\n\t\u003c/summary\u003e\n\n\ttoEm(16); \t\t   // 1em;\n\ttoPx(10%, 1920px);  // 192px;\n\ttoP(20px, 1920px); // 1.0416666666666665%;\n\n\t.pt(toEm(16)); \t   // padding-top: 1em;\n\u003c/details\u003e\n\t\u003chr /\u003e\n\u003c/details\u003e\n\n\u003cdetails id=\"console-function\"\u003e\n\t\u003csummary\u003e\n\t\tConsole function\n\t\u003c/summary\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003ename\u003c/th\u003e\n\t\t\t\t\u003cth\u003einput or type\u003c/th\u003e\n\t\t\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003econsole-log\u003c/td\u003e\n\t\t\t\t\u003ctd\u003evaraiable | unit | params | string ...\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eoutput from console\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003econsole-dir\u003c/td\u003e\n\t\t\t\t\u003ctd\u003evaraiable | unit | params | string ...\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eoutput from console full information\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003econsole-error\u003c/td\u003e\n\t\t\t\t\u003ctd\u003evaraiable | unit | params | string ...\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eoutput from console (red output)\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/details\u003e\n\n\nGo back to \u003ca href=\"#functions\"\u003efunctions\u003c/a\u003e | \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\n\n## Examples\n\n\u003cdetails\u003e\n\t\u003csummary\u003eExample mixin with grid\u003c/summary\u003e\n\n\t// input\n\t.class{\n\t\t.px(1px, xs, 2px, sm, 3px);\n\t}\n\n\t// output\n\t@media (min-width: 45em) {\n\t\t.class {\n\t\t\tpadding-left: 3px;\n\t\t\tpadding-right: 3px;\n\t\t}\n\t}\n\n\t@media (max-width: 33.75em) {\n\t\t.class {\n\t\t\tpadding-left: 1px;\n\t\t\tpadding-right: 1px;\n\t\t}\n\t}\n\n\t@media (min-width: 33.75em) and (max-width: 45em) {\n\t\t.class {\n\t\t\tpadding-left: 2px;\n\t\t\tpadding-right: 2px;\n\t\t}\n\t}\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eExample multi line\u003c/summary\u003e\n\n\t// input\n\t.shift {\n\t\t.mx(1px 2px);\n\t\t.my(10px 5px, sm, 8px);\n\t}\n\n\t// output\n\t.shift {\n\t\tmargin-right: 1px;\n\t\tmargin-left: 2px;\n\t}\n\n\t@media (min-width: 45em) {\n\t\t.shift {\n\t\t\tmargin-top: 8px;\n\t\t\tmargin-bottom: 8px;\n\t\t}\n\t}\n\n\t@media (max-width: 45em) {\n\t\t.shift {\n\t\t\tmargin-top: 10px;\n\t\t\tmargin-bottom: 5px;\n\t\t}\n\t}\n\u003c/details\u003e\n\n\n## Recommendation\n\n\u003cdetails\u003e\n\t\u003csummary\u003eif the property is still missing, then you can create your own mix and use it like this\u003c/summary\u003e\n\n\t.myMix(@params){\n\t\t.c(lighten(@params));\n\t\t.bgc(darken(@params));\n\t}\n\n\t.mq(\n\t\tsm,     .myMix(darkred),\n\t\t1280px, .myMix(#000)\n\t);\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eHow not recommended to use\u003c/summary\u003e\n\n\t.mq(\n\t\t{.px(xs, 10px, sm, 20px);},\n\t\tmd,\n\t\t{.my(sm, 5px, md, 12px, lg, auto);}\n\t)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eHow to use it correctly \u003cstrong\u003e(example #1)\u003c/strong\u003e\u003c/summary\u003e\n\n\t.px(xs, 10px, sm, 20px);\n\t.my(sm, 5px, md, 12px, lg, auto);\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eHow to use it correctly \u003cstrong\u003e(example #2)\u003c/strong\u003e\u003c/summary\u003e\n\n\t.mq(\n\t\txs, .px(10px),\n\t\tsm, .px(20px)\n\t);\n\n\t.mq(\n\t\tsm, .my(5px),\n\t\tmd, .my(12px),\n\t\tlg, .my(auto)\n\t);\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eHow to use it correctly \u003cstrong\u003e(example #3)\u003c/strong\u003e\u003c/summary\u003e\n\n\t.mq(\n\t\txs, .px(10px),\n\t\tsm, {\n\t\t\t.px(20px);\n\t\t\t.my(12px);\n\t\t},\n\t\tmd, .my(12px),\n\t\tlg, .my(auto)\n\t);\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eRecommendations for use media query\u003c/summary\u003e\n\t\u003cp\u003eWe strongly recommend that your media mixin starts with a parameter and ends with a parameter.\u003c/p\u003e\n\t\u003cp\u003eThis does not mean that you are using it incorrectly. But this is a signal that you are most likely doing something wrong.\u003c/p\u003e\n\t\u003cp\u003e\u003c/p\u003e\n\t\u003cdetails\u003e\n\t\t\u003csummary\u003eExample of correct use\u003c/summary\u003e\n\t\t\u003cpre\u003e\n\t\t\t.mq(.p(5px), xs, .p(10px));\n\t\t\t.m(1rem, xs, 1.5rem);\n\t\t\u003c/pre\u003e\n\t\u003c/details\u003e\n\t\u003cdetails\u003e\n\t\t\u003csummary\u003eAn example of a possibly incorrect use\u003c/summary\u003e\n\t\t\u003cpre\u003e\n\t\t\t.mq(xs, .p(10px), sm, .p(5px), md);\n\t\t\t.m(xs, 1.5rem, sm, 2rem, md);\n\t\t\u003c/pre\u003e\n\t\u003c/details\u003e\n\t\u003chr /\u003e\n\u003c/details\u003e\n\n\u003cp\u003eGo back to \u003ca href=\"#recommendation\"\u003erecommendation\u003c/a\u003e | \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eGo to \u003ca href=\"#example\"\u003eexample\u003c/a\u003e\u003c/p\u003e\n\n## Overriding standard variables\n**These settings are optional, but you can change the default mixin behavior.**\n\n\u003cdetails\u003e\n\t\u003csummary\u003e\u003cstrong\u003eExample of installation in the main file\u003c/strong\u003e\u003c/summary\u003e\n\t\u003cem\u003eCreate a file for variables. For example, at the root of the data.less directory. And register the file after registering the library.\u003c/em\u003e\n\n\t@import './node_modules/less-query/style.less';\n\t@import './data.less';\n\u003c/details\u003e\n\u003cdetails\u003e\n\t\u003csummary\u003e\u003cstrong\u003eReassigning Variables \u003cem\u003e(example data.less file)\u003c/em\u003e\u003c/strong\u003e\u003c/summary\u003e\n\t\u003cem\u003eUse parameters in your data.less file\u003c/em\u003e\n\n\t// BREAK POINTS\n\n\t@breaks:{\n\t\t@xl : 1440px;\n\t\t@lg : 1200px;\n\t\t@md : 960px;\n\t\t@sm : 720px;\n\t\t@xs : 540px;\n\t}\n\n\t// ANY GRID\n\n\t@number-of-columns: 24;\n\t@width-wrapper : 1440px;\n\n\t// OFFSET\n\n\t@offset: 1em;\n\t@offset-one-side: @offset / 2;\n\t@offset-one-deny: @offset-one-side * -1;\n\n\t@offset-x: @offset;\n\t@offset-one-side-x:  @offset-x / 2;\n\t@offset-one-deny-x:  @offset-one-side-x * -1;\n\n\t@offset-left: @offset-x;\n\t@offset-one-side-left: @offset-left / 2;\n\t@offset-one-deny-left: @offset-one-side-left * -1;\n\n\t@offset-right: @offset-x;\n\t@offset-one-side-right: @offset-right / 2;\n\t@offset-one-deny-right: @offset-one-side-right * -1;\n\n\t@offset-y: @offset;\n\t@offset-one-side-y:  @offset-y / 2;\n\t@offset-one-deny-y:  @offset-one-side-y * -1;\n\n\t@offset-top: @offset-y;\n\t@offset-one-side-top: @offset-top / 2;\n\t@offset-one-deny-top: @offset-one-side-top * -1;\n\n\t@offset-bottom: @offset-y;\n\t@offset-one-side-bottom: @offset-bottom / 2;\n\t@offset-one-deny-bottom: @offset-one-side-bottom * -1;\n\n\t// SHIFT\n\n\t@default-margin: \t\tauto;\n\t@default-margin-x: \t\t@default-margin;\n\t@default-margin-left: \t@default-margin-x;\n\t@default-margin-right:  @default-margin-x;\n\t@default-margin-y: \t\t@default-margin;\n\t@default-margin-top: \t@default-margin-y;\n\t@default-margin-bottom: @default-margin-y;\n\n\t@default-padding: \t\t auto;\n\t@default-padding-x: \t @default-padding;\n\t@default-padding-left: \t @default-padding-x;\n\t@default-padding-right:  @default-padding-x;\n\t@default-padding-y: \t @default-padding;\n\t@default-padding-top: \t @default-padding-y;\n\t@default-padding-bottom: @default-padding-y;\n\u003c/details\u003e\n\u003cdetails\u003e\n\t\u003csummary\u003e\u003cstrong\u003eIf you need dynamic offset.\u003c/strong\u003e\u003c/summary\u003e\n\t\u003cp\u003e\n\t\tYou can also set them in your \u003ca href=\"#overriding-standard-variables\" id=\"offsets-a\"\u003esettings file\u003c/a\u003e.\n\t\tVariable offsets will be automatically inserted into the \u003ca href=\"#standard-grid-system\"\u003ecolumn system\u003c/a\u003e.\n\t\u003c/p\u003e\n\t\u003cp\u003eWe strongly recommend using it as an exception.\u003c/p\u003e\n\t\u003cp\u003eIf you want the same offsets on all sides. Then use\u003c/p\u003e\n\t\u003cpre\u003e\n\t\t@offset-var: my offset;\n\t\u003c/pre\u003e\n\t\u003cp\u003eIf you need different horizontal and vertical offset. Then use these options.\u003c/p\u003e\n\t\u003cpre\u003e\n\t\t@offset-var-x: my offset x;\n\t\t@offset-var-y: my offset y;\n\t\u003c/pre\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample: @offset-var: 1em;\u003c/summary\u003e\n\n\t:root {\n\t\t--offset: \t1em;\n\t\t--offset-x: var(--offset);\n\t\t--offset-y: var(--offset);\n\t\t--offset-l: var(--offset-x);\n\t\t--offset-r: var(--offset-x);\n\t\t--offset-t: var(--offset-y);\n\t\t--offset-b: var(--offset-y);\n\n\t\t--offset-one-side:   calc(var(--offset) / 2);\n\t\t--offset-one-side-x: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-y: calc(var(--offset-y) / 2);\n\t\t--offset-one-side-l: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-r: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-t: calc(var(--offset-y) / 2);\n\t\t--offset-one-side-b: calc(var(--offset-y) / 2);\n\t}\n\u003c/details\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample: @offset-var-x: 1em;\u003c/summary\u003e\n\n\t:root {\n\t\t--offset-x: 1em;\n\t\t--offset-l: var(--offset-x);\n\t\t--offset-r: var(--offset-x);\n\t\t--offset-one-side-l: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-r: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-x: calc(var(--offset-x) / 2);\n\t}\n\u003c/details\u003e\n\t\u003cdetails\u003e\n\t\u003csummary\u003eExample: @offset-var-x: 1em; @offset-var-y: 2em;\u003c/summary\u003e\n\n\t:root {\n\t\t--offset-x: 1em;\n\t\t--offset-l: var(--offset-x);\n\t\t--offset-r: var(--offset-x);\n\t\t--offset-one-side-l: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-r: calc(var(--offset-x) / 2);\n\t\t--offset-one-side-x: calc(var(--offset-x) / 2);\n\t\t--offset-y: 2em;\n\t\t--offset-t: var(--offset-y);\n\t\t--offset-b: var(--offset-y);\n\t\t--offset-one-side-t: calc(var(--offset-y) / 2);\n\t\t--offset-one-side-b: calc(var(--offset-y) / 2);\n\t\t--offset-one-side-y: calc(var(--offset-y) / 2);\n\t}\n\u003c/details\u003e\n\u003c/details\u003e\n\nGo back to \u003ca href=\"#overriding-standard-variables\"\u003eOverriding standard variables\u003c/a\u003e | \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\n\n---\n\n## F.A.Q.\n\n\u003cdetails\u003e\n\t\u003csummary\u003eMobile first or desktop first?\u003c/summary\u003e\n\t\u003cp\u003ethis library does not take a mobile-first approach. It also does not use a desktop-centric approach. But there is an opportunity to apply one or another approach in the library. Read the instructions carefully. The library combines both approaches.\u003c/p\u003e\n\t\u003ch4\u003eBenefits of this approach\u003c/h4\u003e\n\t\u003cp\u003eFaster rendering speed\u003c/p\u003e\n\t\u003cp\u003e\u003ci\u003eSince you don't need to apply styles and then overwrite them\u003c/i\u003e\u003c/p\u003e\n\t\u003cp\u003eSince you don't need to apply styles and then overwrite them\u003c/p\u003e\n\t\u003cp\u003eYou don't have to think about which approach to use.\u003c/p\u003e\n\t\u003cp\u003e\u003ci\u003esince the hybrid approach is backward compatible with any of the approaches\u003c/i\u003e\u003c/p\u003e\n\t\u003cbr /\u003e\n\t\u003ch4\u003eDisadvantages of this approach\u003c/h4\u003e\n\t\u003cp\u003eincreases file size almost insignificantly\u003c/p\u003e\n\t\u003cp\u003e\u003ci\u003edue to the use of both the minimum and maximum value\u003c/i\u003e\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eDocumentation in another language?\u003c/summary\u003e\n\t\u003cp\u003eThere is currently no documentation in other languages.Work in progress. If you would like to help us translate, you can send a pull request to the author.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eYour library won't start!\u003c/summary\u003e\n\t\u003cp\u003ePlease check your version node js. - Tested and works correctly since version 14\u003c/p\u003e\n\t\u003cp\u003echeck your transpiler `less` - the library was tested as with a regular transpiler. Same thing via 'webpack' 'gulp'\u003c/p\u003e\n\t\u003cp\u003eCheck if the library is connected correctly\u003c/p\u003e\n\t\u003cp\u003eYou are trying to run the library through the browser? This does not work. You need node js to work\u003c/p\u003e\n\t\u003cp\u003eI checked everything and tried everything. But still doesn't work - Please write to the author about this problem. Preferably informative with screenshots. So that we can help you\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eThe library is too big - what's the problem?\u003c/summary\u003e\n\t\u003cp\u003eDon't worry about it - your latest kit will only get what you need.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eMy bundle is too big.\u003c/summary\u003e\n\t\u003cp\u003eTo reduce the size of the bundle, we recommend using minifiers in conjunction with the library to combine media query.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\t\u003csummary\u003eDo you have any suggestions for the library?\u003c/summary\u003e\n\t\u003cp\u003ePlease write to the author or send a pull request. We will be glad to consider your suggestions.\u003c/p\u003e\n\u003c/details\u003e\n\nGo back to \u003ca href=\"#navigation\"\u003enavigation\u003c/a\u003e\n\n***If you find a bug or have suggestions for improving the system, i will be glad to your feedback.***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdasx10%2Fless-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdasx10%2Fless-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdasx10%2Fless-query/lists"}