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>
  )
}