{"id":13432449,"url":"https://github.com/jxnblk/rgx","last_synced_at":"2025-03-16T23:31:22.321Z","repository":{"id":34592444,"uuid":"38539745","full_name":"jxnblk/rgx","owner":"jxnblk","description":"React grid system based on minimum and maximum widths","archived":true,"fork":false,"pushed_at":"2016-03-21T19:15:42.000Z","size":439,"stargazers_count":202,"open_issues_count":0,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-10T22:08:42.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jxnblk.com/rgx","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"iamkun/dayjs","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jxnblk.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-07-04T16:13:06.000Z","updated_at":"2023-01-28T17:55:14.000Z","dependencies_parsed_at":"2022-09-12T17:00:26.377Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/rgx","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Frgx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Frgx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Frgx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Frgx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/rgx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243949914,"owners_count":20373655,"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-07-31T02:01:11.744Z","updated_at":"2025-03-16T23:31:21.822Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","UI Layout","Soluções"],"sub_categories":["Uncategorized","Form Components"],"readme":"# Rgx\n\nReact grid system – constraint-based responsive grid with no CSS and no media queries.\n\n[![Build Status](https://travis-ci.org/jxnblk/rgx.svg?branch=master)](https://travis-ci.org/jxnblk/rgx)\n\n## About\n\nRgx is an experimental, responsive grid system based on \u003cb\u003eminimum and maximum widths\u003c/b\u003e and designed for content-out layout.\nRgx is built purely in React and uses inline styles, with no CSS and no media queries.\nEach Grid row sets its child Cells to display inline block once the Grid is wide enough to fit all Cells’ minimum widths.\nOnce set inline, each Cell’s width is based on the ratio of its own minimum width to the sum of minimum widths per row.\nOnce a Cell hits its max-width, the remaining space is distributed to other Cells in the row.\nSince this isn’t based on viewport-based media queries, the Grid responds to its own width, similar to element queries.\n\n## Getting Started\n\n```bash\nnpm i rgx\n```\n\n```js\nimport React from 'react'\nimport { Grid, Cell } from 'rgx'\n\nclass Demo extends React.Component {\n  render () {\n    return (\n      \u003cGrid gutter={8}\u003e\n        \u003cCell min={256} max={320}\u003eMin 256 Max 320\u003c/Cell\u003e\n        \u003cCell min={768}\u003eMin 768\u003c/Cell\u003e\n      \u003c/Grid\u003e\n    )\n  }\n}\n\nReact.render(\u003cDemo /\u003e, document.querySelector('#demo'))\n```\n\n## Grid Component\n\n#### Props\n- `gutter` - pixel value to set negative margins on the Grid component and padding on Cell components to create gutters.\n- `min` - pixel value to set a default `min` prop for child Cells\n\n## Cell Component\n\n#### Props\n- `min` - pixel value to set the min-width at which a Cell is displayed inline.\n- `max` - pixel value at which the Cell should not expand. Remaining space is distributed to other Cells.\n- `padding` - sets left and right padding. This is used by the Grid component when the `gutter` prop is set and the Cell has no padding set.\n- `width` - fraction value used by the Grid component to set a width. This can also be set manually when used independently from the Grid component\n- `inline` - boolean value used by the Grid component to display a Cell inline.\n\n## Performance\n\nI have yet to do any performance audits, and since the Grid component listens to window resize events,\nthis probably has some performance issues. Any help in that area would be greatly appreciated.\n\nMIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Frgx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Frgx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Frgx/lists"}