Cherry - Design System

    • Introduction
    • Code Guidelines
    • Sketch
    • Typography
    • Styling Structure
    • CSS Grid
    • React Grid

React Grid

Cherry comes with it's own set of modules. Every little part of the design system should be componentized and available as a stand alone NPM package. This means that you install only what will be used.


🍒 Cherry Grid

💾 Repository - 📦 NPM Package

To install Cherry Grid, run the command:

npm install cherry-grid

Refer to page: CSS Grid for more detailed explanation on how the styling works. Below you will find a typical example of the grid usage.

import React from 'react';
import styles from './App.css';
import { Container, Row, Col } from 'cherry-grid';

function App() {
    return (
        <div>
            <Container>
                <Row>
                    <Col className={styles.border} xs={4}>1</Col>
                    <Col className={styles.border} xs={4}>2</Col>
                    <Col className={styles.border} xs={4}>3</Col>
                </Row>
            </Container>
        </div>
    );
}

export default App;

Container

The <Container> component is meant to be always the top level parent. They have a few properties available:

  • className - string - You can pass a className. Default: not set.
  • fluid - boolean - Defines wheather the container should go full width, thus fluid. Default: false.
  • children - any - Container children elements. Default: not set.

Row

The <Row> component is a direct or non direct child of the <Container> component. Is comes with a few properties:

  • className - string - You can pass a className. Default: not set.
  • children - any - Container children elements. Default: not set.
  • alignItems - string - Use the align-items property to align the items vertically. Default: not set.
  • justifyContent - string - Use the justify-content property to align the items horizontally. Default: not set.

Col

Col stands for column. The <Col> component should always be a direct child of the <Row>. Available properties:

  • id - string - Columns can have html ID's. Default: not set.
  • className - string - You can pass a className. Default: not set.
  • children - any - Container children elements. Default: not set.
  • textAlign - string - Text align property. Default: not set.
  • children - any - Container children elements. Default: not set.
  • xs - number - Define which grid layout should be rendered on xs media query. Default: not set.
  • sm - number - Define which grid layout should be rendered on sm media query. Default: not set.
  • md - number - Define which grid layout should be rendered on md media query. Default: not set.
  • lg - number - Define which grid layout should be rendered on lg media query. Default: not set.
  • xl - number - Define which grid layout should be rendered on xl media query. Default: not set.
  • xxl - number - Define which grid layout should be rendered on xxl media query. Default: not set.
  • xxxl - number - Define which grid layout should be rendered on xxxl media query. Default: not set.
  • first - boolean - Define if the element should go first. Default: false.
  • firstSm - boolean - Define if the element should go first on sm media query. Default: false.
  • firstMd - boolean - Define if the element should go first on md media query. Default: false.
  • firstLg - boolean - Define if the element should go first on lg media query. Default: false.
  • firstXl - boolean - Define if the element should go first on xl media query. Default: false.
  • firstXxl - boolean - Define if the element should go first on xxl media query. Default: false.
  • firstXxxl - boolean - Define if the element should go first on xxxl media query. Default: false.
  • last - boolean - Define if the element should go last. Default: false.
  • lastSm, - boolean - Define if the element should go last on sm media query. Default: false.
  • lastMd - boolean - Define if the element should go last on md media query. Default: false.
  • lastLg - boolean - Define if the element should go last on lg media query. Default: false.
  • lastXl - boolean - Define if the element should go last on xl media query. Default: false.
  • lastXxl - boolean - Define if the element should go last on xxl media query. Default: false.
  • lastXxxl - boolean - Define if the element should go last on xxxl media query. Default: false.

Media queries

Extra Small Small Medium Large XL Large XX Large XXX Large
Min container width 0 576px 768px 992px 1200px 1440px 1920px
Class suffix .col12-xs .col12-sm .col12-md .col12-lg .col12-xl .col12-xxl .col12-xxxl