npm

Need private packages and team management tools?Check out npm Orgs. »

cherry-grid

0.1.8 • Public • Published

Cheery Logo

Introduction

Cherry is a live inventory of definitions for the UI components, design patterns, naming conventions, brand assets and code guidelines.

This is the official repository for the Cherry Grid - NPM Library.

Installation

npm install cherry-grid

The Grid

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;

Grid Components

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 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 . 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.

Single purpose CSS classes

@import 'cherry-grid/dist/css/styles.css';

install

npm i cherry-grid

Downloadsweekly downloads

84

version

0.1.8

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability