{"id":20272819,"url":"https://github.com/manuel12/fluent-css","last_synced_at":"2026-01-30T14:34:15.066Z","repository":{"id":63303771,"uuid":"566850605","full_name":"manuel12/fluent-css","owner":"manuel12","description":"A CSS library inspired by the styles of the Duolingo and Font Awesome websites. ","archived":false,"fork":false,"pushed_at":"2023-07-07T11:37:34.000Z","size":979,"stargazers_count":1,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-05T22:05:54.672Z","etag":null,"topics":["css","css-classes","css-framework","css-utilites","css3","functional-css","ui-framework","ui-kit","ui-libary"],"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/manuel12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2022-11-16T14:53:54.000Z","updated_at":"2023-07-10T10:00:50.000Z","dependencies_parsed_at":"2024-11-14T12:50:27.157Z","dependency_job_id":"677bf091-e7cc-4ba9-bd8c-d2ce73d5756a","html_url":"https://github.com/manuel12/fluent-css","commit_stats":null,"previous_names":["manuel12/fluent-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/manuel12/fluent-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuel12%2Ffluent-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuel12%2Ffluent-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuel12%2Ffluent-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuel12%2Ffluent-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manuel12","download_url":"https://codeload.github.com/manuel12/fluent-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuel12%2Ffluent-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28914321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T12:13:43.263Z","status":"ssl_error","status_checked_at":"2026-01-30T12:13:22.389Z","response_time":66,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","css-classes","css-framework","css-utilites","css3","functional-css","ui-framework","ui-kit","ui-libary"],"created_at":"2024-11-14T12:47:08.018Z","updated_at":"2026-01-30T14:34:15.026Z","avatar_url":"https://github.com/manuel12.png","language":"CSS","readme":"![FluentCSS](hero.png)\n\nA CSS library inspired by the styles of the Duolingo and Font Awesome websites.\n\nCheck out the live [demo](https://manuel12.github.io/fluent-css/).\n\n\u003c!-- ## Some quick examples\n\n### Headings\n\n![Headers example](demo/headers.png)\n\n### Social buttons\n\n![Social buttons](demo/social-buttons.png)\n\n### Sound buttons\n\n![Sound buttons](demo/sound-buttons.png) --\u003e\n\n## Introduction\n\nA Brief overview of what the library does:\n\nInspired by the styles of the [Duolingo](https://www.duolingo.com/learn) and [Font Awesome](https://fontawesome.com/) websites, I wanted to create a library that would immediately improve the look of a website when imported but also provide the user with utility classes to alter the styles of the different elements in use.\n\n_Disclainer: I don't any rigths to Duolingo or Font Awesome. Duolingo images or icons used are not monetized in any way._\n\n### How the library was built:\n\nFluentCSS was built using plain CSS and Font Awesome icons.\n\n## Download\n\n### How to download the library:\n\nSimply clone the repository locally and extract the _fluent.min.css_ file.\n\n### How to import the library:\n\nIn order to import FluentCSS, simply add the two library links to the head tag of your index.html\n\n\u003clink rel=\"stylesheet\" href=\"fluent.min.css\" /\u003e\n\n_This is, of course, assuming the styles are in the root of your project; if they are not, then modify their paths accordingly._\n\nAnd finally, add the script for the Font Awesome kit (to be able to use Font Awesome icons).\n\n\u003cscript src=\"https://kit.fontawesome.com/d0731b8ace.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\n## What's included in the library\n\nFluentCSS consists of one CSS file: _fluent.min.css_\n\nThe _fluent.min.css_ file includes boilerplate stylings that will apply immediately as soon as the library is imported; it also contains some custom element styles like 'main container' or 'basic container' that serve as building blocks for your application; further utility classes regarding margin, padding, width, and height; and color classes to style text, background, and border colors:\n\n### Some custom element styles:\n\n- Main container\n- Basic container\n- Depth container\n- Heading with depth\n- Heading with round corners\n- Submit button\n- Icon buttons\n\n### Some general style utilities\n\n- Display styles\n- Margin styles\n- Padding styles\n- Width styles\n- Height styles\n- Text styles\n- Font-size styles\n\n### Custom Colors\n\n- Background colors\n- Border colors\n- Text colors\n\n## Usage\n\n### Adding classes to elements\n\nAfter importing FluentCSS and reloading, you should see changes applied to the document. The standard background will be added; the font family and color will be updated; input elements, buttons, tables, and ordered and unordered lists will also be automatically updated.\n\nIn order to use the other styles available, such as having a heading with depth, or with darker borders, styling buttons as social or music buttons, and so on, you will need to add the class of the style you want to add to the element you want to change.\n\nSo for example, if you have a heading element that you want to update to a heading with depth and also give it a different background color...\n\n\u003chtml\u003e\n      \u003cbody\u003e\n        \u003ch1\u003eMy heading\u003c/h1\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n\n...that originally looked like this...\n\n![Heading example](demo/heading.png)\n\n...you need to add the required classes, in this case _.heading-depth_ and _.bg-green_, to the h1 element...\n\n\u003chtml\u003e\n      \u003cbody\u003e\n        \u003ch1 class=\"heading-depth bg-green\"\u003eMy heading\u003c/h1\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n\n...so that it ends up looking like this:\n\n![Heading example](demo/heading-with-depth.png)\n\n### Custom containers\n\nOne of the most important classes provided by FluentCSS is the _.main-container_ class. With this class, you can create containers that are padded, bordered, and margined. All the examples in the \"Examples\" section of this README file are contained in custom containers. In order to make a normal div into a custom container, you just have to add the class _.main-container_ to such an element. As an example, we have a restaurant reservation system that is wrapped in a div...\n\n\u003cdiv\u003e\n      \u003ch1\u003eRestaurant Reservation System\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n\n...and currently looks like this...\n\n![Heading example](demo/div-without-added-classes.png)\n\n...add the _.main-container_ and _.bg-blue_ classes to such a div in order to change it to a custom container with a blue background...\n\n\u003cdiv class=\"main-container bg-blue\"\u003e\n      \u003ch1\u003eRestaurant Reservation System\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n\n...and it will end up looking like this:\n\n![Heading example](demo/div-with-main-container-and-bg-color-classes.png)\n\n**Note:** Custom containers occupy 75% of their parent's width and have a white font by default.\n\nIn order to see how to apply any of the different styling examples, simply load the index.html that comes with the library and check the source code to see how each element was implemented.\n\n## Examples\n\n### Headings with depth\n\n![Headers example](demo/headings.png)\n\n### Headings with round corners\n\n![Headers example](demo/headings-with-round-corners.png)\n\n### Headings with dark borders\n\n![Headers example](demo/headings-with-darker-borders.png)\n\n### Form elements\n\n![Headers example](demo/forms.png)\n\n### Button using width classes\n\n![Button using width classes](demo/button-width-classes.png)\n\n### Social buttons\n\n![Social buttons](demo/social-buttons.png)\n\n### Sound buttons\n\n![Sound buttons](demo/sound-buttons.png)\n\n### Tables, ordered and unordered lists\n\n![Headers example](demo/tables-and-lists.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuel12%2Ffluent-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuel12%2Ffluent-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuel12%2Ffluent-css/lists"}