PHPackages                             amir2mi/flatifycss - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. amir2mi/flatifycss

ActiveLibrary[Framework](/categories/framework)

amir2mi/flatifycss
==================

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

v2.0.0(1y ago)711310[7 PRs](https://github.com/amir2mi/flatifycss/pulls)MITMDX

Since Dec 22Pushed 1y ago2 watchersCompare

[ Source](https://github.com/amir2mi/flatifycss)[ Packagist](https://packagist.org/packages/amir2mi/flatifycss)[ Docs](https://amir2mi.github.io/flatifycss/)[ RSS](/packages/amir2mi-flatifycss/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (49)Used By (0)

 [ ![FlatifyCSS](https://raw.githubusercontent.com/amir2mi/flatifycss/master/website/static/img/logo.gif) ](https://amir2mi.github.io/flatifycss/)

### FlatifyCSS

[](#flatifycss)

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

 [ Getting Started ](https://amir2mi.github.io/flatifycss/docs/intro) • [ Homepage ](https://flatifycss.com/) • [ News ](https://amir2mi.github.io/flatifycss/blog) • [ Issues ](https://github.com/amir2mi/flatifycss/issues) • [ React Components ](https://react.flatifycss.com/)

---

[![npm version](https://camo.githubusercontent.com/1b327ce5ab0fcfbfd92ba4d4ceafa576f26d9a84bec1a5ba6eb2e6fc0e3434fd/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666c6174696679637373)](https://www.npmjs.com/package/flatifycss)[![Packagist Prerelease](https://camo.githubusercontent.com/17d916f6ebbc053aef630ee8e3ea5ddf3a7acf9ad4c6c8760e7878d328d459a5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616d6972326d692f666c6174696679637373)](https://packagist.org/packages/amir2mi/flatifycss)[![CSS Gzip size](https://camo.githubusercontent.com/9dfd580dd94d4200e911b225c2850d17628d3779d94e372a993d18f3a7d9f5d3/68747470733a2f2f696d672e626164676573697a652e696f2f68747470733a2f7261772e67697468756275736572636f6e74656e742e636f6d2f616d6972326d692f666c61746966796373732f6d61737465722f646973742f6373732f666c61746966792d6d696e2e6373733f636f6d7072657373696f6e3d677a6970266c6162656c3d435353253230477a6970)](https://github.com/amir2mi/flatifycss/blob/master/dist/css/flatify-min.css)[![CSS Brotli size](https://camo.githubusercontent.com/fb8454c2f8ff862890d1beff5003f0667e297115c7a2d3b128fdfc7d377aec98/68747470733a2f2f696d672e626164676573697a652e696f2f68747470733a2f7261772e67697468756275736572636f6e74656e742e636f6d2f616d6972326d692f666c61746966796373732f6d61737465722f646973742f6373732f666c61746966792d6d696e2e6373733f636f6d7072657373696f6e3d62726f746c69266c6162656c3d43535325323042726f746c69)](https://github.com/amir2mi/flatifycss/blob/master/dist/css/flatify-min.css)[![JS Gzip size](https://camo.githubusercontent.com/88fa822976f331e27bb10fd4f81cb0f197d0f36796d242750cb2c2f6ffa17c7c/68747470733a2f2f696d672e626164676573697a652e696f2f68747470733a2f7261772e67697468756275736572636f6e74656e742e636f6d2f616d6972326d692f666c61746966796373732f6d61737465722f646973742f6a732f666c61746966792d6d696e2e6a733f6c6162656c3d4a53253230477a697026636f6d7072657373696f6e3d677a6970)](https://github.com/amir2mi/flatifycss/blob/master/dist/js/flatify-min.js)[![JS Brotli size](https://camo.githubusercontent.com/6c5a3c3f1d7f6eee504db4f7eaf78f2a5ae8ad64eb4917e51047417bdc2cb7a0/68747470733a2f2f696d672e626164676573697a652e696f2f68747470733a2f7261772e67697468756275736572636f6e74656e742e636f6d2f616d6972326d692f666c61746966796373732f6d61737465722f646973742f6a732f666c61746966792d6d696e2e6a733f6c6162656c3d4a5325323042726f746c6926636f6d7072657373696f6e3d62726f746c69)](https://github.com/amir2mi/flatifycss/blob/master/dist/js/flatify-min.js)

Getting started
===============

[](#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](https://github.com/amir2mi/flatifycss/archive/master.zip)

CDN
---

[](#cdn)

You can add FlatifyCSS using [jsDelivr](https://www.jsdelivr.com/) with these lines of code:

```

```

Package managers
----------------

[](#package-managers)

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

### npm

[](#npm)

```
npm install flatifycss
```

### Yarn

[](#yarn)

```
yarn add flatifycss
```

### Bun

[](#bun)

```
bun add flatifycss
```

### Composer

[](#composer)

```
composer require amir2mi/flatifycss
```

Contents
--------

[](#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)

CSS files come in different versions:

- Files with `-noprefix` don't use [PostCSS Autoprefixer](https://github.com/postcss/autoprefixer)
- Files with `-min` are minified

Available CSS files:

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

### JS

[](#js)

Note: FlatifyCSS needs [Popperjs](https://popper.js.org/) 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
-----------

[](#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](https://amir2mi.github.io/flatifycss/docs/overview/development#gulp).

Support
-------

[](#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](https://www.buymeacoffee.com/amir2mi)!

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance37

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 98.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~25 days

Recently: every ~168 days

Total

39

Last Release

630d ago

Major Versions

v1.5.3 → v2.0.02024-08-23

### Community

Maintainers

![](https://www.gravatar.com/avatar/4bbee7bdaf4833e5d5bd6c5740e9bac08b82cd562ad5d7966d888cf43e93032d?d=identicon)[amir2mi](/maintainers/amir2mi)

---

Top Contributors

[![amir2mi](https://avatars.githubusercontent.com/u/64708228?v=4)](https://github.com/amir2mi "amir2mi (693 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (13 commits)")

---

Tags

cssduolingoflatflat-cssflat-designjsresponsivesasswebwebcssJSsassresponsivefront-endflatduolingoflat-design

### Embed Badge

![Health badge](/badges/amir2mi-flatifycss/health.svg)

```
[![Health](https://phpackages.com/badges/amir2mi-flatifycss/health.svg)](https://phpackages.com/packages/amir2mi-flatifycss)
```

###  Alternatives

[twbs/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

174.1k17.6M327](/packages/twbs-bootstrap)[twitter/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

174.1k1.7M27](/packages/twitter-bootstrap)[zurb/foundation

The most advanced responsive front-end framework in the world.

29.8k380.2k15](/packages/zurb-foundation)[coreui/coreui

The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team

873111.6k4](/packages/coreui-coreui)[foundation/foundation-sites

The most advanced responsive front-end framework in the world.

29.8k8.4k](/packages/foundation-foundation-sites)[components/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

932.8M63](/packages/components-bootstrap)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)