介绍

FlatifyCSS是一个网络现代简约的平面设计库，灵感来自  Duolingo设计系统. 它尊重可访问性，并附带了网络上最常见的组件。

开始

当我们谈论扁平化设计时，你可能会想到令人毛骨悚然的调色板和一些老式的 Web 趋势，但不是，扁平化设计是一个广义的术语，在这种情况下，对于FlatifyCSS，有一些原则可以清楚地塑造它，你会很容易理解它。

组件

最常用的pattern，高度可组合和可自定义。

助手

不可变和可重用的类，以加快开发过程。

形式

用于创建新式表单的自定义和原生元素。

下载

FlatifyCSS 以多种方式可供用户使用，您可以使用包管理器、直接从 CDN 安装它，甚至可以下载最新的项目存档.

CDN

这是jsDelivr，您只需一行代码即可添加 FlatifyCSS：

index.html

<!-- CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css"
  rel="stylesheet"
  crossorigin="anonymous"
/>

<!-- JavaScript : Popperjs + FlatifyCSS -->
<script src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/flatifycss/dist/js/flatify.min.js" crossorigin="anonymous"></script>

包管理器

您可以使用 npm、yarn 或 composer 将 FlatifyCSS 包含在您的项目中：

npm

command line

npm install flatifycss

Yarn

command line

yarn add flatifycss

Composer

command line

composer require amir2mi/flatifycss

内容

在使用包管理器安装FlatifyCSS或下载存档文件后，有一个名为/dist的文件夹，其中编译的 CSS、JS 及其映射文件位于其中，在此文件夹中提供了这些文件：

CSS

CSS文件带有一些选项，后缀为-noprefix的文件，没有PostCSS自动修复器，而 -min 表示此文件已缩小。

flatify.css
flatify-min.css
flatify-noprefix.css
flatify-noprefix-min.css

JS

请注意，FlatifyCSS 需要Popperjs来制作下拉菜单和弹出窗口，但此库不包含在 FlatifyCSS 的 JavaScript 文件中，因此您可以将其包含在您的网页中。

flatify.js
flatify-min.js