{"id":28415178,"url":"https://github.com/hokid/modori","last_synced_at":"2026-04-27T08:31:25.409Z","repository":{"id":57300628,"uuid":"119078092","full_name":"Hokid/modori","owner":"Hokid","description":"CSS helpers that help you styling on the fly🚀","archived":false,"fork":false,"pushed_at":"2018-01-31T12:22:35.000Z","size":283,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T08:06:02.584Z","etag":null,"topics":["css","css-library","fast","frontend","helpers","lib","sass","style","stylesheets","utils","web","website"],"latest_commit_sha":null,"homepage":null,"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/Hokid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-26T16:51:36.000Z","updated_at":"2018-08-03T13:55:14.000Z","dependencies_parsed_at":"2022-09-11T17:22:13.467Z","dependency_job_id":null,"html_url":"https://github.com/Hokid/modori","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Hokid/modori","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fmodori","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fmodori/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fmodori/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fmodori/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hokid","download_url":"https://codeload.github.com/Hokid/modori/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hokid%2Fmodori/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261863170,"owners_count":23221503,"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","css-library","fast","frontend","helpers","lib","sass","style","stylesheets","utils","web","website"],"created_at":"2025-06-03T13:46:07.180Z","updated_at":"2026-04-27T08:31:25.352Z","avatar_url":"https://github.com/Hokid.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"343\" height=\"176\" src=\"https://raw.githubusercontent.com/Hokid/modori/master/static/logo.png\" alt=\"Mori logo\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eCSS helpers that help you styling on the fly🚀\u003c/p\u003e\n\n# Installing\n\n```bash\nnpm install -S modori\n```\n\n[Playground](https://codepen.io/Hokid/pen/wyaoBv)\n\n# Examples\n\nHTML\n```HTML\n\u003cul m-mr=\"1vg\"\u003e\n  \u003cli\u003e1\u003c/li\u003e\n  \u003cli\u003e2\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nStyles\n```CSS\n[m-mr~=\"1vg\"] \u003e * + * {\n  margin-top: 24px;\n}\n```\n\nHTML\n```HTML\n\u003ch1 m-fnt=\"0.5s!\" m-tal=\"ce\"\u003e\u003c/h1\u003e\n```\n\nStyles\n```CSS\n[m-fnt~=\"0.5s\"] {\n  font-size: 8px !important;\n}\n\n[m-tal~=\"ce\"] {\n  text-align: center;\n}\n```\n\nHTML\n```HTML\n\u003cp m-pd=\"1.25 0.5b!\"\u003eText\u003c/p\u003e\n```\n\nStyles\n```CSS\n[m-pd~=\"1.25\"] {\n  padding: 32px;\n}\n\n[m-pd~=\"0.5b!\"] {\n  padding-bottom: 12px !important;\n}\n```\n\n# Notation\n\nAttribute name format for properties: `m-[shorthand name]`. Where `[shorthand name]` is any shorthand name of css property.\n\n```\nm-pd // padding\nm-mr // margin\nm-tal // text-align\n```\n\nAttribute name format for utilities : `m-utils`.\n```\nm-utils=\"utils1\"\nm-utils=\"utils1 utils2\"\n```\n\nGeneral value naming format : `[label]`. Where `[lable]` any label that present value.\n\n```\nm-mr=\"1t\" // margin-top: 24px\nm-mr=\"0.5t\" // margin-top: 12px\nm-mr=\"-1.5t\" // margin-top: -36px\nm-mr=\"0.75t 1b\" // margin-top: 18px; margin-bottom: 24px;\n```\nName format for values with `!important` flag: `[label]!`.\n```\nm-mr=\"1t!\" // margin-top: 24px !important\n```\n\n# Helpers\n\n  * [Properties](#properties)\n  * [Utilites](#utilites)\n  \n# Properties\n  \nEach section contain description of helper.\n  \nSingle value: `yes` - mean that value of attribute may be only one.\n \nSingle value: `no` - mean that value of attribute may be array of values.\n  \nFor example, If \"single value\" is `yes`, then this construction is wrong: `m-di=\"bl ab\"`, but this is correct: `m-di=\"bl\"`. If \"single value\" is `no`, then `m-di=\"bl ab\"` is correct and this `m-di=\"bl\"`.\n\nSeveral helpers have special value shorthand format. One of them is `[multiplier][param]`.  Where `[multiplier]` is number(*1, 1.25, 3.5*). For calculation value of property just multiply `[multiplier]` by the base value, where base value by default is **24px**. For example, if `[multipler]` is *0.5*, then value will be *0.5 * 24px = 12px*, it\\`s simple. `[param]` is parameter or side, for example, `m-mr=\"0.5t\"`(`margin-top: 12px`), where `t` is shorthand for top side.\n \n For text value format is `[text value shorthand]:[param]`, for example, `auto:t`.\n \n  * [display](#display)\n  * [position](#position)\n  * [float](#float)\n  * [z-index](#z-index)\n  * [margin](#margin)\n  * [padding](#padding)\n  * [font](#font)\n  * [line-height](#line-height)\n  * [text-align](#text-align)\n\n## display  \n\n * shorthand: `di`\n * path scss: `scss/display/all.scss`\n * path css: `css/display/all.css`\n * single value: `yes`\n \nValue : shorthand:\n  * `block`: `bl`\n  * `inline`: `in`\n  * `inline-block`: `inbl`\n  * `table`: `ta`\n  * `table-row`: `tar`\n  * `table-cell`: `tac`\n  * `flex`: `fl`\n  * `none`: `none`\n \n## position  \n\n * shorthand: `pos`\n * path scss: `scss/position/all.scss`\n * path css: `css/position/all.css`\n * single value: `yes`\n \nValue : shorthand:\n  * `absolute`: `ab`\n  * `static`: `st`\n  * `relative`: `re`\n  * `fixed`: `fi`\n   \n## float  \n\n * shorthand: `flt`\n * path scss: `scss/float/all.scss`\n * path css: `css/float/all.css`\n * single value: `yes`\n \nValue : shorthand:\n  * `left`: `le`\n  * `right`: `ri`\n  * `none`: `none`\n\n \n## z-index  \n\n * shorthand: `z`\n * path scss: `scss/z-index/all.scss`\n * path css: `css/z-index/all.css`\n * single value: `yes`\n \nValue : shorthand:\n  * `9999`: `max`\n  * `-1`: `-1`\n  * `0`: `0`\n  * `1`: `1`\n  * `2`: `2`\n  * `3`: `3`\n  * `4`: `4`\n  * `5`: `5`\n  * `6`: `6`\n  * `7`: `7`\n  * `8`: `8`\n  * `9`: `9`\n  * `10`: `10`\n\n## margin\n\n * shorthand: `mr`\n * paths scss:\n    * `scss/margin/all.scss` - all\n    * `scss/margin/short.scss` - margin\n    * `scss/margin/top.scss` - margin-top\n    * `scss/margin/left.scss` - margin-left\n    * `scss/margin/right.scss` - margin-right\n    * `scss/margin/bottom.scss` - margin-bottom\n    * `scss/margin/vertical.scss` - vertical margins\n    * `scss/margin/horizontal.scss` - horizontal margins\n    * `scss/margin/vgaps.scss` - vertical gaps\n    * `scss/margin/hgaps.scss` - horizontal gaps\n * paths css:\n    * `css/margin/all.css` - all\n    * `css/margin/short.css` - margin\n    * `css/margin/top.css` - margin-top\n    * `css/margin/left.css` - margin-left\n    * `css/margin/right.css` - margin-right\n    * `css/margin/bottom.css` - margin-bottom\n    * `css/margin/vertical.css` - vertical margins\n    * `css/margin/horizontal.css` - horizontal margins\n    * `css/margin/vgaps.css` - vertical gaps\n    * `css/margin/hgaps.css` - horizontal gaps\n * single value: `no`\n\nValue : `[multiplier]` or value shorthand:\n  * `0: `: `0`\n  * `6px: `: `0.25`\n  * `12px: `: `0.5`\n  * `18px: `: `0.75`\n  * `24px: `: `1`\n  * `30px: `: `1.25`\n  * `36px: `: `1.5`\n  * `42px: `: `1.75`\n  * `48px: `: `2`\n  * `54px: `: `2.25`\n  * `60px: `: `2.5`\n  * `66px: `: `2.75`\n  * `72px: `: `3`\n  * `78px: `: `3.25`\n  * `84px: `: `3.5`\n  * `90px: `: `3.75`\n  * `96px: `: `4`\n  * `102px: `: `4.25`\n  * `108px: `: `4.5`\n  * `114px: `: `4.75`\n  * `120px: `: `5`\n  * `126px: `: `5.25`\n  * `132px: `: `5.5`\n  * `138px: `: `5.75`\n  * `144px: `: `6`\n  * `auto: `: `auto`\n\nValues have is\\`s negative variant: `m-mr=\"-0.5t!\"`\n\nProperty : `[param]` shorthand\n  * `margin-top`: `t`\n  * `margin-left`: `l`\n  * `margin-right`: `r`\n  * `margin-bottom`: `b`\n  * `margin`: omitted, `m-mr=\"0.5\"`\n  * `margin-top margin-bottom`: `v`\n  * `margin-left margin-right`: `h`\n\nSpecial shorthands: `vg` and `hg`.\n\n```HTML\n\u003cul m-mr=\"1vg\"\u003e\n  \u003cli\u003e1\u003c/li\u003e\n  \u003cli\u003e2\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nStyles\n```CSS\n[m-mr~=\"1vg\"] \u003e * + * {\n  margin-top: 24px;\n}\n```\n\nExamples\n```\nm-mr=\"0.5t 0.5l 0.5r 0.5b\"\nm-mr=\"0.5t 1l! 1r! 0.5b\"\nm-mr=\"-1v -1h\"\nm-mr=\"-1.25vg\"\nm-mr=\"2.25hg\"\nm-mr=\"0!\"\nm-mr=\"auto:v 5.25t\"\n```\n\n## padding\n\n * shorthand: `pd`\n * paths scss:\n    * `scss/padding/all.scss` - all\n    * `scss/padding/short.scss` - padding\n    * `scss/padding/top.scss` - padding-top\n    * `scss/padding/left.scss` - padding-left\n    * `scss/padding/right.scss` - padding-right\n    * `scss/padding/bottom.scss` - padding-bottom\n    * `scss/padding/vertical.scss` - vertical padding\n    * `scss/padding/horizontal.scss` - horizontal padding\n    * `scss/padding/vgaps.scss` - vertical gaps\n    * `scss/padding/hgaps.scss` - horizontal gaps\n * paths css:\n    * `css/padding/all.css` - all\n    * `css/padding/short.css` - padding\n    * `css/padding/top.css` - padding-top\n    * `css/padding/left.css` - padding-left\n    * `css/padding/right.css` - padding-right\n    * `css/padding/bottom.css` - padding-bottom\n    * `css/padding/vertical.css` - vertical padding\n    * `css/padding/horizontal.css` - horizontal padding\n    * `css/padding/vgaps.css` - vertical gaps\n    * `css/padding/hgaps.css` - horizontal gaps\n * single value: `no`\n\nValue : `[multiplier]`:\n  * `0: `: `0`\n  * `6px: `: `0.25`\n  * `12px: `: `0.5`\n  * `18px: `: `0.75`\n  * `24px: `: `1`\n  * `30px: `: `1.25`\n  * `36px: `: `1.5`\n  * `42px: `: `1.75`\n  * `48px: `: `2`\n  * `54px: `: `2.25`\n  * `60px: `: `2.5`\n  * `66px: `: `2.75`\n  * `72px: `: `3`\n  * `78px: `: `3.25`\n  * `84px: `: `3.5`\n  * `90px: `: `3.75`\n  * `96px: `: `4`\n  * `102px: `: `4.25`\n  * `108px: `: `4.5`\n  * `114px: `: `4.75`\n  * `120px: `: `5`\n  * `126px: `: `5.25`\n  * `132px: `: `5.5`\n  * `138px: `: `5.75`\n  * `144px: `: `6`\n\nProperty : `[param]` shorthand\n  * `padding-top`: `t`\n  * `padding-left`: `l`\n  * `padding-right`: `r`\n  * `padding-bottom`: `b`\n  * `padding`: omitted, `m-pd=\"0.5\"`\n  * `padding-top padding-bottom`: `v`\n  * `padding-left padding-right`: `h`\n\nExamples\n```\nm-pd=\"0.5t 0.5l 0.5r 0.5b\"\nm-pd=\"0.5t 1l! 1r! 0.5b\"\nm-pd=\"1v 1h\"\nm-pd=\"0!\"\n```\n\n## font\n\n * shorthand: `fnt`\n * paths scss:\n    * `scss/font/all.scss` - all\n    * `scss/font/size.scss` - font-size\n    * `scss/font/weight.scss` - font-weight\n * paths css:\n    * `css/font/all.css` - all\n    * `css/font/size.css` - font-size\n    * `css/font/weight.css` - font-weight\n * single value: `no`\n\nFor font size base value is **16px**.\n\n(font size) Value : `[multiplier]` or value shorthand:\n  * `0: `: `0`\n  * `4px: `: `0.25`\n  * `8px: `: `0.5`\n  * `12px: `: `0.75`\n  * `16px: `: `1`\n  * `20px: `: `1.25`\n  * `24px: `: `1.5`\n  * `28px: `: `1.75`\n  * `32px: `: `2`\n  * `36px: `: `2.25`\n  * `40px: `: `2.5`\n  * `44px: `: `2.75`\n  * `48px: `: `3`\n  * `52px: `: `3.25`\n  * `56px: `: `3.5`\n  * `60px: `: `3.75`\n  * `64px: `: `4`\n  * `68px: `: `4.25`\n  * `72px: `: `4.5`\n  * `76px: `: `4.75`\n  * `80px: `: `5`\n  * `84px: `: `5.25`\n  * `88px: `: `5.5`\n  * `92px: `: `5.75`\n  * `96px: `: `6`\n  * `inherit: `: `in`\n\nFor font weight base value is **1**.\n\n(font weight) Value : `[multiplier]` or value shorthand:\n\n  * `100: `: `100`\n  * `200: `: `200`\n  * `300: `: `300`\n  * `400: `: `400`\n  * `500: `: `500`\n  * `600: `: `600`\n  * `700: `: `700`\n  * `800: `: `800`\n  * `900: `: `900`\n  \nProperty : `[param]` shorthand\n  * `font-size`: `s`\n  * `font-weight`: `w`\n\nExamples\n```\nm-fnt=\"0.5s 200w\"\nm-fnt=\"5.5s 900w\"\n```\n\n\n## line-height\n\n * shorthand: `lh`\n * path scss `scss/line-height/all.scss`\n * path css `css/line-height/all.css`\n * single value: `yes`\n\nValue : `[multiplier]` or value shorthand:\n  * `0: `: `0`\n  * `6px: `: `0.25`\n  * `12px: `: `0.5`\n  * `18px: `: `0.75`\n  * `24px: `: `1`\n  * `30px: `: `1.25`\n  * `36px: `: `1.5`\n  * `42px: `: `1.75`\n  * `48px: `: `2`\n  * `54px: `: `2.25`\n  * `60px: `: `2.5`\n  * `66px: `: `2.75`\n  * `72px: `: `3`\n  * `78px: `: `3.25`\n  * `84px: `: `3.5`\n  * `90px: `: `3.75`\n  * `96px: `: `4`\n  * `102px: `: `4.25`\n  * `108px: `: `4.5`\n  * `114px: `: `4.75`\n  * `120px: `: `5`\n  * `126px: `: `5.25`\n  * `132px: `: `5.5`\n  * `138px: `: `5.75`\n  * `144px: `: `6`\n  * `normal: `: `nr`\n  * `inherit: `: `in`\n\nProperty : `[param]` shorthand\n  * `line-height`: omitted\n\nExamples\n```\nm-lh=\"0.5\"\nm-lh=\"3.5\"\nm-lh=\"2.75\"\n```\n\n## text-align \n\n * shorthand: `tal`\n * path scss: `scss/text-align/all.scss`\n * path css: `css/text-align/all.css`\n * single value: `yes`\n \nValue : shorthand:\n  * `left`: `le`\n  * `right`: `ri`\n  * `center`: `ce`\n  * `justify`: `ju`\n  * `inherit`: `in`\n  \n# Utilises\n\nUtilises may be one or more, for example, `m-utils=\"utils1 crfx utils2\"`.\n\n  * [clearfix](#clearfix)\n\n## clearfix\n\nNo need description.\n\n * shorthand: `crfx`\n * path scss: `scss/utils/all.scss`\n * path css: `css/utils/all.css`\n \n# Customization\n\nSome helpers have `_settings.scss` file that contain sets of variable for customization generation of it.\n\nFor example\n```SCSS\n$margin-base: 24px !dafault; // base for value\n$margin-step: 1 / 4 !dafault; // step\n$margin-limit: 24 !dafault; // limit of generations\n$margin-import: true !dafault; // whether generate helper with !important\n```\n\nYou may choose what to include into your project.\n\nSass\n```SCSS\n@import \"~modori/scss/display/all\";\n@import \"~modori/scss/margin/top\";\n@import \"~modori/scss/box.sccs\";\n@import \"~modori/scss/typography.sccs\";\n\n\n// or all\n@import \"~modori/scss/all\";\n```\n\nWebpack or another bundler:\n```JavaScript\nimport 'modori/display/all.css';\nimport 'modori/margin/top.css';\nimport 'modori/margin/left.css';\nimport 'modori/margin/all.css';\n\n// or all\nimport 'modori/css/all';\n```\n\nHTML:\n```HTML\n\u003cscript src=\"https://unpkg.com/modori@latest/css/all.css\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/modori@latest/css/typography.css\"\u003e\u003c/script\u003e\n\u003c!--and etc--\u003e\n```\n\nVariables for base sizes:\n```SCSS\n$base-font-size: 16px !default; // for font-size\n$base-size: 24px !default; // for margins, padding etc\n```\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhokid%2Fmodori","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhokid%2Fmodori","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhokid%2Fmodori/lists"}