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