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

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

    Install

    npm i emotion-flex-grid

    DownloadsWeekly Downloads

    174

    Version

    2.3.0

    License

    ISC

    Unpacked Size

    33.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • rann91