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

Getting Started    •    Homepage    •    News    •    Issues    •    React Components

You can use FlatifyCSS in several ways:

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

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>

You can include FlatifyCSS in your project using npm, yarn, or composer:

npm install flatifycss

yarn add flatifycss

bun add flatifycss

composer require amir2mi/flatifycss

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

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

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

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.

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!