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
Cellulose is a React layout library that allows you to create contextually aware components using flexbox.
The <Cellulose> 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 <Cellulose> component to define a container that you want to style based on internal width.
<Cellulose> will render into the DOM as a <div> whose class is determined by which breakPoint in breakPoints its own width exceeds.
import { Cellulose } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
<Cellulose breakPoints={breakPoints}>
<div>Content</div>
</Cellulose>
)
}Cellulose can also be used to create a responsive grid. Use the prop columns= of <Cellulose> to define the number of columns to use, then add <Cell> components with spanOptions props that define responsive behavior
import { Cellulose, Cell } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
<Cellulose columns={12} breakPoints={breakPoints}>
<Cell spanOptions={{ 768: 6, 1024: 8 }}>
<div>One</div>
</Cell>
<Cell spanOptions={{ 768: 6, 1024: 4 }}>
<div>Two</div>
</Cell>
</Cellulose>
)
}Cellulose's <Cell> components can even configure their own classes based on which breakPoints are activated!
import { Cellulose, Cell } from 'cellulose'
import React from 'react'
export function MyComponent() {
const breakPoints = {
768: 'greater-than-768',
1024: 'greater-than-1024'
}
return (
<Cellulose columns={12} breakPoints={breakPoints}>
<Cell
spanOptions={{
768: { cols: 1, className: 'tabletMenu' },
1024: { cols: 2, className: 'desktopMenu' }
}}>
<div>Menu-ish Stuff</div>
</Cell>
<Cell
spanOptions={{
768: { cols: 11, className: 'tabletContent' },
1024: { cols: 10, className: 'desktopContent' }
}}>
<div>Body Content</div>
</Cell>
</Cellulose>
)
}