Layout-emotions NPM

Layout Emotions

Page layouting out of the box without using any css libraries/frameworks.

Change logs

enhancement: add basic margin and padding properties to row component from styled system/rebass

About

This is a very light-weight collection of layout components in js alongwith css classes for columns meant to be used for page layouting in css in js requirements/solutions.

Components

Container
Row
Col

Available columns classes (12 grid system):

Column	Generic	Extra small devices	Small devices	Medium devices	Large device	Extra large Device	Very Large device
Column 1	mcol-1	mcol-xs-1	mcol-sm-1	mcol-md-1	mcol-lg-1	mcol-xl-1	mcol-xxl-1
Column 2	mcol-2	mcol-xs-2	mcol-sm-2	mcol-md-2	mcol-lg-2	mcol-xl-2	mcol-xxl-2
Column 3	mcol-3	mcol-xs-3	mcol-sm-3	mcol-md-3	mcol-lg-3	mcol-xl-3	mcol-xxl-3
Column 4	mcol-4	mcol-xs-4	mcol-sm-4	mcol-md-4	mcol-lg-4	mcol-xl-4	mcol-xxl-4
Column 5	mcol-5	mcol-xs-5	mcol-sm-5	mcol-md-5	mcol-lg-5	mcol-xl-5	mcol-xxl-5
Column 6	mcol-6	mcol-xs-6	mcol-sm-6	mcol-md-6	mcol-lg-6	mcol-xl-6	mcol-xxl-6
Column 7	mcol-7	mcol-xs-7	mcol-sm-7	mcol-md-7	mcol-lg-7	mcol-xl-7	mcol-xxl-7
Column 8	mcol-8	mcol-xs-8	mcol-sm-8	mcol-md-8	mcol-lg-8	mcol-xl-8	mcol-xxl-8
Column 9	mcol-9	mcol-xs-9	mcol-sm-9	mcol-md-9	mcol-lg-9	mcol-xl-9	mcol-xxl-9
Column 10	mcol-10	mcol-xs-10	mcol-sm-10	mcol-md-10	mcol-lg-10	mcol-xl-10	mcol-xxl-10
Column 11	mcol-11	mcol-xs-11	mcol-sm-11	mcol-md-11	mcol-lg-11	mcol-xl-11	mcol-xxl-11
Column 12	mcol-12	mcol-xs-12	mcol-sm-12	mcol-md-12	mcol-lg-12	mcol-xl-12	mcol-xxl-12

Usage 1

import { Container, Row, Col } from "layout-emotions";

function About() {
  return (
    <Container>
      <Row>
        <Col md={6}>This is column 1</Col>
        <Col md={6}>This is column 2</Col>
      </Row>
    </Container>
  )
}
return default About;

Usage 2

import { Container, Row } from "layout-emotions";

function About() {
  return (
    <Container>
      <Row>
        <div className="mcol-6">This is column 1</div>
        <div className="mcol-6">This is column 2</div>
      </Row>
    </Container>
  )
}
return default About;

Above example is equivalent to the following in bootstrap:

function About() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-6">This is para1</div>
        <div className="col-6">This is para2</div>
      </div>
    </div>
  )
}

return default About;