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

Property	Type	Default value
display	`flex	inline-flex`
direction	CSSProperties.FlexDirection	-
wrap	CSSProperties.FlexWrap	-
justify	CSSProperties.JustifyContent	-
justifySelf	CSSProperties.JustifySelf	-
justifyItems	CSSProperties.JustifyItems	-
align	CSSProperties.AlignItems	-
alignSelf	CSSProperties.AlignItems	-
alignContent	CSSProperties.AlignContent	-
order	CSSProperties.Order	-
grow	CSSProperties.FlexGrow	-
shrink	CSSProperties.FlexShrink	-
basis	CSSProperties.FlexBasis	-
flex	CSSProperties.Flex	-

Row

Property	Type	Default value
wrap	CSSProperties.FlexWrap	wrap
direction	CSSProperties.FlexDirection	-

Column

By default, all columns have the same width.

Property	Breakpoint	Type	Default value
xs	< 576px	number	-
sm	< 768px	number	-
md	< 1024px	number	-
lg	< 1280px	number	-
xl	< 1366px	number	-
xxl	>= 1366px	number	-

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

Container

Property	Description	Type	Default value
fullwidth	Removes max-width	Boolean	false

The max-width will be set respectively:

Breapoint	< 576px	< 768px	< 1024px	< 1280px	< 1366px
max-width	520px	690px	920px	1152px	1230px