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

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i grids-styled-components

      Weekly Downloads

      1

      Version

      0.1.1

      License

      ISC

      Unpacked Size

      17.1 kB

      Total Files

      3

      Last publish

      Collaborators

      • inozura