{"id":15503158,"url":"https://github.com/johno/rework-flex-grid","last_synced_at":"2026-02-15T21:03:23.245Z","repository":{"id":23509363,"uuid":"26875223","full_name":"johno/rework-flex-grid","owner":"johno","description":"Rework CSS plugin for generating custom, lightweight flex grids.","archived":false,"fork":false,"pushed_at":"2015-02-08T20:36:06.000Z","size":456,"stargazers_count":19,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-13T18:30:32.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://johnotander.com/rework-flex-grid/","language":"JavaScript","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/johno.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":"2014-11-19T18:26:43.000Z","updated_at":"2022-12-05T07:17:14.000Z","dependencies_parsed_at":"2022-08-22T00:50:17.463Z","dependency_job_id":null,"html_url":"https://github.com/johno/rework-flex-grid","commit_stats":null,"previous_names":["johnotander/rework-flex-grid"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/johno/rework-flex-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-flex-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-flex-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-flex-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-flex-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johno","download_url":"https://codeload.github.com/johno/rework-flex-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-flex-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29489344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-10-02T09:12:21.670Z","updated_at":"2026-02-15T21:03:23.227Z","avatar_url":"https://github.com/johno.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rework Flex Grid\n\n[![Build Status](https://travis-ci.org/johnotander/rework-flex-grid.svg?branch=master)](https://travis-ci.org/johnotander/rework-flex-grid)\n\nRework CSS plugin for generating custom, lightweight [flex](http://caniuse.com/#search=flex) grids.\n\n### Why?\n\nEvery project is different.\n\nYou should be able to create a grid on the fly that's catered to your project. If you only want 8\ncolumns you can create a grid with exactly 8 columns rather than being stuck with 12. This helps to avoid\nunnecessary bloat in your CSS. This grid generator uses [flex](http://caniuse.com/#search=flex) to\ndramatically reduce CSS declarations in the grid system.\n\n#### Mobile-first\n\nRework Flex Grid creates a grid system that is 100% mobile-first. This ensures that mobile browsers\naren't forced to parse media queries when they're not applicable. Less parsing means faster rendering\nwhich means faster load-to-content times which means happier users. Yay.\n\n#### Customizable\n\nYou come up with your own naming scheme for classes. You set the breakpoints. You decide if you want column\noffsets. It's all in the configuration.\n\n#### Low Specificity\n\nAll grid classes have a specificity value of 10. They consist of one class, and exactly one class,\nresulting in CSS similar to:\n\n```css\n.gridClass {\n  /* ... */\n}\n\n.gridClass-rowClass {\n  /* ... */\n}\n\n.gridClass-rowClass-columnClass-1-12 {\n  /* ... */\n}\n\n.gridClass-rowClass-columnClass-offset-1 {\n  /* ... */\n}\n\n@media screen and (min-width: 32rem) {\n  .gridClass-rowClass-columnClass--sm {\n    /* ... */\n  }\n}\n```\n\nThis ensures that the grid won't stomp on your styles, and makes it easy for you to override defaults.\n\n## Installation\n\n```\nnpm install --save rework-flex-grid\n```\n\n## Usage\n\n```javascript\nvar fs       = require('fs'),\n    rework   = require('rework'),\n    flexGrid = require('rework-flex-grid');\n\nvar flexGridOptions = {\n  numColumns: 12,\n  classNames: {\n    grid: 'g',\n    row: 'r',\n    col: 'c'\n  },\n  mediaQueries: {\n    sm: '32rem',\n    md: '48rem',\n    lg: '64rem'\n  },\n  offsets: true\n};\n\nvar css = fs.readFileSync('css/my-file.css', 'utf8').toString();\nvar out = rework(css).use(flexGrid(flexGridOptions)).toString();\n```\n\n_Note:_ This plugin produces CSS that should be [prefixed](https://github.com/postcss/autoprefixer).\n\n## Options\n\n* `numColumns`, _Number_ for the number of columns. Defaults to `12`.\n* `classNames`, _Object_ with `grid`, `row`, and `col`. Defaults to `g`, `r`, and `c` respectively.\n* `mediaQueries`, _Object_ with `sm`, `md`, and `lg`. Defaults to `32rem`, `48rem`, and `64rem` respectively.\n* `offsets`, _Boolean_ to determine whether to include offsets or not. Defaults to `false`.\n\n## TODO:\n\n- [X] Create a mini app to allow people to generate grids in their browser.\n- [X] Offset configuration.\n- [X] Media queries.\n- [X] Media query configuration.\n- [ ] Make default grid classes responsive 12 \u003e 6 \u003e 1\n\n## Acknowledgements\n\n* Inspired by [Yahoo!'s Rework Pure Grids](https://github.com/yahoo/rework-pure-grids).\n* Adapted some flex grid code from [Kristofer Joseph](https://github.com/kristoferjoseph/flexboxgrid).\n\n## License\n\nMIT\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\nCrafted with \u003c3 by [John Otander](http://johnotander.com) ([@4lpine](https://twitter.com/4lpine)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Frework-flex-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohno%2Frework-flex-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Frework-flex-grid/lists"}