Skip to content
Physical representation of layout composition to create declarative, immutable layouts.
Branch: master
Clone or download
Latest commit eed9a70 Apr 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github Updates pull request template Apr 12, 2019
.storybook Storybook: Replaces deprecated options with next API Apr 3, 2019
cypress Adds integration test for styles overrides Apr 17, 2019
examples Adds integration test for styles overrides Apr 17, 2019
materials 0.7.2 Apr 20, 2019
src Adds "gap" prop alias Apr 24, 2019
tests Improves unit tests Apr 14, 2019
.gitignore Uses Storybook stories as integration test suits Mar 23, 2019
.npmignore
.prettierrc Basics May 10, 2018
README.md
babel.config.js
cypress.dev.json Uses Storybook stories as integration test suits Mar 23, 2019
cypress.json
example.png Updates example picture Aug 14, 2018
jest.config.js Uses "paths" alias for module resolution Mar 7, 2019
logo.svg Updates README to use svg logo Jan 16, 2019
package.json
tsconfig.json
tslint.json
webpack.config.js Uses "paths" alias for module resolution Mar 7, 2019
yarn.lock 0.7.2 Apr 20, 2019

README.md

Package version Build status Test coverage Package size (minzip) Dependencies status Development dependencies status Discord channel


Atomic layout

Atomic layout

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

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

// Define layout areas as a string
const areasMobile = `
  thumbnail
  header
  footer
`

// Responsive areas? Built-in!
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition
    areas={areasMobile}
    areasMd={areasTablet}
    gutter={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 uses Bootstrap 4 breakpoints by default. You can 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

Make sure to have React (16.0+) and styled-components (4.0+) installed.

Documentation

See the Official documentation.

Here are some shortcuts to get you started:

Materials

SurviveJS logo

Layout composition as a React component (SurviveJS)

Read through the extensive interview about how Atomic layout came to be, how it's different from other solutions, and which practices it encourages.

The Future of Layouts — Artem Zakharchenko

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.

Browser support

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

Contributing

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

Please read the Contribution guidelines, and browse through the issues labeled help wanted or good first issue. Those are a good place to start. Feature suggestions or bug reports, discussion, and pull requests are always welcome!

You can’t perform that action at this time.