{"id":16175590,"url":"https://github.com/johnpolacek/simple-grid-generator","last_synced_at":"2025-12-12T03:48:13.396Z","repository":{"id":34305627,"uuid":"38218852","full_name":"johnpolacek/simple-grid-generator","owner":"johnpolacek","description":"A SASS grid generator for creating responsive grids with some nice features.","archived":false,"fork":false,"pushed_at":"2017-05-20T04:50:41.000Z","size":27,"stargazers_count":22,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T18:49:09.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"moment/moment","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnpolacek.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":"2015-06-28T23:57:26.000Z","updated_at":"2023-06-16T14:40:14.000Z","dependencies_parsed_at":"2022-09-11T04:41:23.493Z","dependency_job_id":null,"html_url":"https://github.com/johnpolacek/simple-grid-generator","commit_stats":null,"previous_names":["johnpolacek/standard-grid-generator"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpolacek%2Fsimple-grid-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpolacek%2Fsimple-grid-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpolacek%2Fsimple-grid-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpolacek%2Fsimple-grid-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnpolacek","download_url":"https://codeload.github.com/johnpolacek/simple-grid-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244331803,"owners_count":20436008,"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":[],"created_at":"2024-10-10T04:45:12.666Z","updated_at":"2025-12-12T03:48:08.343Z","avatar_url":"https://github.com/johnpolacek.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"#Simple Grid Generator (SASS)\n\nA SASS grid generator for creating responsive grids with some nice features. View an example at [johnpolacek.github.io/simple-grid](http://johnpolacek.github.io/simple-grid/).\n\n##Features\n\n\n####Easy to Use\n```\n@import 'grid.generator.scss';\n@include gridGenerator();\n```\n\n####Set Your Columns\nSwitch to a 18-column or 24-column grid instead.\n\n```\n@include gridGenerator(18);\n```\n\n####Breakpoints and Breakpoint Prefixes\nChange the breakpoints, or add in more. Name the prefixes whatever you like xs-, xl-, etc. If you prefer, set ems for your breakpoints.\n\n```\n@include gridGenerator(\n    12,\n    (0, 20em, 30em, 60em, 80em),\n    (xs-,s-,m-,l-,xl-),\n    'em'\n);\n```\n\nBreakpoint prefixing allows for markup that sets a default grid width, then overrides at different screen widths.\n\n```\n\u003cdiv class=\"grid-3 m-grid-6 s-grid-12\"\u003e\n\u003c!-- \n\tIn a 12-column grid, this translates to: \n\t\t- Quarter width by default\n\t\t- Half width at the medium breakpoint\n\t\t- Full width at the small breakpoint\n--\u003e\n```\n\n\n####Spacing Helpers\nFor quick, easy layouts, set custom utility classes to set consistent padding and margin on all your elements.\n\n```\n@include gridGenerator(\n    12,\n    (0, 480px, 800px),\n    (s-,m-,l-),\n    'px',\n    $spaceUnits: (.5em,1em,2em)\n);\n```\nIn your HTML:\n\n```\n\u003cdiv class=\"pad-2 m-pad-1 s-pad-0\"\u003e\n\u003cdiv class=\"pad-bottom-4 marg-bottom-2\"\u003e\n\u003cdiv class=\"pad-vertical-1 pad-sides-2\"\u003e\n```\n\nYou can use responsive breakpoint prefixing on these as well.\n\n```\n\u003cdiv class=\"pad-sides-2 s-pad-sides-1\"\u003e\n```\n\nOr don’t use any spacing helpers, if you prefer.\n\n```\n@include gridGenerator(\n    12,\n    (0, 480px, 800px),\n    (s-,m-,l-),\n    'px',\n    $spaceUnits: false\n);\n```\n\n\n\n##License\nAuthor \u0026 copyright (c) 2015: [John Polacek](http://johnpolacek.com), Dual MIT \u0026 GPL license","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpolacek%2Fsimple-grid-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnpolacek%2Fsimple-grid-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpolacek%2Fsimple-grid-generator/lists"}