{"id":23885616,"url":"https://github.com/zcallan/flex-react","last_synced_at":"2025-04-10T01:13:19.251Z","repository":{"id":57238219,"uuid":"85028634","full_name":"zcallan/flex-react","owner":"zcallan","description":"A lightweight React component library to build flex-based grids.","archived":false,"fork":false,"pushed_at":"2017-10-06T05:19:41.000Z","size":25,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T01:13:12.904Z","etag":null,"topics":["flex","flexbox","grid","react"],"latest_commit_sha":null,"homepage":"","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/zcallan.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":"2017-03-15T04:21:12.000Z","updated_at":"2017-07-22T15:50:11.000Z","dependencies_parsed_at":"2022-08-26T14:04:38.597Z","dependency_job_id":null,"html_url":"https://github.com/zcallan/flex-react","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcallan%2Fflex-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcallan%2Fflex-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcallan%2Fflex-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcallan%2Fflex-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcallan","download_url":"https://codeload.github.com/zcallan/flex-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137891,"owners_count":21053775,"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":["flex","flexbox","grid","react"],"created_at":"2025-01-04T05:45:26.803Z","updated_at":"2025-04-10T01:13:19.223Z","avatar_url":"https://github.com/zcallan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Flex React v1.3.1\n==========================\n\nFlex React is a grid-based set of components for React. It offers the following features:\n\n - Created to be a lightweight grid solution\n - Component-based grid system\n - Styles written using CSS flexbox\n - All styling used is prefixed to work across browsers\n - Only peer-dependency is React\n - Designed to help build mobile-responsive applications\n - Easy to use!\n\n\u003e As of v1.2.6, there is no padding prop in any component.\n\n\u003e In a later version I may add a method to create a wrapper around these components to specify padding, but I could not resolve a specific style bug where an overflow of `Col` inside a `Row` would cause issues.\n\n\u003e As a result, `Grid` has no actual purpose as of v1.2.6.\n\n\u003e In the meantime, this package will have no supported way of creating 'gutters'/padding between components. Thanks\n\n\n## Install\n\n```bash\nnpm install --save flex-react\n```\n\nIf you don't see any styling appear, import this file somewhere high-level in your app:\n\n```js\nimport 'flex-react/dist/style.css';\n```\n\n## Example\n\n```js\nimport React, { Component } from 'react';\nimport { Grid, Row, Col } from 'flex-react';\n\n\nclass Example extends Component {\n    render() {\n        return (\n            \u003cGrid className=\"example\"\u003e\n                \u003cRow\u003e\n                    \u003cCol sm={6}\u003e\n                        \u003cp\u003eApart from on mobile, this will take up 50% of the row!\u003c/p\u003e\n                    \u003c/Col\u003e\n\n                    \u003cCol sm={6}\u003e\n                        \u003cp\u003eAnd this will take up the other 50%!\u003c/p\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n\n                \u003cRow center\u003e\n                    \u003cCol xs={4}\u003e\n                        \u003cp\u003eThis will be centered!\u003c/p\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n\n                \u003cRow\u003e\n                    \u003cCol xs={4} xsOffset={4}\u003e\n                        \u003cp\u003eThis is another way to make something centered!\u003c/p\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n\n                \u003cRow spaceBetween\u003e\n                    \u003cCol sm={3}\u003e\n                        \u003cp\u003eThis will be aligned on the left,\u003c/p\u003e\n                    \u003c/Col\u003e\n\n                    \u003cCol sm={3}\u003e\n                        \u003cp\u003eand this will be aligned on the right!\u003c/p\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n            \u003c/Grid\u003e\n        );\n    }\n}\n```\n\n![example code](http://files.kaln.io/flex-react-example.png)\n\n## Notes\n\n| Abbreviation | Meaning | Screen Size | Pixels |\n|--------------|---------|-------------|--------|\n| xs | Extra Small | Mobile | 0 to 767px |\n| sm | Small | Tablet | 768px to 991px |\n| md | Medium | Laptop Monitor | 992px to 1199px |\n| lg | Large | Desktop Monitor | 1200px and up |\n\n## Components\n\n### Col\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| children | Any | | The content to wrap inside the column. |\n| className | String | Empty string | A class name to give custom styling to the column. |\n| xs | Number | 12 | The number of units to set as the column width. (0-12) |\n| sm | Number | [xs] | The number of units to set as the column width. (0-12) |\n| md | Number | [sm] | The number of units to set as the column width. (0-12) |\n| lg | Number | [md] | The number of units to set as the column width. (0-12) |\n| xsOffset | Number | 0 | The number of units to pad the left to the left of the column. (0-12) |\n| smOffset | Number | [xsOffset] | The number of units to pad the left to the left of the column. (0-12) |\n| mdOffset | Number | [smOffset] | The number of units to pad the left to the left of the column. (0-12) |\n| lgOffset | Number | [mdOffset] | The number of units to pad the left to the left of the column. (0-12) |\n| ...restProps |   |  | Use this to add any additional props to the \u003cdiv\u003e component. |\n\n\n### Row\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| children | Any | | The content to wrap inside the row. |\n| className | String | Empty string | A class name to give custom styling to the row. |\n| xs | Number | 12 | The number of units to set as the row width. (0-12) |\n| sm | Number | [xs] | The number of units to set as the row width. (0-12) |\n| md | Number | [sm] | The number of units to set as the row width. (0-12) |\n| lg | Number | [md] | The number of units to set as the row width. (0-12) |\n| vAlign | Boolean | false | Whether the children should be centered vertically within the row. |\n| center | Boolean | false | Whether the children should be centered horizontally within the row. |\n| left | Boolean | false | Whether the children should be left aligned within the row. |\n| right | Boolean | false | Whether the children should be right aligned within the row. |\n| spaceAround | Boolean | false | Whether each children should have equal spacing to the left and right within the row. |\n| spaceBetween | Boolean | false | Whether the children should have maximal spacing between each other within the row. |\n| ...restProps |   |  | Use this to add any additional props to the \u003cdiv\u003e component. |\n\n\n### Grid\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| children | Any | | The content to wrap inside the cgrid. |\n| className | String | Empty string | A class name to give custom styling to the grid. |\n| ...restProps |   |  | Use this to add any additional props to the \u003cdiv\u003e component. |\n\n# Development\n\nTo begin development, run the following:\n\n```bash\nnpm start\n```\n\nThis will host a `webpack dev server` at `localhost:3000` where you can play around with the components.\n\nThe main file/'test harness' is located under `/dev` and webpack will serve them from `/dev-build`.\n\nTo modify the components themselves, simply edit them under the `/src` directory.\n\nTo build the files, simply run:\n\n```bash\nnpm run build\n```\n\n---\n\nFile an issue for any bugs found, or if you want any features added.\nI'm happy to always keep improving this package, let me know if you run into any errors.\n\nThanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcallan%2Fflex-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcallan%2Fflex-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcallan%2Fflex-react/lists"}