{"id":16124401,"url":"https://github.com/jongacnik/gr8-css","last_synced_at":"2025-07-04T06:06:22.244Z","repository":{"id":35879814,"uuid":"40165299","full_name":"jongacnik/gr8-css","owner":"jongacnik","description":"Functional css layout utilities","archived":false,"fork":false,"pushed_at":"2016-07-18T22:27:00.000Z","size":67,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T15:38:19.606Z","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":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jongacnik.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-04T05:32:54.000Z","updated_at":"2019-05-22T21:36:16.000Z","dependencies_parsed_at":"2022-08-30T13:10:38.283Z","dependency_job_id":null,"html_url":"https://github.com/jongacnik/gr8-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jongacnik/gr8-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongacnik","download_url":"https://codeload.github.com/jongacnik/gr8-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263457184,"owners_count":23469289,"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-09T21:21:15.355Z","updated_at":"2025-07-04T06:06:22.201Z","avatar_url":"https://github.com/jongacnik.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gr8\n\nFunctional css layout [utilities](#utilities) \u0026 [command line tool](#command-line-tool).\n\n**Full documentation coming, eventually...**\n\ns/o [gravitons](https://github.com/jxnblk/gravitons), [Basscss](http://basscss.com) and [f(css)](http://www.jon.gold/2015/07/functional-css/).\n\n## Utilities\n\ngr8 is split into multiple files that contain specific layout utilities.\n\nFile | Contains\n--- | ---\n[_c.scss](https://github.com/jongacnik/gr8/blob/master/source/_c.scss) | column\n[_co.scss](https://github.com/jongacnik/gr8/blob/master/source/_co.scss) | column offsets\n[_g.scss](https://github.com/jongacnik/gr8/blob/master/source/_g.scss) | gutter\n[_p.scss](https://github.com/jongacnik/gr8/blob/master/source/_p.scss) | padding\n[_m.scss](https://github.com/jongacnik/gr8/blob/master/source/_m.scss) | margin\n[_d.scss](https://github.com/jongacnik/gr8/blob/master/source/_d.scss) | display\n[_x.scss](https://github.com/jongacnik/gr8/blob/master/source/_x.scss) | flexbox\n[_f.scss](https://github.com/jongacnik/gr8/blob/master/source/_f.scss) | float\n[_ps.scss](https://github.com/jongacnik/gr8/blob/master/source/_ps.scss) | positioning\n[_z.scss](https://github.com/jongacnik/gr8/blob/master/source/_z.scss) | z-index\n[_h.scss](https://github.com/jongacnik/gr8/blob/master/source/_h.scss) | header\n[_t.scss](https://github.com/jongacnik/gr8/blob/master/source/_t.scss) | text-align\n[_bg.scss](https://github.com/jongacnik/gr8/blob/master/source/_bg.scss) | background\n[_op.scss](https://github.com/jongacnik/gr8/blob/master/source/_op.scss) | opacity\n[_etc.scss](https://github.com/jongacnik/gr8/blob/master/source/_etc.scss) | various\n[_dev.scss](https://github.com/jongacnik/gr8/blob/master/source/_dev.scss) | dev helpers\n[_options.scss](https://github.com/jongacnik/gr8/blob/master/source/_options.scss) | options\n[_main.scss](https://github.com/jongacnik/gr8/blob/master/source/_main.scss) | main\n\n## Responsive\n\nCustom attributes are used to define responsive values. The names of the attributes are the keys of the breakpoints set in the options.\n\n```\n  \u003cdiv\n    class=\"c2\"\n    xl=\"c3\"\n    lg=\"c4\"\n    md=\"c6\"\n    sm=\"c12\"\n  \u003e\u003c/div\u003e\n```\n\n## Customization\n\nBreakpoints, whitespace, font size, responsive classes and nested columns can be changed in `source/_options.scss`. To add more/fewer breakpoints, whitespace, or font sizes, add/remove elements from the arrays.\n\nIf using nested columns and nested column offsets I recommend using something like [purify-css](https://www.npmjs.com/package/purify-css).\n\n## Command Line Tool\n\nExpose `gr8` command to quickly add the source of gr8 to a project.\n\n```\nnpm i -g gr8\n```\n\n```\nUsage: gr8 [options] [target]\n\nOptions:\n\n  -h, --help             output usage information\n  -V, --version          output the version number\n  -d, --dirname \u003cvalue\u003e  gr8 directory name\n```\n\n```\n# Add gr8 to current directory\ngr8\n\n# Add gr8 to specified directory\ngr8 put/it/here\n\n# Add gr8 to specified directory and change gr8 directory name\ngr8 -d gr8css put/it/here\n```\n\n## Build\n\n```\nnpm install\nnpm run dist\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fgr8-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongacnik%2Fgr8-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fgr8-css/lists"}