{"id":13424177,"url":"https://github.com/lazarljubenovic/grassy","last_synced_at":"2025-07-18T15:34:30.547Z","repository":{"id":57253800,"uuid":"84662867","full_name":"lazarljubenovic/grassy","owner":"lazarljubenovic","description":"Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.","archived":false,"fork":false,"pushed_at":"2017-03-22T15:22:58.000Z","size":259,"stargazers_count":334,"open_issues_count":4,"forks_count":8,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-04T17:11:30.455Z","etag":null,"topics":["ascii-art","grid","grid-layout","grid-system","sass"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lazarljubenovic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-11T16:14:56.000Z","updated_at":"2024-10-10T15:38:50.000Z","dependencies_parsed_at":"2022-09-04T14:10:56.544Z","dependency_job_id":null,"html_url":"https://github.com/lazarljubenovic/grassy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/lazarljubenovic/grassy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarljubenovic%2Fgrassy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarljubenovic%2Fgrassy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarljubenovic%2Fgrassy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarljubenovic%2Fgrassy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lazarljubenovic","download_url":"https://codeload.github.com/lazarljubenovic/grassy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarljubenovic%2Fgrassy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265786557,"owners_count":23828283,"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":["ascii-art","grid","grid-layout","grid-system","sass"],"created_at":"2024-07-31T00:00:49.788Z","updated_at":"2025-07-18T15:34:30.527Z","avatar_url":"https://github.com/lazarljubenovic.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Grassy | [Docs](https://lazarljubenovic.github.io/grassy/) | [Playground](http://codepen.io/dbox/pen/aJLGxE)\n\n\u003e What you ASCII is what you get.\n\nBuild layout through ASCII art in Sass (and more).\n\n## Installation and Usage\n\n```\nyarn add grassy -D\n```\n\n```scss\n@import \"node_modules/grassy/grassy\";\n```\n\n## Quick overview\n\n### ASCII art\n\nHTML:\n```html\n\u003csection\u003e\n  \u003carticle\u003eHello\u003c/article\u003e\n  \u003carticle\u003eGrassy\u003c/article\u003e\n  \u003carticle\u003eWorld!\u003c/article\u003e\n\u003c/section\u003e\n```\n\nSass:\n```scss\nsection {\n  @include grid((\n    'x-x',\n    'x x',\n  ));\n}\n```\n\nResult:\n\n![A grid with two columns. The first column has one cell; the second column has two cells.](http://i.imgur.com/PUcHQDP.png)\n\n### As complex as you like!\n\nHTML _never_ requires any additional classes, wrappers, etc.\n\n```scss\n@include grid(\n  'x-x-x x   x'\n  'x   x-x-x-x'\n  '    x-x   x'\n  '  x   x-x  '\n);\n```\n\n![](http://i.imgur.com/a34WVe3.png)\n\n\n### `distribute` syntax\n\nDon't lose count of your `x`s! Freely combine `distribute` with your ASCII art.\n\n```scss\nsection {\n  @include grid((\n    'x-x x x',\n     distribute 7,\n  ));\n}\n```\n\n![](http://i.imgur.com/i2Gv9bg.png)\n\n### Quick `n`-column layouts\n\nAs basic as it gets.\n\n```scss\nsection {\n  @include fixed-grid(3);\n}\n```\n\n![](http://i.imgur.com/7H4ZkhR.png)\n\n### Don't like dangling elements?\n\nJust tell Grassy to distribute dangling elements.\n\n```scss\nsection {\n  @include fixed-grid(\n    3,\n    $distribute-dangling: true\n  );\n}\n```\n\n![](http://i.imgur.com/Smfu3M0.png)\n\nOr distribute them at the top if you prefer it that way.\n\n```scss\nsection {\n  @include fixed-grid(\n    3,\n    $distribute-dangling: true,\n    $dangling-at-beginning: true,\n  );\n}\n```\n\n![](http://i.imgur.com/ChX2HVE.png)\n\nAlso take a look at [full documentation](https://lazarljubenovic.github.io/grassy/). (Includes both the public API and explanation of some internal functions to help you if you want to contribute but have no idea where to start from.)\n\n## Playground\n\nTry it out now in the [Codepen playground](http://codepen.io/dbox/pen/aJLGxE).\n\n## Why Grassy?\n\n- No additional markup.\n- CSS is generated based on your needs: you won't have styles you don't use.\n- The syntax makes it almost like you're drawing boxes instead of doing CSS.\n- Great for generated content.\n- Zero runtime dependencies.\n\nMore coming [soon™©®](https://github.com/lazarljubenovic/grassy/issues?q=is%3Aissue+is%3Aopen+label%3A%22future+plans%22).\n\n---\n\n**NOTE** This is still in rapid development phase. There might be breaking changes along the way. For this reason, I advise you not to use this in serious projects. However, to find (and fix) bugs, people have to use it _somewhere_. So if you have a suitable non-critical project, it would be awesome if you could try out Grassy.\n\nPlease report bugs and suggest ideas by [opening an issue](https://github.com/lazarljubenovic/grassy/issues).\n\n---\n\nGrassy is heavily inspired by [Effortless Style](https://vimeo.com/101718785), a talk by [Heydon Pickering](https://twitter.com/heydonworks).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazarljubenovic%2Fgrassy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flazarljubenovic%2Fgrassy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazarljubenovic%2Fgrassy/lists"}