{"id":23850564,"url":"https://github.com/manojadams/layout-emotions","last_synced_at":"2026-01-06T06:44:15.220Z","repository":{"id":90057840,"uuid":"605254379","full_name":"manojadams/layout-emotions","owner":"manojadams","description":"Styled components for layouting","archived":false,"fork":false,"pushed_at":"2024-07-26T20:52:13.000Z","size":774,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T10:19:27.503Z","etag":null,"topics":["column","container","css-in-js","layout","row","styled-components"],"latest_commit_sha":null,"homepage":"https://manojadams.github.io/layout-emotions/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manojadams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-22T19:21:28.000Z","updated_at":"2024-07-26T20:52:16.000Z","dependencies_parsed_at":"2024-01-13T09:58:41.559Z","dependency_job_id":"3da98593-9b45-4586-b3ab-781ad46c7e9a","html_url":"https://github.com/manojadams/layout-emotions","commit_stats":null,"previous_names":["manojgetwealthy/layout-emotions"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Flayout-emotions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Flayout-emotions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Flayout-emotions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Flayout-emotions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manojadams","download_url":"https://codeload.github.com/manojadams/layout-emotions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245768229,"owners_count":20668984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["column","container","css-in-js","layout","row","styled-components"],"created_at":"2025-01-02T22:30:36.939Z","updated_at":"2026-01-06T06:44:15.177Z","avatar_url":"https://github.com/manojadams.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Layout Emotions [![CodeFactor](https://www.codefactor.io/repository/github/manojadams/layout-emotions/badge)](https://www.codefactor.io/repository/github/manojadams/layout-emotions)\n\nPage layouting `out of the box` without using any css libraries/frameworks.\n\n## Change logs\n[enhancement: add basic margin and padding properties to row component from styled system/rebass](https://github.com/manojadams/layout-emotions/issues/13)\n\n## About \nThis 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.\n\n## Components\n* Container\n* Row\n* Col\n\n## Available columns classes (12 grid system):\n| Column | Generic | Extra small devices | Small devices | Medium devices | Large device | Extra large Device | Very Large device |\n|--------|---------|---------------------|---------------|----------------|--------------|--------------------|-------------------|\n| Column 1 | mcol-1 | mcol-xs-1 | mcol-sm-1 | mcol-md-1 | mcol-lg-1 | mcol-xl-1 | mcol-xxl-1 |\n| Column 2 | mcol-2 | mcol-xs-2 | mcol-sm-2 | mcol-md-2 | mcol-lg-2 | mcol-xl-2 | mcol-xxl-2 |\n| Column 3 | mcol-3 | mcol-xs-3 | mcol-sm-3 | mcol-md-3 | mcol-lg-3 | mcol-xl-3 | mcol-xxl-3 |\n| Column 4 | mcol-4 | mcol-xs-4 | mcol-sm-4 | mcol-md-4 | mcol-lg-4 | mcol-xl-4 | mcol-xxl-4 |\n| Column 5 | mcol-5 | mcol-xs-5 | mcol-sm-5 | mcol-md-5 | mcol-lg-5 | mcol-xl-5 | mcol-xxl-5 |\n| Column 6 | mcol-6 | mcol-xs-6 | mcol-sm-6 | mcol-md-6 | mcol-lg-6 | mcol-xl-6 | mcol-xxl-6 |\n| Column 7 | mcol-7 | mcol-xs-7 | mcol-sm-7 | mcol-md-7 | mcol-lg-7 | mcol-xl-7 | mcol-xxl-7 |\n| Column 8 | mcol-8 | mcol-xs-8 | mcol-sm-8 | mcol-md-8 | mcol-lg-8 | mcol-xl-8 | mcol-xxl-8 |\n| Column 9 | mcol-9 | mcol-xs-9 | mcol-sm-9 | mcol-md-9 | mcol-lg-9 | mcol-xl-9 | mcol-xxl-9 |\n| Column 10 | mcol-10 | mcol-xs-10 | mcol-sm-10 | mcol-md-10 | mcol-lg-10 | mcol-xl-10 | mcol-xxl-10 |\n| Column 11 | mcol-11 | mcol-xs-11 | mcol-sm-11 | mcol-md-11 | mcol-lg-11 | mcol-xl-11 | mcol-xxl-11 | \n| Column 12 | mcol-12 | mcol-xs-12 | mcol-sm-12 | mcol-md-12 | mcol-lg-12 | mcol-xl-12 | mcol-xxl-12 |\n  \n## Usage 1\n\n```tsx\nimport { Container, Row, Col } from \"layout-emotions\";\n\nfunction About() {\n  return (\n    \u003cContainer\u003e\n      \u003cRow\u003e\n        \u003cCol md={6}\u003eThis is column 1\u003c/Col\u003e\n        \u003cCol md={6}\u003eThis is column 2\u003c/Col\u003e\n      \u003c/Row\u003e\n    \u003c/Container\u003e\n  )\n}\nreturn default About;\n```\n\n## Usage 2\n\n```tsx\nimport { Container, Row } from \"layout-emotions\";\n\nfunction About() {\n  return (\n    \u003cContainer\u003e\n      \u003cRow\u003e\n        \u003cdiv className=\"mcol-6\"\u003eThis is column 1\u003c/div\u003e\n        \u003cdiv className=\"mcol-6\"\u003eThis is column 2\u003c/div\u003e\n      \u003c/Row\u003e\n    \u003c/Container\u003e\n  )\n}\nreturn default About;\n```\n\n### Above example is equivalent to the following in bootstrap:\n\n```html\nfunction About() {\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cdiv className=\"row\"\u003e\n        \u003cdiv className=\"col-6\"\u003eThis is para1\u003c/div\u003e\n        \u003cdiv className=\"col-6\"\u003eThis is para2\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nreturn default About;\n```\n\n## Give a ⭐️ if you liked this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanojadams%2Flayout-emotions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanojadams%2Flayout-emotions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanojadams%2Flayout-emotions/lists"}