FlatifyCSS

Modern flat design framework for the web — inspired by Duolingo design system.

Getting Started    •    Homepage    •    News    •    Issues    •    React Components

---

Getting started

You can use FlatifyCSS in several ways:

• Install it using package managers
• Load it directly from a CDN
• Download the latest project files

CDN

You can add FlatifyCSS using jsDelivr with these lines 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 using npm, yarn, or composer:

npm

npm install flatifycss

Yarn

yarn add flatifycss

Bun

bun add flatifycss

Composer

composer require amir2mi/flatifycss

Contents

After installing FlatifyCSS or downloading the archive file, you'll find a /dist folder with compiled CSS, JS, and their map files:

CSS

CSS files come in different versions:

• Files with -noprefix don't use PostCSS Autoprefixer
• Files with -min are minified

Available CSS files:

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

JS

Note: FlatifyCSS needs Popperjs for dropdowns and popovers. This library isn't included in FlatifyCSS's JavaScript file, so you need to add it to your webpage separately.

Available JS files:

• flatify.js
• flatify-min.js

Development

To develop FlatifyCSS:

1. Install Gulp globally: npm i gulp-cli -g
2. Run npm install in the root directory of FlatifyCSS
3. Run gulp in the root directory to compile the stylesheet and JavaScript file

For more information about FlatifyCSS's Gulp tasks, read here.

Support

The best way to support us is by contributing to the project. If you'd like to do more, you can buy us a coffee!