{"id":13831793,"url":"https://github.com/pr1mer-tech/waffle-grid","last_synced_at":"2025-12-12T02:51:30.149Z","repository":{"id":58228583,"uuid":"83265686","full_name":"pr1mer-tech/waffle-grid","owner":"pr1mer-tech","description":"An easy to use flexbox grid system.","archived":false,"fork":false,"pushed_at":"2020-03-18T02:10:39.000Z","size":1017,"stargazers_count":598,"open_issues_count":0,"forks_count":47,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-29T08:05:36.343Z","etag":null,"topics":["css","css-grid","flex","flexbox","flexbox-grid","responsive","sass","scss","waffle-grid"],"latest_commit_sha":null,"homepage":"https://waffle.pr1mer.tech","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/pr1mer-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://paypal.me/lucasgruwez"}},"created_at":"2017-02-27T03:49:27.000Z","updated_at":"2025-02-11T21:33:11.000Z","dependencies_parsed_at":"2022-08-31T09:20:40.879Z","dependency_job_id":null,"html_url":"https://github.com/pr1mer-tech/waffle-grid","commit_stats":null,"previous_names":["lucasgruwez/waffle-grid"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pr1mer-tech%2Fwaffle-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pr1mer-tech%2Fwaffle-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pr1mer-tech%2Fwaffle-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pr1mer-tech%2Fwaffle-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pr1mer-tech","download_url":"https://codeload.github.com/pr1mer-tech/waffle-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"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-grid","flex","flexbox","flexbox-grid","responsive","sass","scss","waffle-grid"],"created_at":"2024-08-04T10:01:40.182Z","updated_at":"2025-12-12T02:51:25.126Z","avatar_url":"https://github.com/pr1mer-tech.png","language":"CSS","funding_links":["https://paypal.me/lucasgruwez"],"categories":["CSS"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWaffle grid\u003c/h1\u003e\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg height=\"256\" src=\"https://rawgit.com/lucasgruwez/waffle-grid/master/docs/img/waffle-logo.svg\"/\u003e\r\n\u003c/p\u003e\r\n\u003cp align=\"center\"\u003e\r\nAn easy to use flexbox grid system.\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/lucasgruwez/waffle-grid/releases\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/release/lucasgruwez/waffle-grid.svg\" alt=\"GitHub release\" data-pin-nopin=\"true\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/downloads/lucasgruwez/waffle-grid/total.svg\" alt=\"Github All Releases\" data-pin-nopin=\"true\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"LICENSE\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/license/lucasgruwez/waffle-grid.svg\" alt=\"License\" data-pin-nopin=\"true\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/david/dev/lucasgruwez/waffle-grid.svg\" alt=\"David\" data-pin-nopin=\"true\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://travis-ci.org/lucasgruwez/waffle-grid\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/travis/lucasgruwez/waffle-grid.svg\" alt=\"Travis\" data-pin-nopin=\"true\"\u003e\r\n    \u003c/a\u003e\r\n  \u003ca href=\"http://gulpjs.com/\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/Built%20with-Gulp-%23CF4646.svg\" alt=\"Built with Gulp\" data-pin-nopin=\"true\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n## Getting Started\r\n\r\nTo get the waffle grid system in your web page, simply paste this code into the `head` of your document,\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/waffle-grid/dist/waffle-grid.min.css\"\u003e\r\n\u003c!-- or --\u003e\r\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/waffle-grid/dist/waffle-grid.css\"\u003e\r\n```\r\nor you can install the waffle grid system using a package manager like [npm](https://npmjs.com/package/waffle-grid)\r\n```bash\r\n$ npm install waffle-grid\r\n# or\r\n$ bower install waffle-grid\r\n```\r\nIf you want you can still download the waffle grid [here](https://github.com/lucasgruwez/waffle-grid/releases).\r\n\r\n## Docs\r\n\r\n```html\r\n\u003cdiv class=\"grid\"\u003e\r\n  \u003cdiv class=\"row\"\u003e\r\n    \u003c!-- For column width, use col-n-of-p. By default, p can be 4, 8, or 12 --\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv class=\"row\"\u003e\r\n    \u003c!-- The center class centers the column. --\u003e\r\n    \u003cdiv class=\"col col-7-of-12 center\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv class=\"row\"\u003e\r\n    \u003c!-- use col-m- and col-s- as well as m-hide, s-hide, m-only and s-only to make your grid responsive --\u003e\r\n    \u003cdiv class=\"col col-2-of-8 col-m-1-of-4 col-s-1-of-2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-3-of-8 col-m-2-of-4 col-s-1-of-2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-8 m-hide\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-2-of-8 col-m-1-of-4 s-hide\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv class=\"row\"\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-1-of-4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv class=\"row\"\u003e\r\n    \u003c!-- Pushes and pulls are used in the same way as col-n-of-p. They can also be responsive, like pull-m-1-of-4 --\u003e\r\n    \u003cdiv class=\"col col-1-of-8\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-2-of-8 push-2-of-12\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"col col-3-of-8 pull-1-of-12\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nThe full docs can be found [here](https://github.com/lucasgruwez/waffle-grid/wiki)\r\n\r\n## Like this project?\r\n\r\nPlease feel free to give the waffle-grid repo a star, and if you want to help support my work, please consider [donating](https://paypal.me/lucasgruwez).\r\n\r\n## Built With\r\n\r\n* [Gulp](http://gulpjs.com/) - Build system\r\n* [Sass](https://sass-lang.com/) - Language\r\n* [Jekyll](https://jekyllrb.com/) - Used for the website\r\n\r\n## Contributing\r\n\r\nPlease read [CONTRIBUTING.md](./.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\r\n\r\n#### Made a website using the Waffle grid?\r\n\r\nAdd the built with waffle-grid badge to your `README.md`\r\n\r\n[![Built with Waffle Grid](https://lucasgruwez.github.io/waffle-grid/img/built-with-waffle.svg)](https://lucasgruwez.github.io/waffle-grid/img/built-with-waffle.svg)\r\n\r\n\r\nFeel free to send me an email at [gruwez.lucas@gmail.com](mailto:gruwez.lucas@gmail.com), and I might add your site to an examples section I'm currently working on.\r\n\r\n## Versioning\r\n\r\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/lucasgruwez/waffle-grid/tags).\r\n\r\n## Authors\r\n\r\n- **Lucas Gruwez** - *Initial work* - [@lucasgruwez](https://github.com/lucasgruwez)\r\n- **Jack McNicol** - *Helped out a lot* - [@jackmcpickle](https://github.com/jackmcpickle)\r\n- **Arthur Guiot** - *Added js function* - [@arguiot](https://gothub.com/arguiot)\r\n\r\nSee also the list of [contributors](https://github.com/lucasgruwez/waffle-grid/contributors) who participated in this project.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\r\n\r\nCopyright \u0026copy; 2017 lucasgruwez All Rights Reserved.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpr1mer-tech%2Fwaffle-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpr1mer-tech%2Fwaffle-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpr1mer-tech%2Fwaffle-grid/lists"}