Skip to content
πŸ’ Cherry - CSS Grid
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
lib
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
postcss.config.js

README.md

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';
You can’t perform that action at this time.