cherry-grid
Cherry Grid
Last updated 2 months ago by luangjokaj .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cherry-grid 
SYNC missed versions from official npm registry.

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

Single purpose CSS classes

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

Current Tags

  • 0.1.8                                ...           latest (2 months ago)

18 Versions

  • 0.1.8                                ...           2 months ago
  • 0.1.7                                ...           2 months ago
  • 0.1.6                                ...           2 months ago
  • 0.1.5                                ...           2 months ago
  • 0.1.4                                ...           2 months ago
  • 0.1.3                                ...           2 months ago
  • 0.1.2                                ...           2 months ago
  • 0.1.1                                ...           2 months ago
  • 0.1.0                                ...           2 months ago
  • 0.0.9                                ...           2 months ago
  • 0.0.8                                ...           2 months ago
  • 0.0.7                                ...           2 months ago
  • 0.0.6                                ...           2 months ago
  • 0.0.5                                ...           2 months ago
  • 0.0.4                                ...           2 months ago
  • 0.0.3                                ...           2 months ago
  • 0.0.2                                ...           2 months ago
  • 0.0.1                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 18
Last Day 0
Last Week 0
Last Month 17
Dependencies (0)
None
Dependents (2)

Copyright 2014 - 2016 © taobao.org |