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

时间  2021-06-13 标签 css html 前端 react git github web npm bootstrap api

 

 

 

像Material UI、Bootstrap和Ant Design这样的前端库，经过简化布局和提升开发速度，使开发者的工做更加轻松。如今有了一个新的库Atomic Layout，它使用彻底不一样的方法来建立可重用的布局单元。css

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

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

安装

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

安装 Create React App。git

$ npx create-react-app atomic-layout

复制代码

安装styled-components。github

$ npm i styled-components atomic

复制代码

部署

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

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

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

import React from 'react'

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

复制代码

如今React元素已经建立，从Atomic Layout中导入composition 组件，并将其包在咱们的React组件中，以下所示：api

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的断点。

image.png

行为

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

  • 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经过提供无与伦比的开发体验来出色地完成其工做。

若是以上文章对您有帮助，请给咱们的开源项目点点star： http://github.crmeb.net/u/defu 不胜感激！  

来自 “开源世界 ” ，连接：https://ym.baisou.ltd/post/723.html，如需转载，请注明出处，不然将追究法律责任。

联系我们 沪ICP备13005482号-10