native-layout-emotions v1.0.0

Native 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
• Col

Available columns classes (12 grid system):

Usage 1

import { Container, Row, Col } from "native-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 "native-layout-emotions";

function About() {
  return (
    <Container>
      <Row>
        <View className="mcol-6">This is column 1</View>
        <View className="mcol-6">This is column 2</View>
      </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;

Give a ⭐️ if you liked this project!