klutch v1.0.4

Klutch ·

Klutch is a lightweight, responsive layout system for React. It's simple by design and only uses 3 components: Row, Column, and Cell. You can combine these components to create clean, full-width layouts and not have to worry about styling.

Installation   |   Quickstart   |   Components   |   License

Installation

npm install klutch -s

Quickstart

import React from 'react';
import { Row, Column, Cell } from 'klutch';

const Layout = () => {
  return (
    <Row>
      <Column columnWidth="1/2">
        <Cell style={{ backgroundColor: '#FF9AA2' }} />
      </Column>
      <Column columnWidth="1/2">
        <Cell style={{ backgroundColor: '#FFB7B2' }} />
      </Column>
    </Row>
  );
};

export default Layout;

Renders

Columns of different widths

<Row>
  <Column columnWidth="1/8">
    <Cell style={{ backgroundColor: '#FFDAC1' }} />
  </Column>
  <Column columnWidth="1/8">
    <Cell style={{ backgroundColor: '#E2F0CB' }} />
  </Column>
  <Column columnWidth="1/4">
    <Cell style={{ backgroundColor: '#B5EAD7' }} />
  </Column>
  <Column columnWidth="1/2">
    <Cell style={{ backgroundColor: '#C7CEEA' }} />
  </Column>
</Row>

Renders:

Columns divisible by 3

<Row>
  <Column columnWidth="1/3">
    <Cell style={{ backgroundColor: '#FF9AA2' }} />
  </Column>
  <Column columnWidth="2/3">
    <Cell style={{ backgroundColor: '#FFB7B2' }} />
  </Column>
</Row>

Renders:

Columns divisible by 5

<Row>
  <Column columnWidth="1/5">
    <Cell style={{ backgroundColor: '#FFDAC1' }} />
  </Column>
  <Column columnWidth="2/5">
    <Cell style={{ backgroundColor: '#E2F0CB' }} />
  </Column>
  <Column columnWidth="2/5">
    <Cell style={{ backgroundColor: '#B5EAD7' }} />
  </Column>
</Row>

Renders:

Putting it all together

<div style={{ border: '2px solid #999999' }}>

  <Row gutter="20px" removeBottomGutter>
    <Column columnWidth="1">
      <Cell style={{ backgroundColor: '#FF9AA2' }} />
    </Column>
  </Row>

  <Row gutter="20px" removeBottomGutter>
    <Column columnWidth="1/2">
      <Cell style={{ backgroundColor: '#FFB7B2' }} />
    </Column>
    <Column columnWidth="1/2">
      <Cell style={{ backgroundColor: '#FFDAC1' }} />
    </Column>
  </Row>

  <Row gutter="20px" removeBottomGutter>
    <Column columnWidth="1/8">
      <Cell style={{ backgroundColor: '#E2F0CB' }} />
    </Column>
    <Column columnWidth="1/8">
      <Cell style={{ backgroundColor: '#B5EAD7' }} />
    </Column>
    <Column columnWidth="1/4">
      <Cell style={{ backgroundColor: '#C7CEEA' }} />
    </Column>
    <Column columnWidth="1/2">
      <Cell style={{ backgroundColor: '#FF9AA2' }} />
    </Column>
  </Row>

  <Row gutter="20px" removeBottomGutter>
    <Column columnWidth="1/3">
      <Cell style={{ backgroundColor: '#FFB7B2' }} />
    </Column>
    <Column columnWidth="2/3">
      <Cell style={{ backgroundColor: '#FFDAC1' }} />
    </Column>
  </Row>

  <Row gutter="20px">
    <Column columnWidth="1/5">
      <Cell style={{ backgroundColor: '#E2F0CB' }} />
    </Column>
    <Column columnWidth="3/5">
      <Cell style={{ backgroundColor: '#B5EAD7' }} />
    </Column>
    <Column columnWidth="1/5">
      <Cell style={{ backgroundColor: '#C7CEEA' }} />
    </Column>
  </Row>

</div>

Renders:

Components

<Row />

As the name suggests, a row component allows you to create rows of content. A row represents a full-width horizontal space with sections called columns.

Row props

<Column />

Columns break up a row into sections. For instance, to split a row into two equal sections, you can drop in two column components each with columnWidth set to 1/2.

The sum of all column widths within a single row must be equal to one.

Column props

<Cell />

Cell is an optional component that can be nested within a column. It's only purpose is to provide a full-width container within the column that can be custom styled. You can pass in CSS block via inline styles or assign it custom classNames and then style the element via CSS. You can also choose to omit this component and drop in a component of your choosing.

Cell props

License

This package is released under the MIT License.