{"id":16231712,"url":"https://github.com/radlikewhoa/ssgs","last_synced_at":"2025-03-19T14:30:46.438Z","repository":{"id":5538330,"uuid":"6741775","full_name":"RadLikeWhoa/SSGS","owner":"RadLikeWhoa","description":"SSGS is an easy-to-use grid system for the web. It allows you to quickly set up a responsive grid system using Sass.","archived":false,"fork":false,"pushed_at":"2015-05-30T12:25:37.000Z","size":208,"stargazers_count":37,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-13T21:59:41.719Z","etag":null,"topics":["css","grid","library","scss"],"latest_commit_sha":null,"homepage":"https://sacha.me/SSGS","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/RadLikeWhoa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-18T00:19:00.000Z","updated_at":"2022-06-03T09:21:13.000Z","dependencies_parsed_at":"2022-08-30T20:00:57.215Z","dependency_job_id":null,"html_url":"https://github.com/RadLikeWhoa/SSGS","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadLikeWhoa%2FSSGS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadLikeWhoa%2FSSGS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadLikeWhoa%2FSSGS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadLikeWhoa%2FSSGS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RadLikeWhoa","download_url":"https://codeload.github.com/RadLikeWhoa/SSGS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244444449,"owners_count":20453726,"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","grid","library","scss"],"created_at":"2024-10-10T13:06:36.881Z","updated_at":"2025-03-19T14:30:46.151Z","avatar_url":"https://github.com/RadLikeWhoa.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Super Simple Grid System](http://sacha.me/SSGS)\n\nSSGS is a very easy-to-use grid system for the web. It allows you to quickly set up a responsive grid system using Sass.\n\n[View it in action](http://sacha.me/SSGS)\n\n![SSGS in action](./ssgs.png)\n\n## What's special about SSGS?\n\nWith SSGS, creating a responsive grid system is easy. You set your breakpoints, your gutters, include the file and then you're done. Yeah, it's really that easy. However, if you're happy with the default options you don't even have to set anything at all, just including the file is enough.\n\nSSGS uses something similar to the [AMCSS](http://amcss.github.io) syntax for its components. You create grids using `data-grid` and columns using `data-col`. Modifiers are passed as the attribute value. Once you see an example you'll understand it right away.\n\nTo keep things small and efficient, SSGS's CSS output is optimised to be as small as possible so you don't have to worry about code bloat.\n\n## Installation\n\n* Using [bower](https://github.com/bower/bower): `bower install SSGS`\n* Get the [.scss file](https://raw.github.com/RadLikeWhoa/SSGS/master/ssgs.scss) directly\n\n## Usage\n\nThe following example creates a grid in which the columns span half the width on small screens and a quarter of the width on larger screens.\n\nColumn definitions follow the format {n}-{x}, meaning a column spanning {n} units of {x}. The prefixes are defined in your Sass inside the $ssgs-prefixes variable.\n\n```html\n\u003cdiv data-grid\u003e\n  \u003cdiv data-col=\"1-2 M1-4\"\u003e\u003c/div\u003e\n  \u003cdiv data-col=\"1-2 M1-4\"\u003e\u003c/div\u003e\n  \u003cdiv data-col=\"1-2 M1-4\"\u003e\u003c/div\u003e\n  \u003cdiv data-col=\"1-2 M1-4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```scss\n$ssgs-columns: 2 4;\n$ssgs-prefixes: (\n  'M': '(min-width: 30em)'\n);\n\n@include 'ssgs';\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradlikewhoa%2Fssgs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradlikewhoa%2Fssgs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradlikewhoa%2Fssgs/lists"}