Better than Media Queries

Components are responsive to their own size, rather than window size

Granular

Your custom components can each manage their own grid

Easy Breakpoints

Define breakpoints with a simple Javascript object, give each UI component its own custom grid

Getting Started

<Cellulose> will render into the DOM as a <div> whose class is defined by the breakPoints object and the width the component 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>
  )
}

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

Usage

Cellulose can also be used to create a responsive grid. Use the columns property 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>
  )
}

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

Better than Media Queries

Granular

Easy Breakpoints

Getting Started

Installation

Npm

Yarn

Usage