https://github.com/codingzeal/cellulose
[DEPRECATED] React Flexible Contextual Layout Components
https://github.com/codingzeal/cellulose
Last synced: 12 months ago
JSON representation
[DEPRECATED] React Flexible Contextual Layout Components
- Host: GitHub
- URL: https://github.com/codingzeal/cellulose
- Owner: CodingZeal
- License: mit
- Created: 2017-02-11T01:12:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-14T23:10:34.000Z (about 7 years ago)
- Last Synced: 2025-06-22T12:51:37.358Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.37 MB
- Stars: 17
- Watchers: 16
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `DEPRECATED`
## End of Life
Cellulose 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.
---
# Cellulose
[](https://github.com/bmatto/cellulose/issues)
[]()
[](https://raw.githubusercontent.com/bmatto/cellulose/master/LICENSE)
Cellulose is a React layout library that allows you to create contextually aware components using flexbox.
The `` component uses its own rendered width to assign style and responsive behavior, rather than the width of the browser window.
## Installation
`npm i -S cellulose` or `yarn add cellulose`
## Usage
Use the `` component to define a container that you want to style based on internal width.
`` will render into the DOM as a `
` whose class is determined by which breakPoint in `breakPoints` its own width exceeds.
```jsx
import { Cellulose } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
Content
)
}
```
Cellulose can also be used to create a responsive grid. Use the prop `columns=` of `` to define the number of columns to use, then add `` components with `spanOptions` props that define responsive behavior
```jsx
import { Cellulose, Cell } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
One
Two
)
}
```
Cellulose's `` components can even configure their own classes based on which `breakPoints` are activated!
```jsx
import { Cellulose, Cell } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
Menu-ish Stuff
Body Content
)
}
```