npm 包 weh-tachyons 使用教程

前言

在前端开发中，有很多样式框架可以使用，但是使用这些框架往往会导致样式冗余，在开发大型项目时不够灵活。 weh-tachyons 包是一个为 React、Vue 以及其他前端框架设计的、用于构建可组合、响应式用户界面的原子级 CSS 工具包。它拥有一系列的单一类名，可以让我们快速构建样式，使我们的代码结构更加清晰、易于维护。

本文将介绍如何使用 weh-tachyons 包帮助我们构建出良好的前端样式。

weh-tachyons 的基本概念

weh-tachyons 是一个原子级 CSS 库，它由许多 CSS 类组成，每个类定义了一个明确的样式规则。因此，只需添加包含所需类的 HTML 元素，即可自由组合、创建出精美的界面。即使需要更改样式，也可以更改单个类，而不会影响其他部分的代码。

weh-tachyons 包是一个完全响应式的 CSS 框架，尺寸可以根据视口大小自动调整。因此，它可以适用于任何设备，包括移动设备。

weh-tachyons 的类名是由 tachyons 和 weh- 前缀组成。其中 weh- 是为了保证该框架是独特的。您可以为自己的项目创建一个定制的前缀。

安装 weh-tachyons

我们可以通过 npm 包管理器来安装 weh-tachyons。我们可以使用下面的命令来安装它：

npm install weh-tachyons

使用 weh-tachyons

我们可以借助 weh-tachyons 包来大大减少编写 CSS 的时间。我们只需要为 HTML 元素添加我们需要的类名。我们可以在 HTML 元素中添加任意数量的类名，以实现我们需要的样式。

下面是几个 weh-tachyons 的例子：

<div class="weh-tc weh-bg-light-gray weh-white weh-pa3">Hello World</div>

<button class="weh-btn weh-bg-dark-blue weh-white">Click Me</button>

<input class="weh-input weh-ma2 weh-br4 weh-pa2" placeholder="Enter your name" />

在第一个例子中，我们使用 weh-tc 类让元素水平居中显示。我们使用了 weh-bg-light-gray 类来设置元素的背景颜色，用 weh-white 类来设置文本颜色。我们还用 weh-pa3 类来设置元素的 padding 值。这里，我们可以看到我们只是使用了几个独立的类，就实现了复杂的样式。

在第二个例子中，我们使用类 weh-btn 来创建一个按钮，配合 weh-bg-dark-blue 和 weh-white 类来设置按钮的背景和文本颜色。

在第三个例子中，我们使用 weh-input 类来创建一个输入框，用 weh-ma2 类设置外边距，用 weh-br4 来定义圆角。同时，我们也用 weh-pa2 类来设置 padding 值。

weh-tachyons CSS 类的常见分类

weh-tachyons 的 CSS 类可以分为以下的常见分类：

• Layout
• Typography
• Colors
• Backgrounds
• Borders
• Animations

Layout

Layout 类让我们能够更好地控制页面的布局样式。这些类通常用于定位元素和设置元素的大小和间距。

Flexbox

例如，以下类可用于创建基于 flexbox 的布局：

• weh-flex
• weh-inline-flex
• weh-justify-start
• weh-justify-end
• weh-justify-center
• weh-justify-between
• weh-justify-around
• weh-align-start
• weh-align-end
• weh-align-center
• weh-align-baseline
• weh-align-stretch

Grids

以下类可用于创建基于 grid 的布局：

• weh-grid
• weh-grid-columns-*
• weh-grid-gutter-*
• weh-grid-gap-*

Typography

Typography 类应用于文本元素，包括标题、段落和链接等。这些类可以修改字体、字体大小、对齐方式以及文本颜色等。

例如，以下类可用于管理文本样式：

• weh-h1
• weh-h2
• weh-h3
• weh-h4
• weh-h5
• weh-h6
• weh-lead
• weh-small
• weh-bold
• weh-normal
• weh-italic
• weh-underline

Colors

我们可以使用以下类来添加颜色：

• weh-muted
• weh-gray
• weh-silver
• weh-light-gray
• weh-near-white
• weh-white
• weh-black
• weh-dark-gray
• weh-near-black
• weh-red
• weh-orange
• weh-gold
• weh-yellow
• weh-green
• weh-light-green
• weh-navy
• weh-dark-blue
• weh-blue
• weh-light-blue
• weh-purple
• weh-light-purple
• weh-hot-pink
• weh-pink

Backgrounds

以下类可用于创建各种背景效果：

• weh-bg-*
• weh-washed-*
• weh-overlay-*
• weh-gradient-*

Borders

以下类可用于创建边框效果：

• weh-bw0
• weh-bw1
• weh-bw2
• weh-bw3
• weh-bw4
• weh-bw5
• weh-b--dashed
• weh-b--dotted
• weh-b--solid
• weh-b--none
• weh-l
• weh-r
• weh-t
• weh-b
• weh-br
• weh-bl
• weh-btl
• weh-btr

Animations

以下类可用于添加动画效果：

• weh-animate-rotate-*
• weh-animate-fade-in
• weh-animate-fade-out
• weh-animate-up
• weh-animate-down
• weh-animate-left
• weh-animate-right

总结

weh-tachyons 是一个非常实用的原子级 CSS 库，它可以方便快捷地修改样式并且不会对代码产生副作用。通过在 HTML 元素中添加相应的类名，我们可以轻松地控制设计的样式，在前端开发中应用广泛。

尝试使用 weh-tachyons 包，把你的前端样式变得更灵活、更易维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560c181e8991b448df0ab