grapefruit-ui v0.4.1

Grapefruit-ui

simple, lightweight, and configurable library with layout components

Install

npm install grapefruit-ui

Usage

First, you need to import styles to use the default grid (base 12 columns) and spacing (base 0.5rem) systems.

import 'grapefruit-ui/dist/styles.css';

Otherwise, please add css variables, eg:

:root {
  --grid-columns: 12;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
}

Example

import { Column, Container, Flex, Row } from 'grapefruit-ui';

import 'grapefruit-ui/dist/styles.css';

function App() {
  return (
    <div className="App">
      <Container style={{ border: '5px solid red' }}>
        <Flex justify="space-between">
          <div style={{ padding: 20, background: 'black' }} />
          <div style={{ padding: 20, background: 'black' }} />
          <div style={{ padding: 20, background: 'black' }} />
        </Flex>
        <Row>
          <Column sm={6} xl={4}><div  style={{ border: '2px solid green', padding: 20 }}/></Column>
          <Column sm={6} md={4} lg={6} xl={4}><div  style={{ border: '2px solid green', padding: 20 }}/></Column>
        </Row>
      </Container>
    </div>
  );
}

export default App;

API

All components are nothing but a wrap over div element, so they accept all its props.

Flex

Row

Column

By default, all columns have the same width.

The value, provided for the biggest breakpoint (eg. md) will be used for the remaining (eg. lg, xl, xxl).

Container

The max-width will be set respectively: