{"id":15578502,"url":"https://github.com/harso-css/harso-css","last_synced_at":"2026-04-01T20:43:11.580Z","repository":{"id":46599953,"uuid":"412437649","full_name":"harso-css/harso-css","owner":"harso-css","description":"A CSS Framework to make beautiful pages in a few class names","archived":false,"fork":false,"pushed_at":"2021-10-21T17:26:08.000Z","size":150,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-17T17:43:44.398Z","etag":null,"topics":["animation","css","css3","library"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/harso-css","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/harso-css.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-01T11:20:40.000Z","updated_at":"2024-05-06T11:37:46.000Z","dependencies_parsed_at":"2022-08-25T05:10:41.337Z","dependency_job_id":null,"html_url":"https://github.com/harso-css/harso-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/harso-css/harso-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harso-css%2Fharso-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harso-css%2Fharso-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harso-css%2Fharso-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harso-css%2Fharso-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harso-css","download_url":"https://codeload.github.com/harso-css/harso-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harso-css%2Fharso-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291777,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"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":["animation","css","css3","library"],"created_at":"2024-10-02T19:11:04.699Z","updated_at":"2026-04-01T20:43:11.555Z","avatar_url":"https://github.com/harso-css.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to harso-css \n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n## What is this library?\n\u003e This Library is A Superr CSS3 Library\u003cbr\u003e\n\u003e A CSS Framework that helps you to make your pages Cool!!\n\n## Installation\n\u003e Install via npm: ```npm i harso-css```\u003cbr\u003e\n\u003e Install via CDN: ```\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/harso-css@4.0.0/harso.css\"\u003e```\n\n# Documentation \u003cbr\u003e\n### \u003ch2\u003eFonts\u003c/h2\u003e\n### The first thing that this library include is it will automatically gives margin and padding as 0\n### This can change your font-family only with a classname\n#### Example :``` \u003cbody class=\"sans-serif\"\u003e\u003c/body\u003e ``` =\u003e This will set the font family to sans-serif for every content inside the body\n### The fonts that we can use are : sans-serif, cursive, monospace, consolas, fantasy\n### \u003cbr\u003e\u003cbr\u003e\n### \u003ch2\u003eColors\u003c/h2\u003e\n### \u003ch3\u003eBlue Text\u003c/h3\u003e = ``` \u003ch3 class=\"blue\"\u003eBlue Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch3\u003eRed Text\u003c/h3\u003e = ``` \u003ch3 class=\"red\"\u003eRed Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch3\u003eYellow Text\u003c/h3\u003e = ``` \u003ch3 class=\"yellow\"\u003eYellow Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch3\u003eWhite Text\u003c/h3\u003e = ``` \u003ch3 class=\"white\"\u003eWhite Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch3\u003eGreen Text\u003c/h3\u003e = ``` \u003ch3 class=\"green\"\u003eGreen Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch3\u003eLight Green Text\u003c/h3\u003e = ``` \u003ch3 class=\"light-green\"\u003eLight Green Text\u003c/h3\u003e ```\u003cbr\u003e\u003cbr\u003e\n### \u003ch2\u003eThere are more colors like this, that light-blue\u003c/span\u003e, \u003cspan\u003eroyal-blue\u003c/span\u003e, \u003cspan\u003edark\u003c/span\u003e, \u003cspan\u003ebrown\u003c/span\u003e, \u003cspan\u003epink\u003c/span\u003e, \u003cspan\u003eplum\u003c/span\u003e, \u003cspan\u003eviolet\u003c/span\u003e, \u003cspan\u003epurple\u003c/span\u003e, \u003cspan\u003e\u003c/span\u003e and \u003cspan\u003eorange\u003c/span\u003e\u003c/h2\u003e\u003chr\u003e\n### \u003ch2\u003eSome Others...\u003c/h2\u003e\n### \u003ch3\u003eGive this classname to an a tag : a-no-decr, then it don't have any text-decoration\u003c/h3\u003e\n### \u003ch3\u003eLook that how you can create a nav-bar with harso-css in the Examples\\NavBar\\index.html\u003c/h3\u003e\n### \u003ch3\u003eclass name text-center will make the text in the center\u003c/h3\u003e\n### \u003ch3\u003eclass name center will gives you display as flex, align-items as center, justify-content as center and min-height as 100vh\u003c/h3\u003e\u003cbr\u003e\u003cbr\u003e\n\n### \u003ch2\u003eAnimations\u003c/h2\u003e\n### \u003ch3\u003eGive this classname to a tag : rainbow-bg-infinite, then the bg of that element will have a rainbow animation forever\u003c/h3\u003e\n### \u003ch3\u003eGive this classname to a tag : rainbow-bg-one-time-only, then the bg of that element will have a rainbow animation for one time\u003c/h3\u003e\n### \u003ch3\u003eGive this classname to a tag : rainbow-text-infinite, then the color of that element will have a rainbow animation forever\u003c/h3\u003e\n### \u003ch3\u003eGive this classname to a tag : rainbow-text-one-time-only, then the color of that element will have a rainbow animation for one time\u003c/h3\u003e\u003cbr\u003e\u003cbr\u003e\n\n### \u003ch2\u003eButtons\u003c/h2\u003e\n### \u003ch3\u003eWe have many buttons, you can look it in \u003ca href=\"https://harso-css.github.io/harso-css/Examples/buttons/\"\u003ehere\u003c/a\u003e\u003c/h3\u003e\n### ```\u003cbutton class=\"btn btn-danger\"\u003eHi\u003c/button\u003e```\n### ```\u003cbutton class=\"btn btn-info\"\u003eHi\u003c/button\u003e```\n### ```\u003cbutton class=\"btn btn-warning\"\u003eHi\u003c/button\u003e```\u003cbr\u003e\u003cbr\u003e\n### ```\u003cbutton class=\"btn btn-fill\"\u003eHi\u003c/button\u003e```\n### ```\u003cbutton class=\"btn btn-border\"\u003eHi\u003c/button\u003e```\u003cbr\u003e\u003cbr\u003e\n\n### \u003ch2\u003eTransitions\u003c/h2\u003e\n\u003e ```trans-0 = transition: 0s;```\u003cbr\u003e\n\u003e ```trans-0dot1 = transition: 0.1s;```\u003cbr\u003e\n**Like these, We also have more classes for transition such as: trans-0dot2, trans-0dot3, trans-0dot4, trans-0dot5, trans-0dot6, trans-0dot7, trans-0dot8, trans-0dot9, trans-1, trans-1dot1, trans1dot2, trans-1dot3, trans-1dot4, trans-1dot5, trans-1dot6, trans-0dot7, trans-1dot8, trans-1dot9, trans-2, trans-2dot1 trans-2dot2, trans-2dot3, tans-2dot4, trans-2dot5, trans-2dot6, trans-2dot7, trans-2dot9, and trans-3** \u003cbr\u003e\u003cbr\u003e\n\n### \u003ch2\u003eOpacity\u003c/h2\u003e\n\u003e ```op-0 = opacity: 0s;```\u003cbr\u003e\n\u003e ```op-0dot1 = opacity: 0.1s;```\u003cbr\u003e\n\u003e ```op-0dot2 = opacity: 0.2s;```\u003cbr\u003e\n\u003e ```op-0dot3 = opacity: 0.3s;```\u003cbr\u003e\n\u003e ```op-0dot4 = opacity: 0.4s;```\u003cbr\u003e\n\u003e ```op-0dot5 = opacity: 0.5s;```\u003cbr\u003e\n\u003e ```op-0dot6 = opacity: 0.6s;```\u003cbr\u003e\n\u003e ```op-0dot7 = opacity: 0.7s;```\u003cbr\u003e\n\u003e ```op-0dot8 = opacity: 0.8s;```\u003cbr\u003e\n\u003e ```op-0dot9 = opacity: 0.9s;```\u003cbr\u003e\n\u003e ```op-1 = opacity: 1s;```\u003cbr\u003e\n\n## Contributors ✨\n\nHover on a icon to see their description.\u003cbr\u003e\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.youtube.com/channel/UCYJKtrmrcSbFlNABR_JFWuQ/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/82920449?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSreehari521\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#projectManagement-Sreehari521\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"#tool-Sreehari521\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"#ideas-Sreehari521\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/issues?q=author%3ASreehari521\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/commits?author=Sreehari521\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/e-coders\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/83082760?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eE - Coders (Aasheesh Agarwal)\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-e-coders\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/issues?q=author%3Ae-coders\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/commits?author=e-coders\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://anantjit.whjr.site\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/74092334?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnantjit\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-genius398\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/issues?q=author%3Agenius398\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/somePythonProgrammer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/74598401?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esomePythonProgrammer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-somePythonProgrammer\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/issues?q=author%3AsomePythonProgrammer\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://adatta1276.github.io\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73747859?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdatta1276\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/harso-css/harso-css/commits?author=Adatta1276\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-Adatta1276\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/harso-css/harso-css/issues?q=author%3AAdatta1276\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharso-css%2Fharso-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharso-css%2Fharso-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharso-css%2Fharso-css/lists"}