grids-styled-components

    0.1.1 • Public • Published

    grids-styled-components

    Grid system of styled-components with similar naming

    Features

    • Container: for wrap component with calculate padding
    • Row: for wrap component using property flex-wrap
    • Column: for wrap component with responsive view
    • Display flex and inline-flex

    Installing

    note!: before you install grids-styled-components you need to install styled-components first

    Using npm:

    $ npm install styled-components grids-styled-components

    Using npm:

    $ yarn add styled-components grids-styled-components

    Props API

    Container

    Type props Extra Small (xs) <576px Small (sm) ≥576px Medium (md) ≥768px Large (lg) ≥992px X-Large (xl) ≥1200px XX-Large (xxl) ≥1400px
    None 100% 540px 720px 960px 1140px 1320px
    sm 100% 540px 720px 960px 1140px 1320px
    md 100% 100% 720px 960px 1140px 1320px
    lg 100% 100% 100% 960px 1140px 1320px
    xl 100% 100% 100% 100% 1140px 1320px
    xxl 100% 100% 100% 100% 100% 1320px

    Column

    xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1400px
    Column max-width None (auto) 540px 720px 960px 1140px 1320px
    Type props None col-sm- col-md- col-lg- col-xl- col-xxl-

    Example

    import { Container, Row, Col } from "grids-styled-components";
    
    <Container>
      <Row>
        <Col type="col-md-6">Hi, my name is</Col>
        <Col type="col-md-6">Novandra Zulfi Ramadhan</Col>
      </Row>
    </Container>

    You can also add props like classname or style

    import { Container, Row, Col } from "grids-styled-components";
    
    <Container>
      <Row>
        <Col type="col-md-6" className="first" style={{backgroundColor: "purple"}}>Hi, my name is</Col>
        <Col type="col-md-6" className="second" style={{backgroundColor: "skyblue"}}>Novandra Zulfi Ramadhan</Col>
      </Row>
    </Container>

    and You can add styling to the component as you like

    import styled from "styled-components";
    import { Container, Row, Col } from "grids-styled-components";
    
    const SRow = styled(Row)`
      margin: 20px 0;
      overflow-y: hidden;
    `
    
    export default Home = () => {
      <Container>
        <SRow>
          <Col type="col-md-6" className="first" style={{backgroundColor: "purple"}}>Hi, my name is</Col>
          <Col type="col-md-6" className="second" style={{backgroundColor: "skyblue"}}>Novandra Zulfi Ramadhan</Col>
        </SRow>
      </Container>
    }

    Credits

    grids-styled-components is inspired by the bootstrap grid system But implement in javascript using react and styled-components;

    Follow Me

    Facebook Instagram Twitter Linkedin Youtube
    Facebook Instagram Twitter Linkedin Youtube

    Install

    npm i grids-styled-components

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    ISC

    Unpacked Size

    17.1 kB

    Total Files

    3

    Last publish

    Collaborators

    • inozura