{"id":28377560,"url":"https://github.com/codingzeal/cellulose","last_synced_at":"2025-06-26T21:32:34.424Z","repository":{"id":57195725,"uuid":"81621476","full_name":"CodingZeal/cellulose","owner":"CodingZeal","description":"[DEPRECATED] React Flexible Contextual Layout Components","archived":false,"fork":false,"pushed_at":"2019-05-14T23:10:34.000Z","size":2484,"stargazers_count":17,"open_issues_count":4,"forks_count":1,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-22T12:51:37.358Z","etag":null,"topics":[],"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/CodingZeal.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-02-11T01:12:52.000Z","updated_at":"2022-10-02T18:38:03.000Z","dependencies_parsed_at":"2022-09-17T03:11:57.577Z","dependency_job_id":null,"html_url":"https://github.com/CodingZeal/cellulose","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingZeal/cellulose","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingZeal%2Fcellulose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingZeal%2Fcellulose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingZeal%2Fcellulose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingZeal%2Fcellulose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingZeal","download_url":"https://codeload.github.com/CodingZeal/cellulose/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingZeal%2Fcellulose/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261296744,"owners_count":23137206,"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":"2025-05-30T01:05:56.339Z","updated_at":"2025-06-26T21:32:34.412Z","avatar_url":"https://github.com/CodingZeal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `DEPRECATED`\n\n## End of Life\n\nCellulose was created as an experiment in layouts that was never fully realized. With evolving conventions in CSS, we are choosing to deprecate this project, as we no longer feel that it is the right solution for layout problems.\n\n---\n\n![Alt text](docs/images/cellulose-logo.png)\n\n# Cellulose\n\n[![GitHub issues](https://img.shields.io/github/issues/bmatto/cellulose.svg)](https://github.com/bmatto/cellulose/issues)\n[![CircleCI](https://img.shields.io/circleci/project/github/bmatto/cellulose.svg)]()\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/bmatto/cellulose/master/LICENSE)\n\nCellulose is a React layout library that allows you to create contextually aware components using flexbox.\n\nThe `\u003cCellulose\u003e` component uses its own rendered width to assign style and responsive behavior, rather than the width of the browser window.\n\n## Installation\n\n`npm i -S cellulose` or `yarn add cellulose`\n\n## Usage\n\nUse the `\u003cCellulose\u003e` component to define a container that you want to style based on internal width.\n\n`\u003cCellulose\u003e` will render into the DOM as a `\u003cdiv\u003e` whose class is determined by which breakPoint in `breakPoints` its own width exceeds.\n\n```jsx\nimport { Cellulose } from 'cellulose'\nimport React from 'react'\n\nexport function MyComponent() {\n  const breakPoints = {\n    768:  'greater-than-768',\n    1024: 'greater-than-1024'\n  }\n\n  return (\n    \u003cCellulose breakPoints={breakPoints}\u003e\n      \u003cdiv\u003eContent\u003c/div\u003e\n    \u003c/Cellulose\u003e\n  )\n}\n```\n\nCellulose can also be used to create a responsive grid. Use the prop `columns=` of `\u003cCellulose\u003e` to define the number of columns to use, then add `\u003cCell\u003e` components with `spanOptions` props that define responsive behavior\n\n```jsx\nimport { Cellulose, Cell } from 'cellulose'\nimport React from 'react'\n\nexport function MyComponent() {\n  const breakPoints = {\n    768:  'greater-than-768',\n    1024: 'greater-than-1024'\n  }\n\n  return (\n    \u003cCellulose columns={12} breakPoints={breakPoints}\u003e\n      \u003cCell spanOptions={{ 768: 6, 1024: 8 }}\u003e\n        \u003cdiv\u003eOne\u003c/div\u003e\n      \u003c/Cell\u003e\n      \u003cCell spanOptions={{ 768: 6, 1024: 4 }}\u003e\n        \u003cdiv\u003eTwo\u003c/div\u003e\n      \u003c/Cell\u003e\n    \u003c/Cellulose\u003e\n  )\n}\n```\n\nCellulose's `\u003cCell\u003e` components can even configure their own classes based on which `breakPoints` are activated!\n\n```jsx\nimport { Cellulose, Cell } from 'cellulose'\nimport React from 'react'\n\nexport function MyComponent() {\n  const breakPoints = {\n    768:  'greater-than-768',\n    1024: 'greater-than-1024'\n  }\n\n  return (\n    \u003cCellulose columns={12} breakPoints={breakPoints}\u003e\n      \u003cCell\n          spanOptions={{\n            768: { cols: 1, className: 'tabletMenu' },\n            1024: { cols: 2, className: 'desktopMenu' }\n          }}\u003e\n        \u003cdiv\u003eMenu-ish Stuff\u003c/div\u003e\n      \u003c/Cell\u003e\n      \u003cCell\n          spanOptions={{\n            768: { cols: 11, className: 'tabletContent' },\n            1024: { cols: 10, className: 'desktopContent' }\n          }}\u003e\n        \u003cdiv\u003eBody Content\u003c/div\u003e\n      \u003c/Cell\u003e\n    \u003c/Cellulose\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingzeal%2Fcellulose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingzeal%2Fcellulose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingzeal%2Fcellulose/lists"}