grids-styled-components v0.1.1

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

Column

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