atomic-layout

Atomic Layout

Atomic Layout is a spatial distribution library for React. It uses 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.

import React from 'react'
import { Composition } from 'atomic-layout'

// Define layout areas: visual representation
// of what composes a layout, detached from
// what components are actually rendered.
const areasMobile = `
  thumbnail
  header
  footer
`

// Declare responsive changes of your areas.
// Operate in two dimensions, remove areas
// or introduce new ones.
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition areas={areasMobile} areasMd={areasTablet} gap={20}>
    {/* Get React components based on provided areas */}
    {({ Thumbnail, Header, Footer }) => (
      <React.Fragment>
        <Thumbnail>
          {/* Render anything, including another Composition */}
          <img src={imageUrl} alt={title} />
        </Thumbnail>
        {/* Preserve semantics with polymorphic prop */}
        <Header as="h3">{title}</Header>
        {/* Responsive props: just suffix with a breakpoint name */}
        <Footer padding={10} paddingMd={20}>
          {actions}
        </Footer>
      </React.Fragment>
    )}
  </Composition>
)

export default Card

Atomic Layout comes with built-in responsive support. It uses Bootstrap 4 breakpoints by default, which you can always override with the custom breakpoints to match your requirements.

Install

npm install atomic-layout styled-components

Using something else than styled-components? See the full list of Atomic Layout packages.

Documentation

See the [Official documentation][atomic-layout-docs].

There are some shortcuts to get you started:

• Motivation
• Getting started
• Responsive props
• Recipes

Contributing

Thank you for deciding to contribute! Your involvement makes a significant impact on the library and its future.

Please read the Contribution guidelines to get familiar with the contributing process. The issues labeled help wanted or good first issue are a good place to start cooperating on Atomic Layout. Feature suggestions or bug reports, discussion, and pull requests are always welcome!