Introduction
FlatifyCSS is the web modern and minimalist flat design library inspired by the Duolingo design system. It respects accessibility and comes with the web's most common components.
Getting started
When we talk about flat design, you might think about the creepy palette and some old-fashioned web trends, but no, flat design is a wide term and in this case for FlatifyCSS, there are some principles that shape it clearly you will understand it easily.
组件
最常用的pattern，高度可组合和可自定义。
助手
不可变和可重用的类，以加快开发过程。
形式
用于创建新式表单的自定义和原生元素。
Download
FlatifyCSS is available for users in many ways, you can install it using package managers, directly from CDN, or even downloading lastest project archive.
CDN
Here is jsDelivr, you can add FlatifyCSS just with a single line of code:
<!-- 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>
Package managers
You can include FlatifyCSS in your project with npm, yarn or composer:
npm
npm install flatifycss
Yarn
yarn add flatifycss
Composer
composer require amir2mi/flatifycss
Contents
After installing FlatifyCSS with package managers or downloading the archive file there is a folder called /dist, where compiled CSS, JS and their map files are there, inside this folder these files are provided:
CSS
CSS files come with some options, files with -noprefix suffix, do not have PostCSS Autoprefixer, while -min means this file is minified.
flatify.css
flatify-min.css
flatify-noprefix.css
flatify-noprefix-min.css
JS
Note that FlatifyCSS needs Popperjs for dropdowns and popovers, but this library is not included inside the JavaScript file of FlatifyCSS, so it is up to you to include it inside your webpage.
flatify.js
flatify-min.js