{"id":25771882,"url":"https://github.com/zr00da/layout-tools","last_synced_at":"2026-05-01T22:35:54.445Z","repository":{"id":57150623,"uuid":"81244457","full_name":"zr00da/layout-tools","owner":"zr00da","description":"Next-level mixins for layout composition","archived":false,"fork":false,"pushed_at":"2017-03-20T17:53:23.000Z","size":55,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-27T15:58:46.460Z","etag":null,"topics":["css","css-grid","layout","mixin","sass","scss","ui"],"latest_commit_sha":null,"homepage":"http://codepen.io/salsita/full/bgxWBX/","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/zr00da.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-07T19:15:01.000Z","updated_at":"2023-02-14T22:58:49.000Z","dependencies_parsed_at":"2022-09-06T21:50:43.275Z","dependency_job_id":null,"html_url":"https://github.com/zr00da/layout-tools","commit_stats":null,"previous_names":["mystrdat/layout-tools","mystrdat/iddqd-tools","mystrdat/gonzo-tools","zr00da/layout-tools"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zr00da/layout-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Flayout-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Flayout-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Flayout-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Flayout-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zr00da","download_url":"https://codeload.github.com/zr00da/layout-tools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Flayout-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32515838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-grid","layout","mixin","sass","scss","ui"],"created_at":"2025-02-27T03:19:37.431Z","updated_at":"2026-05-01T22:35:54.427Z","avatar_url":"https://github.com/zr00da.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e Anticipate the difficult by managing the easy. - Phu K. C'Eses\n\nHigh polish expressive mixins for CSS layout authors, available as a bundle or separately.\n\n[Click here for demo!](http://codepen.io/salsita/full/bgxWBX/)\n\n`npm install layout-tools --save`\n\n`@import node_modules/layout-tools/sass/all`\n\n## align\n\n- expressive wrapper over flexbox\n- aligns children inside parent with Photoshop-like props in either direction\n- emulates internal padding between children\n\n`+align(\u003chorizontal\u003e \u003cvertical\u003e, \u003cspacing\u003e, \u003cdirection\u003e)`\n\n```Sass\n// horizontal: left(default)|center|middle|right\n// vertical: top(default)|center|middle|bottom\n// spacing: unit(default 0)\n// direction: row(default)|col|column\n\n// Example\n.container\n  +align(right center, 10px, col)\n```\n\n## grid\n\n- bidirectional fluid or fixed layout\n- spreads children to fit exact row or column space\n- emulates internal padding between children\n\n`+grid(\u003citems-x\u003e \u003c?items-y\u003e, \u003cspacing\u003e, \u003cdirection\u003e, \u003cwrap\u003e)`\n\n```Sass\n// spacing: unit(default 0)\n// direction: row(default)|col|column\n// wrap: wrap(default)|nowrap\n\n// Example\n.container\n  +grid(4, 20px)\n\n  @media (max-width: 640px)\n    +grid(1 2.5, col, 10px, nowrap)\n```\n\n## rel, abs, fix\n\n- expressive unified wrappers over positioning\n- keywords `center|middle` with automatic transform offset fix\n- keyword `fill` that accepts distance off screen edges\n- smart shorthands (`center`, `25px`, `fill`, `fill 10px`)\n- configurable circular flow of orientation, default `left top right bottom`\n- internal overwrite conflict detection\n\n`+abs(\u003cleft|vertical\u003e \u003ctop|horizontal\u003e \u003c?right\u003e \u003c?bottom\u003e)`\n\n```Sass\n.centered\n  +abs(50%)\n\n.other\n  +fix(fill 15px)\n  +abs(right center)\n  +rel(right 20px fill)\n  +fix(center bottom 5px)\n  +abs(right 30% top 20px bottom)\n```\n\n## other\n\n- [clearfix](sass/clearfix.sass)\n- [hide-text](sass/hide-text.sass)\n- [truncate](sass/truncate.sass)\n- [scrollable](sass/scrollable.sass)\n- [unselectable](sass/unselectable.sass)\n- [aspect-ratio](sass/aspect-ratio.sass)\n- [background-retina](sass/background-retina.sass)\n- [pseudo](sass/pseudo.sass)\n- [em, rem](sass/em-rem.sass)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzr00da%2Flayout-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzr00da%2Flayout-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzr00da%2Flayout-tools/lists"}