{"id":15041498,"url":"https://github.com/fluid-framework/fluid","last_synced_at":"2025-08-23T19:40:26.613Z","repository":{"id":57239022,"uuid":"190799247","full_name":"fluid-framework/Fluid","owner":"fluid-framework","description":"Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development","archived":false,"fork":false,"pushed_at":"2021-10-20T18:12:11.000Z","size":7588,"stargazers_count":27,"open_issues_count":3,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T20:26:30.191Z","etag":null,"topics":["css","css-framework","css-grid","fluid","framework","frontend","mobile","ready","responsive","scss","scss-framework"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/fluid-framework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2019-06-07T19:39:16.000Z","updated_at":"2025-02-19T00:32:38.000Z","dependencies_parsed_at":"2022-09-05T08:21:38.246Z","dependency_job_id":null,"html_url":"https://github.com/fluid-framework/Fluid","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/fluid-framework/Fluid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluid-framework%2FFluid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluid-framework%2FFluid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluid-framework%2FFluid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluid-framework%2FFluid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluid-framework","download_url":"https://codeload.github.com/fluid-framework/Fluid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluid-framework%2FFluid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266255267,"owners_count":23900103,"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","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","css-framework","css-grid","fluid","framework","frontend","mobile","ready","responsive","scss","scss-framework"],"created_at":"2024-09-24T20:46:10.236Z","updated_at":"2025-07-21T07:04:40.696Z","avatar_url":"https://github.com/fluid-framework.png","language":"SCSS","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/tree/master/dist\"\u003e\n    \u003cimg src=\"http://ashfahan.com/fluid/logo.svg?\" alt=\"Fluid logo\" width=\"256\" height=\"256\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development.\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/fluid-framework/fluid/issues/new?template=bug.md\"\u003eReport bug 🐛\u003c/a\u003e\n  |\n  \u003ca href=\"https://github.com/fluid-framework/fluid/issues/new?template=feature.md\u0026labels=feature\"\u003eRequest feature ✨ \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Distribution Network --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/package-json/v/fluid-framework/fluid.svg?label=Github%20release\u0026style=for-the-badge\u0026color=1890ff\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://atmospherejs.com/fluidframework/fluid-css\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/METEOR-fluidframework%3Afluid--css-1890ff?style=for-the-badge\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fluid-css\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/NPM-fluid--css-1890ff?style=for-the-badge\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Status --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/actions\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/workflow/status/fluid-framework/Fluid/Tests?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=fluid-css\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/fluid-css?color=%2344CC11\u0026label=Gzip%20Size\u0026style=for-the-badge\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Info --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/tree/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/fluid-framework/Fluid.svg?style=for-the-badge\u0026color=805ad5\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/commits\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/commit-activity/w/fluid-framework/fluid.svg?style=for-the-badge\u0026color=805ad5\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/fluid-framework/Fluid/pulls\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Pull%20Request-Welcome_%E2%9D%A4-805ad5.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n 🚧 Under Heavy Construction 🚧\n\u003c/p\u003e\n\n## 🚀 Quick Start\n\n##### Using CDN\n\n1. Just copy stylesheet link into HTML \u003chead\u003e tag `\u003clink href=\"https://cdn.jsdelivr.net/npm/fluid-css/dist/fluid.min.css\" rel=\"stylesheet\" /\u003e`.\n2. Start using Fluid\n\n##### Using NPM\n\n1. Download Package as Direct Dependency `npm install fluid-css`\n2. Import required Css Into project using `import \"fluid-css/dist/fluid.css\"`\n3. Start using Fluid\n\n##### Using Yarn\n\n1. Download Package as Direct Dependency `yarn add fluid-css`\n2. Import required Css Into project using `import \"fluid-css/dist/fluid.css\"`\n3. Start using Fluid\n\n##### Using Meteor\n\n1. Download Package using `meteor add fluidframework:fluid`\n2. Import required Css Into project using `import \"fluid-css/dist/fluid.css\"`\n3. Start using Fluid\n\n## 📂 Structure\n\nFluid uses [ITCSS architecture](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture) for its files and folder structure.\n\n```\nsrc\n├───components\n├───elements\n│   └───typography\n├───generics\n├───objects\n├───settings\n│   ├───components\n│   ├───design\n│   ├───icons\n│   ├───misc\n│   ├───naming\n│   ├───objects\n│   ├───placeholders\n│   │   └───typography\n│   ├───theme\n│   └───typography\n├───tools\n│   ├───functions\n│   └───mixins\n│       ├───components\n│       └───shapes\n├───utilities\n│   ├───border\n│   ├───grid-flex\n│   ├───sizing\n│   ├───transform\n│   └───typography\n└───vendors\n```\n\n## 💅 CSS only\n\nFluid is a `CSS implementation only` means it components are `faster than JavaScript` Components but being a CSS only framework also means that for components like Alerts Popup, User have to implement their own JavaScript Implementation and logics.\n\n## 🌐 Browser Support\n\nFluid Uses Css version 3 so it is supported by majority of browsers. Fluid is compatible with recent versions of:\n\n- Chrome\n- Edge\n- Firefox\n- Opera\n- Safari\n- Internet Explorer (10+) is only partially supported.\n\nFluid uses [autoprefixer](https://github.com/postcss/autoprefixer) for compatibility with earlier versions of [browsers](https://github.com/fluid-framework/Fluid/tree/master/.browserslistrc)\n\n## 🛠 Customization\n\n1. [Download](https://github.com/fluid-framework/Fluid/archive/master.zip) Latest master branch\n2. Extract files\n3. Customize the Scss files and variables located in `settings` folder\n4. Build Scss using `yarn build` for [yarn](https://yarnpkg.com/lang/en/docs/install/#windows-stable) or `npm build` for [npm](https://nodejs.org/en/download/)\n\n## 🧠 Creators\n\n👨‍💻 **Ashfahan** ◾️ [GitHub](https://github.com/ashfahan) | [GitLab](https://gitlab.com/ashfahan)\n\n## 🤝 Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.browserstack.com/\"\u003e\n    \u003cimg src=\"https://live.browserstack.com/images/opensource/browserstack-logo.svg\" alt=\"BrowserStack Logo\" width=\"153.6\" height=\"33.6\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 📜 Copyright and license\n\nCode copyright (c) 2019-2027 [fluid-framework](https://fluid-framework.com) and [Ashfahan](https://Ashfahan.com) and [Contributors](https://github.com/fluid-framework/Fluid/graphs/contributors).\n\u003cbr\u003e\n\u003cbr\u003e\nCode released under the [MIT License](https://github.com/fluid-framework/Fluid/tree/master/LICENSE).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\"/\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluid-framework%2Ffluid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluid-framework%2Ffluid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluid-framework%2Ffluid/lists"}