Nine Pomeranian Monsters

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

    2.0.0 • Public • Published

    emotion-flex

    Build Status Coverage Status NPM MIT License code style: prettier

    Fully customizable responsive grid system build with emotion, based on Bootstrap.

    Install

    WARNING For emotion 10 use v1.x.x of emotion-flex

    npm i --save emotion-flex @emotion/react @emotion/styled
    
    # or
    
    yarn add emotion-flex @emotion/react @emotion/styled

    Usage

    Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>. from Bootstrap docs

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    Make sure you reset box-sizing somewhere in global styles:

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
    
    html {
      box-sizing: border-box;
    }
    import React, { Component } from 'react'
    
    import { Container, Row, Col } from 'emotion-flex'
    
    class Example extends Component {
      render () {
        return (
          <Container>
            <Row>
              <Col xs={12} sm={6} md={4} lg={3}>1st column</Col>
              <Col xs={12} sm={6} md={4} lg={3}>2nd column</Col>
            </Row>
          </Container>
        )
      }
    }

    API

    Container

    props type description
    fluid boolean Equivalent to Bootstrap's container and container-fluid

    Row

    props type description
    noGutters boolean Remove Row's negative margins

    Col

    props type description
    noGutters boolean Removes the padding around Column
    xsOffset number (2-11) The number of columns to offset on extra small devices
    xsOrder number or "first" or "last" Sets the order on extra small devices
    xs number (1-12) The number of columns to span on extra small devices
    smOffset number (2-11) The number of columns to offset on small devices
    smOrder number or "first" or "last" Sets the order on small devices
    sm number (1-12) The number of columns to span on small devices
    mdOffset number (2-11) The number of columns to offset on medium devices
    mdOrder number or "first" or "last" Sets the order on medium devices
    md number (1-12) The number of columns to span on medium devices
    lgOffset number (2-11) The number of columns to offset on large devices
    lgOrder number or "first" or "last" Sets the order on large devices
    lg number (1-12) The number of columns to span on large devices
    xlOffset number (2-11) The number of columns to offset on extra large devices
    xlOrder number or "first" or "last" Sets the order on extra large devices
    xl number (1-12) The number of columns to span on extra large devices

    Theming

    import React, { Component } from 'react'
    import { ThemeProvider } from '@emotion/react'
    
    import { Container, Row, Col } from 'emotion-flex'
    
    const customTheme = {
      breakpoints: {
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
      },
      maxWidths: {
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
      },
      gutters: 16
    };
    
    class Example extends Component {
      render () {
        return (
          <ThemeProvider theme={customTheme}>
            <Container>
              <Row>
                <Col xs={12} sm={6} md={4} lg={3}>1st column</Col>
                <Col xs={12} sm={6} md={4} lg={3}>2nd column</Col>
              </Row>
            </Container>
          </ThemeProvider>
        )
      }
    }

    Default theme:

    {
      breakpoints: {
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
      },
      maxWidths: {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140,
      },
      gutters: 15,
    }

    Other projects

    License

    MIT © janczizikow

    Install

    npm i emotion-flex

    DownloadsWeekly Downloads

    46

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    76.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • janczizikow