分享一个非常不错的页面组件库

我对设计美学有一定执念，所以我在编写一些 UI 的时候会比较注重它的一些美观度、舒适度。

随着现在前端的发展，一些成套的组件库也是层出不穷了，比如基于 Vue 的 Element UI、iView，基于 React 的 Ant Design、Fluent UI 等等，它们设计其实挺好的，但有一些色彩搭配和风格还没有达到我理想中的样子。

我其实比较欣赏苹果的那种半透明设计风，比如这样的：

大家感兴趣可以看苹果的设计手册：https://developer.apple.com/design/human-interface-guidelines/

同时我也对 Material Design 中的一些光影理念比较推崇，但并不太喜欢原生的 Material Design，比如这样的：

我个人觉得这种原生的 Material Design 有点用力过猛，显得有些沉重。

相比之下，目前的一些 Element UI、Ant Design 则算是吸收了二者的一些优点，提供了一些 UI 组件，比如这样的：

这种设计风格显得没有 Material Design 那样厚重，也吸取了一些 Apple Design 的风格，另外一些光影效果拿捏也挺不错的。

然而，这些设计还是没有达到我理想中的样子。

比如说，卡片的一些设计、边缘轮廓的一些设计，总让我感觉没有那么清爽。

后来，直到我用了一款梯子软件，它是基于一个叫做 STISLA 的 UI 框架设计的，整体风格是这样的：

一眼看过去，爱了爱了，看起来，它借鉴了 Material Design 的一些光影设计理念，同时又不显得那么厚重，一些布局、卡片和文本框的轮廓也显得很明晰，另外一些配色、图标的样式整体也给人一种清爽的感觉，总之我个人非常喜欢。

这个 UI 框架的名字叫做 STISLA，其官网是：https://getstisla.com/，它是基于 BootStrap4 编写的，很可惜的是，它现在没有提供 Vue、React 的支持，所以使用起来暂时还不能完全组件化，不过里面的一些 class 可以直接拿来用，就像使用 tailwind 一样。

STISLA 现在是完全开源的，其 GitHub 仓库是：https://github.com/stisla/stisla，使用的话直接引用其中的 CSS 即可，这里就不再赘述了。

另外关于更多的组件，大家可以到官方 Demo 示例页面来体验，链接是：https://demo.getstisla.com/，这里简单列举几个组件。

头像：

文章列表：

统计图表：

用户信息：

表单：

表格：

不得不说，每个版面我都觉得非常赏心悦目！感兴趣的就去官网看看吧。

好啦，以上就介绍这么多啦，大家感兴趣的话就快快用起来吧～