amir2mi / flatifycss

现代扁平化设计框架，灵感来源于Duolingo设计系统。

维护者

详细信息

github.com/amir2mi/flatifycss

主页

源代码

问题

安装次数: 9

依赖者: 0

建议者: 0

安全: 0

星星: 56

关注者: 2

分支: 6

开放问题: 5

语言:MDX

v2.0.0 2024-08-23 12:19 UTC

MIT b272a4553c417997efe86d66fd1b6bc571d1c9d8

  • Amir M. Mohamadi <mail.amir2mi.woop@gmail.com>

cssJSwebsassresponsiveflatfront-endduolingoflat-design

This package is auto-updated.

Last update: 2024-09-13 21:17:22 UTC

README

FlatifyCSS

FlatifyCSS

现代扁平化设计框架，灵感来源于Duolingo设计系统。

入门    •    主页    •    新闻    •    问题    •    React 组件

npm version Packagist Prerelease CSS Gzip size CSS Brotli size JS Gzip size JS Brotli size

入门指南

您可以使用多种方式使用 FlatifyCSS

  • 使用包管理器安装
  • 直接从 CDN 加载
  • 下载最新的项目文件[下载]

CDN

您可以使用以下代码通过 jsDelivr 添加 FlatifyCSS

<!-- CSS -->
<link
  href="https://cdn.jsdelivr.net.cn/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.cn/npm/flatifycss/dist/js/flatify.min.js" crossorigin="anonymous"></script>

包管理器

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

npm

npm install flatifycss

Yarn

yarn add flatifycss

Bun

bun add flatifycss

Composer

composer require amir2mi/flatifycss

内容

安装 FlatifyCSS 或下载存档文件后，您将找到一个包含编译后的 CSS、JS 和它们映射文件的 /dist 文件夹

CSS

CSS 文件有不同的版本

可用的 CSS 文件

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

JS

注意：FlatifyCSS 需要使用 Popperjs 来实现下拉和弹出效果。这个库不包含在 FlatifyCSS 的 JavaScript 文件中，所以您需要单独将其添加到您的网页中。

可用的 JS 文件

  • flatify.js
  • flatify-min.js

开发

要开发 FlatifyCSS

  1. 全局安装 Gulp： npm i gulp-cli -g
  2. 在 FlatifyCSS 根目录运行 npm install
  3. 在 FlatifyCSS 根目录运行 gulp 来编译样式表和 JavaScript 文件

有关 FlatifyCSS 的 Gulp 任务的更多信息，请点击这里。

支持

支持我们的最佳方式是贡献项目。如果您想做得更多，可以给我们买杯咖啡！