{"id":33219459,"url":"https://daneden.github.io/Toast/","last_synced_at":"2025-11-16T17:01:21.108Z","repository":{"id":1893806,"uuid":"2820033","full_name":"daneden/Toast","owner":"daneden","description":"🍞 A highly-customizable, responsive (S)CSS grid","archived":false,"fork":false,"pushed_at":"2018-12-15T20:22:20.000Z","size":77,"stargazers_count":2002,"open_issues_count":12,"forks_count":264,"subscribers_count":92,"default_branch":"master","last_synced_at":"2025-10-22T16:28:20.198Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://daneden.github.io/Toast","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/daneden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-11-21T13:22:45.000Z","updated_at":"2025-09-28T05:26:05.000Z","dependencies_parsed_at":"2022-08-31T00:31:07.759Z","dependency_job_id":null,"html_url":"https://github.com/daneden/Toast","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/daneden/Toast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneden%2FToast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneden%2FToast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneden%2FToast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneden%2FToast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daneden","download_url":"https://codeload.github.com/daneden/Toast/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneden%2FToast/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284742551,"owners_count":27056072,"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","status":"online","status_checked_at":"2025-11-16T02:00:05.974Z","response_time":65,"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":[],"created_at":"2025-11-16T14:00:26.351Z","updated_at":"2025-11-16T17:01:21.102Z","avatar_url":"https://github.com/daneden.png","language":"CSS","funding_links":[],"categories":["CSS library","Libraries and Mixins"],"sub_categories":["Grid"],"readme":"# Toast Framework\nThe Toast framework is a grid. That's it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.\n\nSet any number of columns, any gutter size you want, and whatever classes you need. Just edit the `_grid.scss` file’s variables to your needs.\n\nYou should also know that you’d be insane to use Toast’s grid.\n\nTo learn more, go to http://daneden.github.io/Toast\n\n## Quick-start guide\n\nUsing Toast is easy. First, link to grid.css in your HTML document's head:\n\n```\u003clink rel=\"stylesheet\" href=\"css/toast/grid.css\"\u003e```\n\nThen, to use the grid, you'll need a wrap (provided in your own CSS) and a `.grid` container.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"grid\"\u003e\n        \u003cdiv class=\"grid__col grid__col--1-of-4\"\u003e\n\n        \u003c/div\u003e\n        \u003cdiv class=\"grid__col grid__col--3-of-4\"\u003e\n\n        \u003c/div\u003e\n        \u003cdiv class=\"grid__col grid__col--6-of-12\"\u003e\n\n        \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Customising\n\n`$toast-grid-namespace` and `$toast-grid-column-namespace` adjusts the class names for the grid. With default values, grid wrappers have a class of `.grid` and columns `.grid__col`.\n\n`$toast-col-groups(n)` adjusts column divisions. For example, `$toast-col-groups(12)` will produce a 12-column grid. `$toast-col-groups(3,6,8)` will produce a 3-, 6-, and 8-column grid.\n\n`$toast-gutter-width` is—you guessed it—the gutter\nwidth. Accepts any unit.\n\n`$toast-breakpoint-medium` and `$toast-breakpoint-small` are breakpoint placeholders. Columns have hooks to change their behaviour under these breakpoints. See the “Modifiers” section below.\n\n## Modifiers\n\nToast has some modifiers to make different kinds of layouts easier. There are breakpoint hooks to have columns behave differently than their default behaviour under breakpoints:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-2 grid__col\"\u003e\n    This column will behave like a 1-of-2 column under the medium breakpoint and the small breakpoint.\n  \u003c/div\u003e\n\n  \u003cdiv class=\"grid__col--1-of-3 grid__col--ab grid__col\"\u003e\n    This column aligns to the bottom of its row.\n  \u003c/div\u003e\n\n  \u003cdiv class=\"grid__col--1-of-3 grid__col--am grid__col\"\u003e\n    This column aligns to the middle of its row.\n  \u003c/div\u003e\n\n  \u003cdiv class=\"grid__col--3-of-5 grid__col--centered grid__col\"\u003e\n    This column is centered and alone in its row.\n  \u003c/div\u003e\n\n  \u003cdiv class=\"grid__col--1-of-2 grid__col--d-last grid__col\"\u003e\n    This column comes first in the DOM, but appears last in its row.\n  \u003c/div\u003e\n\n  \u003cdiv class=\"grid__col--1-of-2 grid__col--d-first grid__col\"\u003e\n    This column appears last in the DOM, but appears first in its row.\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThat’s it. Have fun.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/daneden.github.io%2FToast%2F","html_url":"https://awesome.ecosyste.ms/projects/daneden.github.io%2FToast%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/daneden.github.io%2FToast%2F/lists"}