atomic-layout

Atomic layout

Atomic layout is an implementational paradigm that delegates the distribution of spacial relation between any layout composites to the dedicated layer. Put shortly, it helps you to create reusable, efficient and fast responsive layouts with close to no CSS.

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

Motivation

Think of how you create layouts today. Most likely you have a set of reusable units (atoms) to combine them into functional compositions. However, layout is also about spacing and positioning. So you manage CSS properties to ensure your layout is just right. Guess what, not only that results into your writing more CSS, but that also makes your atoms contextual, thus non-predictable.

Atomic layout solves this problem by introducing a dedicated layer responsible for spacial distribution in your layouts. That allows to reuse atom components in any layout possible without mutating those composites.

Install

Although Atomic layout is a principle not bound to any specific technology, the current version is powered by React and styled-components. Submit a pull request to support more great technologies.

Peer dependencies

• React (15.0+)
• styled-components (3.0+)

Atomic layout

npm install atomic-layout

Documentation

See the Official documentation.

Here are some shortcuts to get you started:

• Philosophy
• Getting started
• Responsive props
• Recipes

Create a Pull request to improve the documentation!

Browser support

Atomic layout is based on CSS Grid, which has a browser coverage over 84% throughout the glob. Use it here and now, no polyfills.

Chrome	Firefox	IE	Edge	Safari	iOS Safari
65+	59+	11*	16+	11.1+	10.3+

* Partial support of an older version of CSS Grid specification.

Contributing

Shape the way developers create layouts! There are Contribution guidelines to get you started, please give it a read. The issues labeled help wanted or good first issue are, generally, good ones to start contributing. Thank you.