升级CSS布局的新方法：Atomic Layout

像Material UI、Bootstrap和Ant Design这样的前端库，通过简化布局和提高开发速度，使开发者的工作更加轻松。现在有了一个新的库Atomic Layout，它使用完全不同的方法来创建可重用的布局单元。

当使用现有的前端库创建一个特定的布局时，组件和间距都取决于上下文，反之亦然。这种相互依赖使得布局风格变得不灵活，在尝试进行任何改进或修改时，都让开发者感到头痛。

Atomic Layout遵循原子设计原则，使用CSS网格来创建可重用的布局单元。它通过解耦间距和组件来避免相互依赖，从而为创建布局创造无上下文的单元。

安装

Atomic Layout是一个基于React的库，使用样式化组件。首先创建一个React应用并安装所需的包。

安装 Create React App。

$ npx create-react-app atomic-layout

安装styled-components。

$ npm i styled-components atomic

部署

Atomic Layout是一个由多个子元素组成的实际物理实体。例如，一个标题是由标志、菜单和导航动作组成的。

接下来创建一个有图像、一些文本和一个按钮的响应式卡片元素。

创建一个名为Card.js 的新文件，并在其中粘贴以下代码。

import React from 'react'

export default function Card() {
    return (
        <div>
            <p>Hello</p>
        </div>
    )
}

现在React元素已经创建，从Atomic Layout中导入composition 组件，并将其包在我们的React组件中，如下所示：

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

export default function Card() {
    return (
        <Composition>
            <p>Hello</p>
        </Composition>
    )
}

composition 组件接受一个area 道具，该道具定义了我们布局的蓝图。将该区域定义为一个字符串，并将其传递给composition 组件。

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

const areasPhone = `
  image
  text
  button
`
export default function Card() {
    return (
        <Composition areas={areasPhone}>
            <p>Hello</p>
        </Composition>
    )
}

area 道具接受该值，使Reactarea 组件可用。它们可以通过children render函数访问，如下所示。

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

const areasPhone = `
  Image
  Text
  Button
`
export default function Card() {
    return (
        <Composition areas={areasPhone}>
        {(Areas) => (
      <> 
        <Areas.Image>Image</Areas.Image>
        <Areas.Text>Text</Areas.Text>
        <Areas.Button>Button</Areas.Button>
      </>
    )}       
     </Composition>
    )
}

现在，基本卡片组件已经准备好接受内容了。我们已经做了几个有风格的组件，并把它们导入到我们的Card.js 。

现在，可以用下面的脚本运行该项目。

$ npm start

我们会得到以下输出：

Layout Blueprint Styled Components Display

在这个图片中，你会看到三个不同的区域。可以通过为我们的组合提供额外的道具来定义它们之间的空间关系。通过给composition 组件添加一个名为gap 的道具来指定网格元素之间有100px的间隙。

<Composition areas={areasMobile} gap={100}>
{(Areas) => (
<Areas.Image><Image src="https://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png"></Image></Areas.Image>

        <Areas.Text><Text>Hello</Text></Areas.Text>
        <Areas.Button><Button>Click me</Button></Areas.Button>

)}
</Composition>

会看到下面的情况：

Spatial Relation Three Areas Display

响应性道具

可以通过为我们的卡片组件定义一个新的蓝图来使它具有响应性。例如，想为平板电脑调整我们的卡片组件。创建另一个字符串模板。

const areasTablet = `
Image Text Button
`

在这里有一个问题。我们不能把卡片组件传递给我们的areas 道具，因为它已经有一个手机显示的值，这是Atomic Layout中的默认值。

为了解决这个问题，使用响应式道具，它的结构是Prop name +Breakpoint + Behavior 。

断点

断点是布局获得一个新状态的特定条件，可以使用断点为area 道具分配不同的值。组合的道具采取不同的断点，Atomic Layout默认使用xs ，即移动设备的断点。

Atomic Layout使用Bootstrap 4的断点。

行为

行为简单地定义了一个道具的应用方式。它有以下值。

up ：将道具应用到指定的断点和向上。这是默认的行为。例如，如果up与md 一起使用，那么道具将从md 到。xl
down ：将道具应用到指定的断点和向下。例如，如果down与md 一起使用，则道具将从md 到。xs
only ：只将道具应用到指定的断点上。

对于中等尺寸的屏幕，我们可以在组合中使用areaTablet 。

<Composition areas={areasMobile} gap={100} areasMd={areasTablet} gapMd={10}

>
{(Areas) => (
  <Areas.Image><Image src="https://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png"></Image></Areas.Image>

        <Areas.Text><Text>Hello</Text></Areas.Text>
        <Areas.Button><Button>Click me</Button></Areas.Button>

)}
</Composition>

再次运行我们的项目，检查布局是否已经为平板电脑进行了重组。

Layout Restructured Tablets

我们使用Md 断点来获得由areaTablet 为iPad设置的精确输出。原子布局中的每个道具都可以是响应式的，这可以将开发速度提高到一个全新的水平。

内容可见性

Atomic Layout允许使用Visible 组件来设置内容的可见性，这个实用组件可以包装子元素，并允许它们在满足某些条件时变得可见，比如特定的断点或窗口宽度。可以在没有CSS的情况下使用Visible 组件。

从软件包中导入Visible 组件，用它来包装你的区域。Visible 组件接受断点作为道具。代码现在应该看起来像下面的片段。

import React from 'react'
import { Composition, Visible } from 'atomic-layout'
import Button from './Button'
import Text from './Text'
import Image from './Image'

const areasPhone = `
  Image
  Text
  Button
`
const areasTablet = `
Image Text Button

`
export default function Card() {
    return (
        <Composition areas={areasPhone} areasMd={areasTablet} gap={0} gapMd={0}>
        {(Areas) => (
      <> 
        <Areas.Image><Image src="https://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png"></Image></Areas.Image>

        <Visible for='md'>
            <Areas.Text><Text>Hello</Text></Areas.Text>
  </Visible>

        <Areas.Button><Button>Click me</Button></Areas.Button>

      </>
    )}       
     </Composition>
    )
}

该文本将只在中等大小的屏幕上可见。再次运行我们的项目，检查我们是否能在移动屏幕上看到文本。

Text Visible Medium Sized Screen

当我们使用移动显示器时，文本是隐藏的。切换到平板电脑上就能看到。

Mobile Display Text Hidden Visual

结论

回顾一下Atomic Layout与其他前端库的不同之处。

独立的组件

构图中的区域是独立的，因为它们的间距不受特定环境的约束，协助创建平滑和可重复使用的布局。

推广CSS网格

CSS网格是强大的。在我看来，它是布局位置的未来。虽然其他库大多是基于Flexbox的，但Atomic Layout对CSS Grid的使用使其可以适应未来的发展。

间隔

Atomic Layout的主要重点是以最佳方式分配间距。Atomic Layout有效地定义了布局构成，而不是使用行和列。

快速生产

由于响应式道具和可见性组件等功能，在Atomic Layout中处理动态内容是简单而快速的。开发人员可以在不写一行CSS的情况下制作生产级别的布局，并且仍然获得响应的结果。

统一性

用Atomic Layout创建的布局响应速度极快，并且共享全局设置，使整个应用程序变得统一。

与其他库不同，Atomic Layout只关注一件事：处理间距和布局结构。Atomic Layout通过提供无与伦比的开发体验来出色地完成其工作。

原文链接：blog.logrocket.com/upgrade-you…