@mollycule/lattice

CSS Grid based layout renderer based on styled-components and styled-system

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgements

About The Project

Lattice is a standard CSS Grid approach to create make layouting a breeze in your React apps.

It has support for making bootstrap like responsive layouts very easily in CSS in JS ecosystems, making it very suitable for modern day React ecosystem

Built With

• Styled Components 💅
• Styled System
• TypeScript
• Create React Library

Getting Started

Prerequisites

Following Peer Dependencies are required for using uselattice package:

• react: "^16.0.0"

Install

npm install --save @mollycule/lattice

yarn add @mollycule/lattice

Usage

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { Grid, Cell as BaseCell, BREAKPOINTS } from '@mollycule/lattice'

const Cell = styled(BaseCell)`
  min-height: 50px;
  background: mediumslateblue;
  color: white;
`

const App = () => (
  <ThemeProvider theme={{ breakpoints: BREAKPOINTS }}>
    <Grid
      width='70vw'
      mx='auto'
      gap='3px'
      cols={{ xs: 2, sm: 3, md: 4 }}
      height='500px'
      alignContent='center'
      alignItems='center'
      justifyContent='center'
      justifyItems='start'
    >
      <Cell x-offset='3' x-span='2'>
        1
      </Cell>
      <Cell y-offset={{ sm: '2', md: '1' }} y-span={{ sm: '1', md: '2' }}>
        2
      </Cell>
      <Cell>
        <Box pt='5px' fontWeight='bold' color='aqua'>
          3
        </Box>
      </Cell>
      <Cell x-span={{ sm: '2', md: '1' }}>4</Cell>
    </Grid>
  </ThemeProvider>
)

The library exports Grid, Cell and a general usage Box for general use divs. Using these, there won't be a need of writing a styled component ever. All the particular styles can be inlined by virtue of styled-system properties.

The styled components being extendable makes the generic Box component to be wrapped around for more specific frequently used elements when needed.

API

Grid Props

| Prop Name | Value Type | Example | Mapped CSS property | | -------------- | ---------------- | ----------------------------------------------------- | ----------------------- | | gap | string | gap='2px' | grid-gap | | rowGap | string | rowGap='2px' | grid-row-gap | | columnGap | string | columnGap='2px' | grid-column-gap | | alignItems | string | alignItems='center' | align-items | | alignContent | string | alignContent='center' | align-content | | justifyItems | string | justifyItems='center' | justify-items | | justifyContent | string | justifyContent='center' | justify-content | | cols | number or string | cols={2} or cols='repeat(3, minmax(200px, auto))' | grid-template-columns | | flow | string | flow='row' | grid-auto-flow | | areas | string[] | areas={['a a b', 'c c b']}' | grid-template-areas |

Cell Props

| Prop Name | Value Type | Example | Mapped CSS property | | --------- | ---------- | -------------- | ------------------- | | area | string | area='a' | grid-area | | x-offset | string | x-offset='2' | grid-column-start | | x-span | string | x-span='2' | grid-column-end | | y-offset | string | y-offset='3' | grid-row-start | | y-span | string | y-span='2' | grid-row-end |

All the above property values are responsive compatible, which can be specified based on the breakpoints approach of styled-system. A default breakpoint is also exported from the library based on Bootstrap responsive system.

export const BREAKPOINTS = {
  xs: 0,
  sm: '480px',
  md: '768px',
  lg: '1024px'
}

Note: Please use string values most of the time in order to prevent automatic suffixing of numeric values by 'px' in React as these custom properties don't fall under React unitless properties.

License

MIT © paramsinghvc

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Param Singh - @paramsinghvc - [email protected]

Project Link: https://github.com/paramsinghvc/lattice

Acknowledgements

• Styled CSS Grid
• GitHub Emoji Cheat Sheet
• Img Shields