emotion-flex-grid
TypeScript icon, indicating that this package has built-in type declarations

2.4.0 • Public • Published

Emotion Flex Grid

npm Travis (.org) npm npm

A simple, responsive flexbox grid. Made with Emotion.

Getting started

Make sure you have set up emotion with styled correctly. See the Emotion docs for more info. After that, install this package with NPM and import the components you need in your React application. For a detailed description about using the components, please see the Components section.

npm i emotion-flex-grid
import React from 'react'
import { GridWrap, GridRow, GridColumn } from 'emotion-flex-grid'

const App = () => (
  <section>
    <GridColumn mx={['s', 'm']}>
      <GridWrap>
        <GridRow>
          <GridColumn width={[12, 3]}>
            <div>Content</div>
          </GridColumn>
          <GridColumn width={[12, 3]}>
            <div>Content</div>
          </GridColumn>
          <GridColumn width={[12, 3]}>
            <div>Content</div>
          </GridColumn>
        </GridRow>
      </GridWrap>
    </GridColumn>
  </section>
)

For a full example, check out the demo.

Components

This package comes with 3 components: GridWrap, GridRow and GridColumn. With these components you can set up a complete grid for your website. Columns are based on a 12 column grid system. Below you can see a full overview of each component and the props you can pass to each component.

Numeric values will automatically be converted to a pixel value by Emotion. You can pass an array of values (specified below for each component) to set values for different breakpoints (mobile-first). To skip breakpoints, you can use null. See the Customization section for more info on changing the default breakpoints, spacings and other defaults.

Responsive display

Each component has a display prop, which can be used to change the css display property. You can use this to hide or show elements on specific breakpoints.

<GridWrap />

Use this component to place your content inside a container with a maximum width. Will always center horizontally. Has a default max-width of 1200px.

Prop Description Values
display display string
maxWidth max-width number string
// Numeric value
<GridWrap maxWidth={1200} />

// Custom string value
<GridWrap maxWidth='1200rem' />

// Disable max-width
<GridWrap maxWidth='none' />

// Array of values for different breakpoints
<GridWrap maxWidth={['none', 960, 1200 ]} />

<GridRow />

Use this component in combination with GridColumn. All props are optional.

Prop Description Values
display display string
wrap flex-wrap wrap wrap-reverse nowrap wrap
direction flex-direction row row-reverse column column-reverse
align align-items start center end
justify justify-content start center end between around
<GridRow wrap='nowrap' align='center' justify='between'>
  <GridColumn />
  <GridColumn />
  <GridColumn />
</GridRow>

<GridColumn />

Use this component inside a GridRow or use it standalone. All props are optional. When no width and flex are given, columns will automatically flex (when inside a GridRow).

Prop Description Values
display display string
width width 1 to 12 string
offset offset same as width
order flex order number
align align-self start center end
textAlign text-align left right center
flex flex string
p padding xs s m l xl xxl
px horizontal padding xs s m l xl xxl
py vertical padding xs s m l xl xxl
pt padding-top xs s m l xl xxl
pr padding-right xs s m l xl xxl
pb padding-bottom xs s m l xl xxl
pl padding-left xs s m l xl xxl
m margin xs s m l xl xxl
mx horizontal margin xs s m l xl xxl
my vertical margin xs s m l xl xxl
mt margin-top xs s m l xl xxl
mr margin-right xs s m l xl xxl
mb margin-bottom xs s m l xl xxl
ml margin-left xs s m l xl xxl
<GridRow>
  <GridColumn width={4} p={['s', 'm']} />
  <GridColumn width={4} p={['s', 'm']} />
  <GridColumn width={4} p={['s', 'm']} />
</GridRow>

Customization

This package comes with default values for the breakpoints, spacings, max-width and flex-direction. If you want to use other values than specified in this package, you need to set up theming in your project. See the Emotion Theming docs to set this up quickly. When you have set up theming, create a theme configuration. Below is an example of the theme configuration used in this package:

const theme = {
  breakpoints: {
    xs: 480,
    s: 768,
    m: 1024,
    l: 1280,
    xl: 1440,
    xxl: 1920
  },
  spacings: {
    xs: 5,
    s: 10,
    m: 15,
    l: 20,
    xl: 30,
    xxl: 60
  },
  defaults: {
    grid: {
      wrap: {
        maxWidth: 1200
      }
    }
  }
}

Simply copy this configuration to your own theme configuration and adjust the values for your project.

Note: make sure you don't change the structure of the configuration above, otherwise things will break!

Inspiration

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.4.0
    33
    • latest

Version History

Package Sidebar

Install

npm i emotion-flex-grid

Weekly Downloads

46

Version

2.4.0

License

ISC

Unpacked Size

33.3 kB

Total Files

5

Last publish

Collaborators

  • rann91