{"id":27046794,"url":"https://github.com/amir2mi/flatifycss","last_synced_at":"2025-08-22T22:24:07.845Z","repository":{"id":37084705,"uuid":"420516232","full_name":"amir2mi/flatifycss","owner":"amir2mi","description":"Modern flat design framework for the web — inspired by Duolingo design system.","archived":false,"fork":false,"pushed_at":"2024-11-18T16:59:59.000Z","size":22962,"stargazers_count":64,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-18T17:06:16.189Z","etag":null,"topics":["css","duolingo","flat","flat-css","flat-design","js","responsive","sass","web"],"latest_commit_sha":null,"homepage":"https://FlatifyCSS.com","language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amir2mi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":"First of all thank you! if you want to help the project you can contribute or [buy a cup of coffee](https://www.buymeacoffee.com/amir2mi)."},"created_at":"2021-10-23T20:28:47.000Z","updated_at":"2025-04-14T04:35:24.000Z","dependencies_parsed_at":"2024-06-20T23:26:19.312Z","dependency_job_id":"fc6c10f5-9834-41a1-ac9e-2df88f31edc6","html_url":"https://github.com/amir2mi/flatifycss","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/amir2mi/flatifycss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Fflatifycss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Fflatifycss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Fflatifycss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Fflatifycss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amir2mi","download_url":"https://codeload.github.com/amir2mi/flatifycss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amir2mi%2Fflatifycss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271710540,"owners_count":24807684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","duolingo","flat","flat-css","flat-design","js","responsive","sass","web"],"created_at":"2025-04-05T06:18:08.357Z","updated_at":"2025-08-22T22:24:07.748Z","avatar_url":"https://github.com/amir2mi.png","language":"MDX","readme":"\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://amir2mi.github.io/flatifycss/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/amir2mi/flatifycss/master/website/static/img/logo.gif\" alt=\"FlatifyCSS\" width=\"160\" height=\"160\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eFlatifyCSS\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  Modern flat design framework for the web — inspired by Duolingo design system.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://amir2mi.github.io/flatifycss/docs/intro\"\u003e\n    Getting Started\n  \u003c/a\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u0026nbsp;   \n  \u003ca target=\"_blank\" href=\"https://flatifycss.com/\"\u003e\n    Homepage\n  \u003c/a\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u0026nbsp;   \n  \u003ca target=\"_blank\" href=\"https://amir2mi.github.io/flatifycss/blog\"\u003e\n    News\n  \u003c/a\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u0026nbsp;   \n  \u003ca target=\"_blank\" href=\"https://github.com/amir2mi/flatifycss/issues\"\u003e\n    Issues\n  \u003c/a\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u0026nbsp;   \n  \u003ca target=\"_blank\" href=\"https://react.flatifycss.com/\"\u003e\n    React Components\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n[![npm version](https://img.shields.io/npm/v/flatifycss)](https://www.npmjs.com/package/flatifycss)\n[![Packagist Prerelease](https://img.shields.io/packagist/v/amir2mi/flatifycss)](https://packagist.org/packages/amir2mi/flatifycss)\n[![CSS Gzip size](https://img.badgesize.io/https:/raw.githubusercontent.com/amir2mi/flatifycss/master/dist/css/flatify-min.css?compression=gzip\u0026label=CSS%20Gzip)](https://github.com/amir2mi/flatifycss/blob/master/dist/css/flatify-min.css)\n[![CSS Brotli size](https://img.badgesize.io/https:/raw.githubusercontent.com/amir2mi/flatifycss/master/dist/css/flatify-min.css?compression=brotli\u0026label=CSS%20Brotli)](https://github.com/amir2mi/flatifycss/blob/master/dist/css/flatify-min.css)\n[![JS Gzip size](https://img.badgesize.io/https:/raw.githubusercontent.com/amir2mi/flatifycss/master/dist/js/flatify-min.js?label=JS%20Gzip\u0026compression=gzip)](https://github.com/amir2mi/flatifycss/blob/master/dist/js/flatify-min.js)\n[![JS Brotli size](https://img.badgesize.io/https:/raw.githubusercontent.com/amir2mi/flatifycss/master/dist/js/flatify-min.js?label=JS%20Brotli\u0026compression=brotli)](https://github.com/amir2mi/flatifycss/blob/master/dist/js/flatify-min.js)\n\n# Getting started\n\nYou can use FlatifyCSS in several ways:\n\n- Install it using package managers\n- Load it directly from a CDN\n- Download the [latest project files](https://github.com/amir2mi/flatifycss/archive/master.zip)\n\n## CDN\n\nYou can add FlatifyCSS using [jsDelivr](https://www.jsdelivr.com/) with these lines of code:\n\n```html\n\u003c!-- CSS --\u003e\n\u003clink\n  href=\"https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css\"\n  rel=\"stylesheet\"\n  crossorigin=\"anonymous\"\n/\u003e\n\n\u003c!-- JavaScript : Popperjs + FlatifyCSS --\u003e\n\u003cscript src=\"https://unpkg.com/@popperjs/core@2\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flatifycss/dist/js/flatify.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n## Package managers\n\nYou can include FlatifyCSS in your project using npm, yarn, or composer:\n\n### npm\n\n```bash\nnpm install flatifycss\n```\n\n### Yarn\n\n```bash\nyarn add flatifycss\n```\n\n### Bun\n\n```bash\nbun add flatifycss\n```\n\n### Composer\n\n```bash\ncomposer require amir2mi/flatifycss\n```\n\n## Contents\n\nAfter installing FlatifyCSS or downloading the archive file, you'll find a `/dist` folder with compiled CSS, JS, and their map files:\n\n### CSS\n\nCSS files come in different versions:\n\n- Files with `-noprefix` don't use [PostCSS Autoprefixer](https://github.com/postcss/autoprefixer)\n- Files with `-min` are minified\n\nAvailable CSS files:\n\n- `flatify.css`\n- `flatify-min.css`\n- `flatify-noprefix.css`\n- `flatify-noprefix-min.css`\n\n### JS\n\nNote: 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.\n\nAvailable JS files:\n\n- `flatify.js`\n- `flatify-min.js`\n\n## Development\n\nTo develop FlatifyCSS:\n\n1. Install Gulp globally: `npm i gulp-cli -g`\n2. Run `npm install` in the root directory of FlatifyCSS\n3. Run `gulp` in the root directory to compile the stylesheet and JavaScript file\n\nFor more information about FlatifyCSS's Gulp tasks, [read here](https://amir2mi.github.io/flatifycss/docs/overview/development#gulp).\n\n## Support\n\nThe 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)!\n","funding_links":["https://www.buymeacoffee.com/amir2mi)!"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir2mi%2Fflatifycss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famir2mi%2Fflatifycss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir2mi%2Fflatifycss/lists"}