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)691310[7 PRs](https://github.com/amir2mi/flatifycss/pulls)MITMDXCI passing

Since Dec 22Pushed 2mo 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 today

READMEChangelog (10)DependenciesVersions (50)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.

---

[![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)

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

43

—

FairBetter than 89% of packages

Maintenance63

Regular maintenance activity

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

679d ago

Major Versions

v1.5.3 → v2.0.02024-08-23

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/64708228?v=4)[Amir M. Mohamadi](/maintainers/amir2mi)[@amir2mi](https://github.com/amir2mi)

---

Top Contributors

[![amir2mi](https://avatars.githubusercontent.com/u/64708228?v=4)](https://github.com/amir2mi "amir2mi (695 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.4k18.5M390](/packages/twbs-bootstrap)[twitter/bootstrap

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

174.4k1.8M28](/packages/twitter-bootstrap)[zurb/foundation

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

29.8k395.7k18](/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

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

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

29.8k9.0k](/packages/foundation-foundation-sites)[components/bootstrap

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

922.8M63](/packages/components-bootstrap)

PHPackages © 2026

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