manojadams/layout-emotions

Styled components for layouting

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;

Give a ⭐️ if you liked this project!

layout-emotions's Issues

bug: fix publish size

Detail

Current publish package size is 1.2 mb.

Expected

Reduce package publish size by 20kb and should only include dist folders.

Row container width contains extra space on right

Add utility for adding gaps

enhancement: add column component

Add a column component which can be imported and used by others as a column component.

Bug: small column classes are overriding bigger column classes

Detail

styles from classname mcol-sm-12 is overriding styles from classname mcol-md-3.

Usage

Expectation

In above example, for width less than 576px, the width should be 100% and for width greater than 768px, the width should be 25%.

Actual result

For any device width, the column width is always 100%.

feature: add advanced layouting /grouping options

Summary

Fields in the same page must be able to be grouped in different boxes.

enhancement: add support of basic spacing properties in row component

Description

Add support for padding and margin properties from styled-system/rebass.

Ref:

• https://rebass-v3.vercel.app/props
• https://github.com/rebassjs/rebass
• https://github.com/styled-system/styled-system