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

npm install atomic-layout --save

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

Documentation

See the Official documentation.

Here are some shortcuts to get you started:

• Motivation
• Getting started
• Responsive props
• Recipes

Browser support

See the Support table for CSS Grid.

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.