{"id":22771419,"url":"https://github.com/ramxcodes/flow-css","last_synced_at":"2025-07-26T22:08:04.686Z","repository":{"id":230622408,"uuid":"779780306","full_name":"ramxcodes/Flow-Css","owner":"ramxcodes","description":"Go with the Flow, CSS that Makes Your Website Glow!","archived":false,"fork":false,"pushed_at":"2024-03-30T23:01:52.000Z","size":106,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T23:11:14.857Z","etag":null,"topics":["flow","flow-css"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/ramxcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-03-30T19:09:59.000Z","updated_at":"2024-05-25T15:54:28.000Z","dependencies_parsed_at":"2025-02-05T13:50:47.212Z","dependency_job_id":"f4a0e8ea-77c4-4502-a93a-838b56adb251","html_url":"https://github.com/ramxcodes/Flow-Css","commit_stats":null,"previous_names":["ramxcodes/flow-css"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2FFlow-Css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2FFlow-Css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2FFlow-Css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramxcodes%2FFlow-Css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ramxcodes","download_url":"https://codeload.github.com/ramxcodes/Flow-Css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675446,"owners_count":21143764,"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":["flow","flow-css"],"created_at":"2024-12-11T16:13:36.017Z","updated_at":"2025-04-13T06:43:27.417Z","avatar_url":"https://github.com/ramxcodes.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Flow CSS\n \n\n`Flow CSS` is a lightweight CSS utility library created by Ramkrishna aka @ramxcodes. It provides simple utility classes to quickly style your HTML elements. With Flow CSS, create modern, aesthetically pleasing websites has never been easier. Design faster, smarter, better!\n\u003cp style=\"font-size: 1.6rem;\"\u003eGo with the \u003cb\u003eFlow\u003c/b\u003e, CSS that Makes Your Website \u003cb\u003eGlow\u003c/b\u003e!\u003c/p\u003e\n\n![GitHub repo size](https://img.shields.io/github/repo-size/ramxcodes/Flow-Css)\n![GitHub stars](https://img.shields.io/github/stars/ramxcodes/Flow-Css?style=social)\n![GitHub forks](https://img.shields.io/github/forks/ramxcodes/Flow-Css?style=social)\n[![Twitter Follow](https://img.shields.io/twitter/follow/ramxcodes?style=social)](https://twitter.com/intent/follow?screen_name=ramxcodes)\n\n\n\n## Table of Contents\n- [Getting Started](#getting-started)\n- [Utility Classes](#utility-classes)\n- [Spacing Padding and Margin](#Spacing-Padding-and-Margin)\n- [Text and Element Alignment](#Text-and-Element-Alignment)\n- [Text and Background Colors](#text-and-background-colors)\n- [Screen Height and Width](#screen-height-and-width)\n- [Display](#display)\n- [Credits](#Credits)\n- [License](#license)\n\n\n\n## Getting Started\n\nTo get started with `Flow CSS`, simply include the CSS file in your HTML document.\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cimg style=\"height: 10em; width: 10em; border: 1px solid #000;\" src=\"Assests/logo.png\" alt=\"\"\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cb\u003eLocal\u003c/b\u003e \n```html\n\u003clink rel=\"stylesheet\" href=\"flow.css\"\u003e\n```\n\u003cb\u003eCdn\u003c/b\u003e\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ramxcodes/Flow-Css/flow.css\"\u003e\n```\n\n## Last Updated\nLast updated : `31 March 2024`\n\n\u003cdetails\u003e\n\u003csummary\u003echangelog\u003c/summary\u003e\n\u003cbr\u003e\n\n| Version | Description |\n|---|---|\n| \u003cp style=\"font-size: 2rem;\"\u003e\u003cb\u003eV 1.0\u003c/b\u003e\u003c/p\u003e | \u003cul\u003e\u003cli\u003eRemoved all default styles for elements and pseudo elements\u003c/li\u003e\u003cli\u003eAdded Custom Variables pseudo root class\u003c/li\u003e\u003cli\u003eAdded Padding \u0026 Margin classes\u003c/li\u003e\u003cli\u003eAdded Center Text and Element classes\u003c/li\u003e\u003cli\u003eAdded Text color classes\u003c/li\u003e\u003cli\u003eAdded Background color classes\u003c/li\u003e\u003cli\u003eAdded screen height and width classes\u003c/li\u003e\u003c/ul\u003e |\n\u003c/details\u003e\n\n## Utility Classes\n\n### Spacing Padding and Margin\n\n`Flow CSS` provides utility classes for padding and margin. The classes follow a naming convention like `p-{value}` for padding and `m-{value}` for margin, where `{value}` ranges from 0 to 10.\n\nExample:\n```html\n\u003cdiv class=\"p-4\"\u003eThis div has padding of 1rem.\u003c/div\u003e\n\u003cdiv class=\"m-2\"\u003eThis div has margin of 0.5rem.\u003c/div\u003e\n```\n\n### Padding Classes\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Classes | Description |\n|---|---|\n| p-0  | Padding of 0 |\n| p-1  | Padding of 0.25rem |\n| p-2  | Padding of 0.5rem |\n| p-3  | Padding of 0.75rem |\n| p-4  | Padding of 1rem |\n| p-5  | Padding of 1.5rem |\n| p-6  | Padding of 2rem |\n| p-7  | Padding of 2.5rem |\n| p-8  | Padding of 3rem |\n| p-9  | Padding of 4rem |\n| p-10 | Padding of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Top\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Top Classes | Description |\n|---|---|\n| pt-0 | Padding top of 0 |\n| pt-1 | Padding top of 0.25rem |\n| pt-2 | Padding top of 0.5rem |\n| pt-3 | Padding top of 0.75rem |\n| pt-4 | Padding top of 1rem |\n| pt-5 | Padding top of 1.5rem |\n| pt-6 | Padding top of 2rem |\n| pt-7 | Padding top of 2.5rem |\n| pt-8 | Padding top of 3rem |\n| pt-9 | Padding top of 4rem |\n| pt-10| Padding top of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Bottom\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Bottom Classes | Description |\n|---|---|\n| pb-0 | Padding bottom of 0 |\n| pb-1 | Padding bottom of 0.25rem |\n| pb-2 | Padding bottom of 0.5rem |\n| pb-3 | Padding bottom of 0.75rem |\n| pb-4 | Padding bottom of 1rem |\n| pb-5 | Padding bottom of 1.5rem |\n| pb-6 | Padding bottom of 2rem |\n| pb-7 | Padding bottom of 2.5rem |\n| pb-8 | Padding bottom of 3rem |\n| pb-9 | Padding bottom of 4rem |\n| pb-10| Padding bottom of 5rem |\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Left\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding left Classes | Description |\n|---|---|\n| pl-0 | Padding left of 0 |\n| pl-1 | Padding left of 0.25rem |\n| pl-2 | Padding left of 0.5rem |\n| pl-3 | Padding left of 0.75rem |\n| pl-4 | Padding left of 1rem |\n| pl-5 | Padding left of 1.5rem |\n| pl-6 | Padding left of 2rem |\n| pl-7 | Padding left of 2.5rem |\n| pl-8 | Padding left of 3rem |\n| pl-9 | Padding left of 4rem |\n| pl-10| Padding left of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Right\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Right Classes | Description |\n|---|---|\n| pr-0 | Padding right of 0 |\n| pr-1 | Padding right of 0.25rem |\n| pr-2 | Padding right of 0.5rem |\n| pr-3 | Padding right of 0.75rem |\n| pr-4 | Padding right of 1rem |\n| pr-5 | Padding right of 1.5rem |\n| pr-6 | Padding right of 2rem |\n| pr-7 | Padding right of 2.5rem |\n| pr-8 | Padding right of 3rem |\n| pr-9 | Padding right of 4rem |\n| pr-10| Padding right of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Left \u0026 Right\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Left \u0026 Right Classes | Description |\n|---|---|\n| px-0 | Padding Left \u0026 Right of 0 |\n| px-1 | Padding Left \u0026 Right of 0.25rem |\n| px-2 | Padding Left \u0026 Right of 0.5rem |\n| px-3 | Padding Left \u0026 Right of 0.75rem |\n| px-4 | Padding Left \u0026 Right of 1rem |\n| px-5 | Padding Left \u0026 Right of 1.5rem |\n| px-6 | Padding Left \u0026 Right of 2rem |\n| px-7 | Padding Left \u0026 Right of 2.5rem |\n| px-8 | Padding Left \u0026 Right of 3rem |\n| px-9 | Padding Left \u0026 Right of 4rem |\n| px-10| Padding Left \u0026 Right of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePadding Top \u0026 Bottom\u003c/summary\u003e\n\u003cbr\u003e\n\n| Padding Top \u0026 Bottom Classes | Description |\n|---|---|\n| py-0 | Padding Top \u0026 Bottom of 0 |\n| py-1 | Padding Top \u0026 Bottom of 0.25rem |\n| py-2 | Padding Top \u0026 Bottom of 0.5rem |\n| py-3 | Padding Top \u0026 Bottom of 0.75rem |\n| py-4 | Padding Top \u0026 Bottom of 1rem |\n| py-5 | Padding Top \u0026 Bottom of 1.5rem |\n| py-6 | Padding Top \u0026 Bottom of 2rem |\n| py-7 | Padding Top \u0026 Bottom of 2.5rem |\n| py-8 | Padding Top \u0026 Bottom of 3rem |\n| py-9 | Padding Top \u0026 Bottom of 4rem |\n| py-10| Padding Top \u0026 Bottom of 5rem |\n\u003c/details\u003e\n\n\n### Margin Classes\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Classes | Description |\n|---|---|\n| m-0  | Margin of 0 |\n| m-1  | Margin of 0.25rem |\n| m-2  | Margin of 0.5rem |\n| m-3  | Margin of 0.75rem |\n| m-4  | Margin of 1rem |\n| m-5  | Margin of 1.5rem |\n| m-6  | Margin of 2rem |\n| m-7  | Margin of 2.5rem |\n| m-8  | Margin of 3rem |\n| m-9  | Margin of 4rem |\n| m-10 | Margin of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Top\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Top Classes | Description |\n|---|---|\n| mt-0 | Margin top of 0 |\n| mt-1 | Margin top of 0.25rem |\n| mt-2 | Margin top of 0.5rem |\n| mt-3 | Margin top of 0.75rem |\n| mt-4 | Margin top of 1rem |\n| mt-5 | Margin top of 1.5rem |\n| mt-6 | Margin top of 2rem |\n| mt-7 | Margin top of 2.5rem |\n| mt-8 | Margin top of 3rem |\n| mt-9 | Margin top of 4rem |\n| mt-10| Margin top of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Bottom\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Bottom Classes | Description |\n|---|---|\n| mb-0 | Margin bottom of 0 |\n| mb-1 | Margin bottom of 0.25rem |\n| mb-2 | Margin bottom of 0.5rem |\n| mb-3 | Margin bottom of 0.75rem |\n| mb-4 | Margin bottom of 1rem |\n| mb-5 | Margin bottom of 1.5rem |\n| mb-6 | Margin bottom of 2rem |\n| mb-7 | Margin bottom of 2.5rem |\n| mb-8 | Margin bottom of 3rem |\n| mb-9 | Margin bottom of 4rem |\n| mb-10| Margin bottom of 5rem |\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Left\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin left Classes | Description |\n|---|---|\n| ml-0 | Margin left of 0 |\n| ml-1 | Margin left of 0.25rem |\n| ml-2 | Margin left of 0.5rem |\n| ml-3 | Margin left of 0.75rem |\n| ml-4 | Margin left of 1rem |\n| ml-5 | Margin left of 1.5rem |\n| ml-6 | Margin left of 2rem |\n| ml-7 | Margin left of 2.5rem |\n| ml-8 | Margin left of 3rem |\n| ml-9 | Margin left of 4rem |\n| ml-10| Margin left of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Right\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Right Classes | Description |\n|---|---|\n| mr-0 | Margin right of 0 |\n| mr-1 | Margin right of 0.25rem |\n| mr-2 | Margin right of 0.5rem |\n| mr-3 | Margin right of 0.75rem |\n| mr-4 | Margin right of 1rem |\n| mr-5 | Margin right of 1.5rem |\n| mr-6 | Margin right of 2rem |\n| mr-7 | Margin right of 2.5rem |\n| mr-8 | Margin right of 3rem |\n| mr-9 | Margin right of 4rem |\n| mr-10| Margin right of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Left \u0026 Right\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Left \u0026 Right Classes | Description |\n|---|---|\n| mx-0 | Margin Left \u0026 Right of 0 |\n| mx-1 | Margin Left \u0026 Right of 0.25rem |\n| mx-2 | Margin Left \u0026 Right of 0.5rem |\n| mx-3 | Margin Left \u0026 Right of 0.75rem |\n| mx-4 | Margin Left \u0026 Right of 1rem |\n| mx-5 | Margin Left \u0026 Right of 1.5rem |\n| mx-6 | Margin Left \u0026 Right of 2rem |\n| mx-7 | Margin Left \u0026 Right of 2.5rem |\n| mx-8 | Margin Left \u0026 Right of 3rem |\n| mx-9 | Margin Left \u0026 Right of 4rem |\n| mx-10| Margin Left \u0026 Right of 5rem |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMargin Top \u0026 Bottom\u003c/summary\u003e\n\u003cbr\u003e\n\n| Margin Top \u0026 Bottom Classes | Description |\n|---|---|\n| my-0 | Margin Top \u0026 Bottom of 0 |\n| my-1 | Margin Top \u0026 Bottom of 0.25rem |\n| my-2 | Margin Top \u0026 Bottom of 0.5rem |\n| my-3 | Margin Top \u0026 Bottom of 0.75rem |\n| my-4 | Margin Top \u0026 Bottom of 1rem |\n| my-5 | Margin Top \u0026 Bottom of 1.5rem |\n| my-6 | Margin Top \u0026 Bottom of 2rem |\n| my-7 | Margin Top \u0026 Bottom of 2.5rem |\n| my-8 | Margin Top \u0026 Bottom of 3rem |\n| my-9 | Margin Top \u0026 Bottom of 4rem |\n| my-10| Margin Top \u0026 Bottom of 5rem |\n\u003c/details\u003e\n\n\n### Text and Element Alignment\n\nClasses `text-center`, `center-x`, `center-y`, and `center-xy` are provided for text and element alignment.\n\nExample:\n```html\n\u003cdiv class=\"text-center\"\u003eThis text is centered.\u003c/div\u003e\n\u003cdiv class=\"center-x\"\u003eThis element is horizontally centered.\u003c/div\u003e\n\u003cdiv class=\"center-y\"\u003eThis element is vertically centered.\u003c/div\u003e\n\u003cdiv class=\"center-xy\"\u003eThis element is horizontally and vertically centered.\u003c/div\u003e\n```\n\n### Text and Background Colors\n\nUtility classes are available for text and background colors using semantic color names.\n\nExample:\n```html\n\u003cdiv class=\"text-primary\"\u003eThis text is in primary color.\u003c/div\u003e\n\u003cdiv class=\"bg-secondary\"\u003eThis div has secondary background color.\u003c/div\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003eText Colors\u003c/summary\u003e\n\u003cbr\u003e\n\n\u003cp style='color: #007bff;'\u003etext-primary\u003c/p\u003e\n\u003cp style='color: #6c757d;'\u003etext-secondary\u003c/p\u003e\n\u003cp style='color: #28a745;'\u003etext-success\u003c/p\u003e\n\u003cp style='color: #dc3545;'\u003etext-danger\u003c/p\u003e\n\u003cp style='color: #ffc107;'\u003etext-warning\u003c/p\u003e\n\u003cp style='color: #17a2b8;'\u003etext-info\u003c/p\u003e\n\u003cp style='color: #f8f9fa;'\u003etext-light\u003c/p\u003e\n\u003cp style='color: #343a40;'\u003etext-dark\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBackground Colors\u003c/summary\u003e\n\u003cbr\u003e\n\n\u003cp style='background-color: #007bff; color: #343a40;'\u003ebg-primary\u003c/p\u003e\n\u003cp style='background-color: #6c757d; color: #343a40;'\u003ebg-secondary\u003c/p\u003e\n\u003cp style='background-color: #28a745; color: #343a40;'\u003ebg-success\u003c/p\u003e\n\u003cp style='background-color: #dc3545; color: #343a40;'\u003ebg-danger\u003c/p\u003e\n\u003cp style='background-color: #ffc107; color: #343a40;'\u003ebg-warning\u003c/p\u003e\n\u003cp style='background-color: #17a2b8; color: #343a40;'\u003ebg-info\u003c/p\u003e\n\u003cp style='background-color: #f8f9fa; color: #343a40;'\u003ebg-light\u003c/p\u003e\n\u003cp style='background-color: #343a40; color: #ffffff;'\u003ebg-dark\u003c/p\u003e\n\u003c/details\u003e\n\n\n### Screen Height and Width\n\nClasses `screen-height` and `screen-width` are provided to set elements to full viewport height and width.\n\nExample:\n```html\n\u003cdiv class=\"screen-height\"\u003eThis div takes full viewport height.\u003c/div\u003e\n\u003cdiv class=\"screen-width\"\u003eThis div takes full viewport width.\u003c/div\u003e\n```\n\n### Display\n\nClasses like `inline`, `block`, and `inline-block` are available to set the display property of elements.\n\nExample:\n```html\n\u003cspan class=\"inline\"\u003eThis text is displayed inline.\u003c/span\u003e\n\u003cdiv class=\"block\"\u003eThis div is displayed as a block element.\u003c/div\u003e\n\u003cdiv class=\"inline-block\"\u003eThis div is displayed as a inline block element.\u003c/div\u003e\n```\n\n## Credits\n\n`Flow CSS` is created by `Ramkrishna` don't forgot to star the git repo follow me on github [ramxcodes](https://github.com/ramxcodes).\n\n## Contributing\n\nFeel free to contribute to `Flow CSS` by submitting `pull requests` or `opening issues` on GitHub.\n\n## License\n\n`Flow CSS` is released under the MIT License. See [LICENSE](./LICENSE) for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framxcodes%2Fflow-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framxcodes%2Fflow-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framxcodes%2Fflow-css/lists"}