layout-emotions

Layout Emotions

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

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

Available columns classes (12 grid system):

• 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

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

function About() {
  return (
    <Container>
      <Row>
        <div className="mcol-6">This is para1</div>
        <div className="mcol-6">This is para2</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;