{"id":13496236,"url":"https://github.com/kettanaito/atomic-layout","last_synced_at":"2025-04-14T08:16:33.220Z","repository":{"id":32418065,"uuid":"132780196","full_name":"kettanaito/atomic-layout","owner":"kettanaito","description":"Build declarative, responsive layouts in React using CSS Grid.","archived":false,"fork":false,"pushed_at":"2023-01-07T09:37:03.000Z","size":8259,"stargazers_count":1129,"open_issues_count":33,"forks_count":33,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-14T08:16:26.842Z","etag":null,"topics":["atom","atomic-design","atomic-layout","composition","css-grid","layout","react","responsive-props","styled-components"],"latest_commit_sha":null,"homepage":"https://redd.gitbook.io/atomic-layout","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/kettanaito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"atomic-layout"}},"created_at":"2018-05-09T15:52:48.000Z","updated_at":"2025-03-13T21:59:08.000Z","dependencies_parsed_at":"2023-01-14T21:15:19.850Z","dependency_job_id":null,"html_url":"https://github.com/kettanaito/atomic-layout","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Fatomic-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Fatomic-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Fatomic-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kettanaito%2Fatomic-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kettanaito","download_url":"https://codeload.github.com/kettanaito/atomic-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844000,"owners_count":21170499,"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":["atom","atomic-design","atomic-layout","composition","css-grid","layout","react","responsive-props","styled-components"],"created_at":"2024-07-31T19:01:44.307Z","updated_at":"2025-04-14T08:16:33.166Z","avatar_url":"https://github.com/kettanaito.png","language":"TypeScript","funding_links":["https://opencollective.com/atomic-layout"],"categories":["TypeScript","Libraries and components","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["React"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kettanaito/atomic-layout/master/logo-full.png\" width=\"400\" alt=\"Atomic Layout logo\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Discord channel](https://img.shields.io/discord/102860784329052160.svg?label=Chat\u0026logo=discord\u0026style=flat\u0026color=%237B85FF)][community-reactiflux]\n\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n**Atomic Layout** is a spatial distribution library for React. It uses [CSS Grid][css-grid] to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.\n\n```jsx\nimport React from 'react'\nimport { Composition } from 'atomic-layout'\n\n// Define layout areas: visual representation\n// of what composes a layout, detached from\n// what components are actually rendered.\nconst areasMobile = `\n  thumbnail\n  header\n  footer\n`\n\n// Declare responsive changes of your areas.\n// Operate in two dimensions, remove areas\n// or introduce new ones.\nconst areasTablet = `\n  thumbnail header\n  thumbnail footer\n`\n\nconst Card = ({ title, imageUrl, actions }) =\u003e (\n  \u003cComposition areas={areasMobile} areasMd={areasTablet} gap={20}\u003e\n    {/* Get React components based on provided areas */}\n    {({ Thumbnail, Header, Footer }) =\u003e (\n      \u003cReact.Fragment\u003e\n        \u003cThumbnail\u003e\n          {/* Render anything, including another Composition */}\n          \u003cimg src={imageUrl} alt={title} /\u003e\n        \u003c/Thumbnail\u003e\n        {/* Preserve semantics with polymorphic prop */}\n        \u003cHeader as=\"h3\"\u003e{title}\u003c/Header\u003e\n        {/* Responsive props: just suffix with a breakpoint name */}\n        \u003cFooter padding={10} paddingMd={20}\u003e\n          {actions}\n        \u003c/Footer\u003e\n      \u003c/React.Fragment\u003e\n    )}\n  \u003c/Composition\u003e\n)\n\nexport default Card\n```\n\n\u003e Atomic Layout is responsive-first. It uses [Bootstrap 4 breakpoints][bootstrap-4-breakpoints] by default, which you can always [customize for your needs](https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints).\n\n## Motivation\n\nModern layout development is about modularity and composition. Following the best practices of [Atomic design][atomic-design], we strive toward independent UI units that gradually compose into more meaningful pieces. While the attention paid to units implementation is thorough, we often overlook how to achieve layout composition that scales. It's as if we forget that _spacing defines composition_.\n\nWhen it comes to distributing the spacing things get more difficult. First of all, true contextless spacing is hard. To make things worse, all present solutions couple spacing with UI elements, inevitably making small reusable pieces **contextful** and, thus, hard to maintain.\n\nAtomic Layout helps you to compose your elements by introducing a dedicated spacing layer called _Composition_. It encourages you to separate concerns between UI elements' visual appearance and spacing between them. With the first-class responsive support at your disposal you can build gorgeous responsive permutations of your elements without leaving the dedicated spacing layer, keeping UI elements contextless and predictable. Embrace the era of a true layout composition!\n\n## Implementations\n\nAtomic Layout has multiple implementations depending on the styling solution:\n\n| Package name                                                 | Latest version                                                                                                                      | Styling library     |\n| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- |\n| [`atomic-layout`](./packages/atomic-layout)                  | [![Package version](https://img.shields.io/npm/v/atomic-layout.svg)](https://www.npmjs.com/package/atomic-layout)                   | `styled-components` |\n| [`@atomic-layout/emotion`](./packages/atomic-layout-emotion) | [![Package version](https://img.shields.io/npm/v/@atomic-layout/emotion.svg)](https://www.npmjs.com/package/@atomic-layout/emotion) | `@emotion/styled`   |\n\n## Documentation\n\n\u003e **See the [Official documentation][atomic-layout-docs].**\n\nHere are some shortcuts for quick access:\n\n- [Motivation](https://redd.gitbook.io/atomic-layout/motivation)\n- [**Getting started**](https://redd.gitbook.io/atomic-layout/getting-started)\n- [Responsive props](https://redd.gitbook.io/atomic-layout/fundamentals/responsive-props)\n- [Recipes](https://redd.gitbook.io/atomic-layout/recipes/semantics)\n\n## Examples\n\n\u003e Although the examples below use `atomic-layout` package, they are fully compatible with other styling implementations of the library (i.e. `@atomic-layout/emotion`).\n\n### Basics\n\n\u003ctable border=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/basic-composition-5mvlr\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/basic-composition.jpg\" alt=\"Basic composition: square and circle\" /\u003e\n        \u003ch4\u003eBasic composition\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eCombine two UI elements into a single one using Composition.\u003c/p\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/responsive-props-8m14f\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/responsive-props.jpg\" alt=\"Component with responsive props\" /\u003e\n        \u003ch4\u003eResponsive props\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eChange a prop's value depending on a breakpoint.\u003c/p\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/nested-composition-8p8pk\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/nested-composition.jpg\" alt=\"Composition of other compositions\" /\u003e\n        \u003ch4\u003eNested composition\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eAny element can be a composition \u003ci\u003eand\u003c/i\u003e a composite at the same time.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Intermediate\n\n\u003ctable border=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/conditional-rendering-4k90o\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/conditional-rendering.jpg\" alt=\"Conditional rendering\" /\u003e\n        \u003ch4\u003eConditional rendering\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eRender or display elements conditionally based on breakpoints.\u003c/p\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/custom-configuration-d01ku\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/custom-configuration.jpg\" alt=\"Custom configuration\" /\u003e\n        \u003ch4\u003eCustom configuration\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eConfigure a default measurement unit, custom breakpoints, and responsive behaviors.\u003c/p\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33%\" valign=\"top\"\u003e\n      \u003ca href=\"https://codesandbox.io/s/atomic-layout-query-d2mdl\" target=\"_blank\"\u003e\n        \u003cimg src=\"materials/example-thumbnails/shorthand-media-query.jpg\" alt=\"Shorthand media query\" /\u003e\n        \u003ch4\u003eShorthand media query\u003c/h4\u003e\n      \u003c/a\u003e\n      \u003cp\u003eUse a shorthand \u003ccode\u003equery\u003c/code\u003e function to declare inline media queries in CSS.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Materials\n\n\u003ctable border=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://www.youtube.com/watch?v=_HrXUB97xQs\"\u003e\n        \u003cimg width=\"500\" src=\"https://github.com/kettanaito/atomic-layout/blob/master/materials/react-finland-thumbnail.jpg\" alt=\"Artem speaking at React Finland\" /\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ch3\u003e\u003ca href=\"https://www.youtube.com/watch?v=_HrXUB97xQs\"\u003eCreating layouts that last (React Finland, 2019)\u003c/a\u003e\u003c/h3\u003e\n      \u003cp\u003eFind out the main aspects of a layout's maintainability and why spacing plays a crucial role in it. Learn how to wield layout composition as an actual React component–a missing glue for your elements and design systems.\u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://codesandbox.io/s/5wwp76310n\"\u003e\u003cstrong\u003eLive demo\u003c/strong\u003e\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"500\" src=\"https://pbs.twimg.com/profile_images/699140827218649088/mooXwM62_400x400.png\" alt=\"SurviveJS logo\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ch3\u003e\u003ca href=\"https://survivejs.com/blog/atomic-layout-interview/\"\u003eLayout composition as a React component (SurviveJS)\u003c/a\u003e\u003c/h3\u003e\n      \u003cp\u003eRead through the extensive interview about how Atomic layout came to be, how it's different from other solutions, and which practices it encourages.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://www.youtube.com/watch?v=x_93DjN_bUA\"\u003e\n        \u003cimg width=\"500\" src=\"https://github.com/kettanaito/atomic-layout/blob/master/materials/react-vienna-thumbnail.jpg\" alt=\"The Future of Layouts — Artem Zakharchenko\" /\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ch3\u003e\u003ca href=\"https://www.youtube.com/watch?v=x_93DjN_bUA\"\u003eThe future of layouts (React Vienna, 2018)\u003c/a\u003e\u003c/h3\u003e\n      \u003cp\u003eWatch Artem discussing the biggest obstacle to achieve maintainable layouts, and showcases a way to combine existing technologies to build clean UI implementations using Atomic layout.\u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://codesandbox.io/s/8z6xnmnnnj\"\u003e\u003cstrong\u003eLive demo\u003c/strong\u003e\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"http://future-of-layouts.surge.sh\"\u003eSlides\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Community\n\nReach out to us to share an awesome project you're building, or ask a question:\n\n- [Reactiflux][community-reactiflux]\n\n## Browser support\n\nAtomic Layout's browser support is made by the browser support of underlying technologies the library uses. Pay attention if your project can support CSS Grid to be sure you can use Atomic Layout.\n\n\u003e **See the [Support table for CSS Grid][css-grid-support]**. For Internet Explorer support please read [this issue](https://github.com/kettanaito/atomic-layout/issues/92).\n\n## Contributing\n\nBy contributing to Atomic Layout you shape the way developers create reusable UI.\n\nPlease refer to the [Contribution guidelines](./.github/CONTRIBUTING.md) before committing to this project. We are thankful for any kind of contribution you may bring: discussion, issue report, or a pull request.\n\n[npm-url]: https://npmjs.com/package/atomic-layout\n[bundlephobia-url]: https://bundlephobia.com/result?p=atomic-layout\n[build-url]: https://circleci.com/gh/kettanaito/atomic-layout\n[test-coverage-url]: https://coveralls.io/github/kettanaito/atomic-layout\n[dependencies-url]: https://david-dm.org/kettanaito/atomic-layout\n[community-reactiflux]: https://discordapp.com/channels/102860784329052160/543033450924474378\n[bootstrap-4-breakpoints]: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options\n[css-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\n[css-grid-support]: https://caniuse.com/css-grid\n[atomic-design]: https://bradfrost.com/blog/post/atomic-web-design/\n[atomic-layout-docs]: https://redd.gitbook.io/atomic-layout\n[react]: https://github.com/facebook/react\n[styled-components]: https://github.com/styled-components/styled-components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkettanaito%2Fatomic-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkettanaito%2Fatomic-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkettanaito%2Fatomic-layout/lists"}