atomic-layout

Atomic layout

Atomic layout is an implementational paradigm that delegates spacial distribution between any layout composites to the dedicated layer. It helps to create declarative, immutable, and maintainable layouts based on CSS Grid.

Atomic layout uses Bootstrap 4 breakpoints by default. You can always define custom breakpoints to match your very requirements.

Motivation

Think of how we create layouts today. Most likely we define a set of reusable units (atoms) to combine them into functional compositions. But how do we handle spacing that should describe the position of our units? Usually, we manage CSS properties of those units to make sure the spacing is just right. Not only that results into writing redundant CSS, but it also makes our atoms contextual and, thus, non-maintainable.

Atomic layout solves this problem by exposing a dedicated layer responsible for spacial distribution in a layout, or any of its parts. That allows to reuse atom components in any layout possible without mutating them.

Install

npm install atomic-layout --save

Requires React (15.0+) and styled-components (3.0+) as peer dependencies.

Documentation

See the Official documentation.

Here are some shortcuts to get you started:

• Motivation
• Getting started
• Responsive props
• Recipes

Materials

The Future of Layouts (React Vienna)

Watch 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.

• Live demo (Codesandbox)

Browser support

See the Support table for CSS Grid. For Internet Explorer support please read through this issue.

Contributing

Please see the Contribution guidelines beforehand. The issues labeled help wanted or good first issue are, usually, a great place to get your first contribution to the project. Thank you.