Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
layout-emotions
Advanced tools
layout-emotions - npm Package Compare versions
Comparing version 1.0.9 to 1.0.10
| { | ||
| "name": "layout-emotions", | ||
| "version": "1.0.9", | ||
| "version": "1.0.10", | ||
| "description": "Collection of layout emotion components", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -1,12 +0,61 @@ | ||
| # Layout Emotions | ||
| # Layout Emotions [](https://www.codefactor.io/repository/github/manojgetwealthy/layout-emotions) | ||
| [](https://www.codefactor.io/repository/github/manojgetwealthy/layout-emotions) | ||
| Page layouting `out of the box` without using any css libraries/frameworks. | ||
| A collection of layout components meant to be used for `css in js` requirements. | ||
| ## 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. | ||
| ## Change logs | ||
| Fix container width | ||
| ## 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 | ||
| ````tsx | ||
| 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: | ||
| ````html | ||
| 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; | ||
| ```` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.4%
19266
- Number of lines in readme file
- increased by369.23%
61
No dependency changes