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 = `thumbnailheaderfooter`// Declare responsive changes of your areas.// Operate in two dimensions, remove areas// or introduce new ones.const areasTablet = `thumbnail headerthumbnail footer`const Card = title imageUrl actions<Composition = = =>/* Get React components based on provided areas */Thumbnail Header Footer<React.Fragment><Thumbnail>/* Render anything, including another Composition */<img = = /></Thumbnail>/* Preserve semantics with polymorphic prop */<Header ="h3">title</Header>/* Responsive props: just suffix with a breakpoint name */<Footer = =>actions</Footer></React.Fragment></Composition>
npm install atomic-layout styled-components
Using something else than
styled-components? See the full list of Atomic Layout implementations.
See the Official documentation.
There are some shortcuts to get you started: