{"id":15742899,"url":"https://github.com/awilum/asmcss-mixin-w","last_synced_at":"2026-04-30T10:36:34.443Z","repository":{"id":47134340,"uuid":"405652264","full_name":"Awilum/asmcss-mixin-w","owner":"Awilum","description":"A mixin for Assembler CSS that provides extended functionality to set the width of an element.","archived":false,"fork":false,"pushed_at":"2021-09-12T20:03:58.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T07:37:08.453Z","etag":null,"topics":["asmcss","asmcss-mixin","asmcss-mixin-w","css","framework","front-end","mixin","mobile-first","responsive","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Awilum.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-12T13:40:58.000Z","updated_at":"2023-05-18T07:24:11.000Z","dependencies_parsed_at":"2022-09-14T09:01:19.307Z","dependency_job_id":null,"html_url":"https://github.com/Awilum/asmcss-mixin-w","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awilum%2Fasmcss-mixin-w","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awilum%2Fasmcss-mixin-w/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awilum%2Fasmcss-mixin-w/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awilum%2Fasmcss-mixin-w/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Awilum","download_url":"https://codeload.github.com/Awilum/asmcss-mixin-w/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246420319,"owners_count":20774301,"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":["asmcss","asmcss-mixin","asmcss-mixin-w","css","framework","front-end","mixin","mobile-first","responsive","web"],"created_at":"2024-10-04T03:01:16.534Z","updated_at":"2026-04-30T10:36:34.409Z","avatar_url":"https://github.com/Awilum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# asmcss-mixin-w\n\nA mixin for [Assembler CSS](https://github.com/asmcss/assembler) that provides extended functionality to set the width of an element.\n\n### Installation\n\nInstall the mixin from npm:\n\n```\nnpm install asmcss-mixin-w\n```\n\nor use the mixin from CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/asmcss-mixin-w@^1/dist/js/asmcss-mixin-w.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n```html\n\u003cdiv x-style=\"flex;\"\u003e\n    \u003cdiv x-style:\"^w:6/12;\"\u003e\n        Dustin and Steve become like proud dads to each other in season 3. \n        They argue a lot, but they also praise each other's achievements. \n        For instance, when the Scoops Troop is left to their own devices, \n        it's Steve who has to step up and fight an evil Russian to get to where they need to go.\n    \u003c/div\u003e\n    \u003cdiv x-style:\"^w:6/12;\"\u003e\n        Earlier in the season, Dustin teases Steve about losing fights all the time - first with\n        Jonathan, then Billy. Steve realizes this is true, so when he defeats the Russian, Dustin\n        jumps for joy, amazed.\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Documentation\n\n| value | css properties |\n|---|---|\n| auto | width: auto; |\n| 1/2 | width: 50% |\n| 1/3 | width: 33.333333%; |\n| 2/3 | width: 66.666667%; |\n| 1/4 | width: 25%; |\n| 2/4 | width: 50%; |\n| 3/4 | width: 75%; |\n| 1/5 | width: 20%; |\n| 2/5 | width: 40%; |\n| 3/5 | width: 60%; |\n| 4/5 | width: 80%; |\n| 1/6 | width: 16.666667%; |\n| 2/6 | width: 33.333333%; |\n| 3/6 | width: 50%; |\n| 4/6 | width: 66.666667%; |\n| 5/6 | width: 83.333333%; |\n| 1/12 | width: 8.333333%; |\n| 2/12 | width: 16.666667%; |\n| 3/12 | width: 25%; |\n| 4/12 | width: 33.333333%; |\n| 5/12 | width: 41.666667%; |\n| 6/12 | width: 50%; |\n| 7/12 | width: 58.333333%; |\n| 8/12 | width: 66.666667%; |\n| 9/12 | width: 75%; |\n| 10/12 | width: 83.333333%; |\n| 11/12 | width: 91.666667%; |\n| full | width: 100%; |\n| screen | width: 100vw; |\n| min | width: min-content; |\n| max | width: max-content; |\n\n### License\n[The MIT License (MIT)](https://github.com/Awilum/asmcss-mixin-w/blob/master/LICENSE)\nCopyright (c) 2021 [Sergey Romanenko](https://github.com/Awilum)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawilum%2Fasmcss-mixin-w","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawilum%2Fasmcss-mixin-w","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawilum%2Fasmcss-mixin-w/lists"}