atomic-layout
    TypeScript icon, indicating that this package has built-in type declarations

    0.16.2 • Public • Published

    Atomic Layout logo

    Package version Package size Build status Dependencies status

    Discord channel Spectrum channel


    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

    Install

    npm install atomic-layout styled-components

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

    Documentation

    See the Official documentation.

    There are some shortcuts to get you started:

    Install

    npm i atomic-layout

    DownloadsWeekly Downloads

    1,228

    Version

    0.16.2

    License

    MIT

    Unpacked Size

    56.9 kB

    Total Files

    28

    Last publish

    Collaborators

    • kettanaito