/lattice

Primary LanguageTypeScript

@mollycule/lattice

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

Build Status MIT License Contributors LinkedIn


Logo

Lattice

CSS Grid based layout renderer based on styled-components and styled-system
Explore the docs »

View Demo · Report Bug · Request Feature . NPM Link

Table of Contents

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 Logo

Built With

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 - paramsinghvc@gmail.com

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

Acknowledgements