{"id":16809521,"url":"https://github.com/lalomts/flexgrid-js","last_synced_at":"2025-03-17T09:44:19.023Z","repository":{"id":57126189,"uuid":"137036661","full_name":"lalomts/flexgrid-js","owner":"lalomts","description":"A customizable 12 column flexbox grid,  built with jss","archived":false,"fork":false,"pushed_at":"2018-06-15T20:56:41.000Z","size":122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T16:18:06.699Z","etag":null,"topics":["cssinjs","flexbox-grid","jss","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/lalomts.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":"2018-06-12T07:52:44.000Z","updated_at":"2020-12-26T16:29:56.000Z","dependencies_parsed_at":"2022-08-31T08:20:14.087Z","dependency_job_id":null,"html_url":"https://github.com/lalomts/flexgrid-js","commit_stats":null,"previous_names":["lalomrtnz/flexgrid-js"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lalomts%2Fflexgrid-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lalomts%2Fflexgrid-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lalomts%2Fflexgrid-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lalomts%2Fflexgrid-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lalomts","download_url":"https://codeload.github.com/lalomts/flexgrid-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244013049,"owners_count":20383703,"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":["cssinjs","flexbox-grid","jss","react"],"created_at":"2024-10-13T10:13:06.879Z","updated_at":"2025-03-17T09:44:18.999Z","avatar_url":"https://github.com/lalomts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flexgrid-js\n\n`flexgrid-js` is customizable implementation of [flexboxgrid.css](https://github.com/evgenyrodionov/flexboxgrid2) built using the features of [jss](https://github.com/cssinjs/jss), providing the functionality of the 12 column grid with a simple API. \n\n\n## Install \n\n`flexgrid-js` is available as an [npm package](https://www.npmjs.com/package/flexgrid-js)\n#### npm \n```\nnpm install @lalomts/flexgrid-js\n````\n\n#### yarn \n````\nyarn add @lalomts/flexgrid-js\n````\n\n\n## Usage \n### Configure the grid \nThe grid uses the [flexboxgrid.css](https://github.com/evgenyrodionov/flexboxgrid2) attributes by default. In order to override them, you need to pass an object as argument to the `.grid()` method. \n\n```jsx\n\nconst gridConfig = { \n  gutterWidth: 16, \n  outerMargin:8 \n}\n\n\u003cdiv className={ FlexGrid.grid(gridConfig)}\u003e  \u003c/div\u003e \n````\n\n### Adding rows \nRows can also have several attributes that can be customized in relation to the viewport's width. To configure a row, you pass an object to the `.col()` method. \n\n```jsx \n\nconst rowConfig = {\n  align: { \n    xs: ['bottom'], \n    lg: ['center']\n  }\n}\n\n\u003cdiv className={ FlexGrid.row(rowConfig)}\u003e \u003c/div\u003e\n```\n\n### Adding columns \nJust as with rows, columns' attributes need to be configured with an object value passed to the `.col()`method. There's no need to specify a value for each viewport size, just add the needed viewport values to the desired attribure keys. \n\n```jsx\nconst colConfig = { \n  size: {\n    xs: 9, \n    md: 3, \n    lg: 6\n   }, \n  reverse: {\n    xs: true\n  }, \n  hidden: {\n    lg: true\n  }\n}\n\n\u003cdiv className={ FlexGrid.col(colConfig)}\u003e \u003c/div\u003e\n````\n\n### A complete example\n```jsx \nimport FlexGrid from '@lalomts/flexgrid-js'\n\nclass Home extends Component {\n  render() {\n\n  const columnConfig = { \n    size: { \n      xs: 9,\n      md: 3, \n      lg: 6}, \n    offset: {\n      xs: 4, \n      xl: 2\n    }\n  }\n  \n  return (\n    \u003cdiv className={ FlexGrid.grid({ gutterWidth: 8, xl: 1400 })}\u003e \n      \u003cdiv className={FlexGrid.row({ reverse: true })}\u003e\n          \u003cdiv className={FlexGrid.col( columnConfig )}\u003e\n              //Your content \n          \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n }\n}\n````\n\n\n\n## Attributes \nThe attributes and possible values for each element of the grid: \n\n### Grid\n\u003cdetails\u003e \n  \u003csummary\u003e The attributes to customize the \u003cstrong\u003egrid\u003c/strong\u003e element \u003c/summary\u003e\n\u003c/br\u003e\n\n| Attribute | Description | Values | Example |\n| --- | --- | --- | --- |\n| **gutterWidth** | The space between each of the grid's columns | Number | `gutterWidth: 16`|\n| **outerMargin** | The margin (left and right) of the container | Number | `outerMargin: 32`|\n| **xs** | The min screen width the x small viewport size | Number | ` xs: 0` |\n| **sm** | The min screen width the small viewport size | Number | ` sm: 578` |\n| **md** | The min screen width the medium viewport size | Number | ` xs: 768` |\n| **lg** | The min screen width the large viewport size | Number | ` lg: 992` |\n| **xl** | The min screen width the x large viewport size | Number | ` xl: 1250` |\n\u003c/details\u003e \n\n### Row\n\u003cdetails\u003e \n  \u003csummary\u003e The attributes to configure the \u003cstrong\u003erow\u003c/strong\u003e element \u003c/summary\u003e\n\u003c/br\u003e\n\n| Attribute | Description | Values | Example |\n| --- | --- | --- | --- |\n| **align** | How the elements should be aligned inside a row for a specific viewport size | Array: start, center, end, top, bottom, middle | `align: {xs: ['bottom', 'center', xl: ['start']}`|\n| **dist** | How the elements should be distributed inside a row for a specific viewport size | around, between| `dist: { xs: 'around' }`|\n| **reverse** | Reverse the order of the elements inside a row | Bool | `reverse: true `|\n\u003c/details\u003e \n\n\n### Column\n\u003cdetails\u003e \n  \u003csummary\u003e The attributes to configure the \u003cstrong\u003ecolumn\u003c/strong\u003e element \u003c/summary\u003e\n\u003c/br\u003e\n\n| Attribute | Description | Values | Example |\n| --- | --- | --- | --- |\n| **size** | How many of the grid columns should be used at a specific viewport size| Number: 1-12 | `size: {sm: 6, xl: 8} `|\n| **offset** | The offset of a column at a specific viewport size| Number: 1-11 | `offset: {sm: 2, xl: 4} `|\n| **reorder** | Forces a column to appear at a different order for a specific viewport size| first, last, initialOrder | `reorder: {sm: 'first', xl: 'initialOrder' } `|\n| **hidden** | Hides a column at a specific viewport size | Bool | `hidden: true `|\n| **reverse** | Reverse the order of the elements inside a column | Bool | `reverse: true `|\n\u003c/details\u003e \n\n## Licence \n[MIT](LICENCE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flalomts%2Fflexgrid-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flalomts%2Fflexgrid-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flalomts%2Fflexgrid-js/lists"}