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
• Best practices

Create a Pull request to improve the documentation!

Browser support

Atomic layout currently has a coverage of 84% of browser usage throughout the glob.

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

Please see the Contribution guidelines to start shaping the way developers create layouts today! Take a look at the issues labeled help wanted or good first issue to get started. Thank you!