{"id":13446666,"url":"https://github.com/BioPhoton/css-star-rating","last_synced_at":"2025-03-21T16:32:43.066Z","repository":{"id":13764171,"uuid":"74887386","full_name":"BioPhoton/css-star-rating","owner":"BioPhoton","description":"Css Star Rating is a css only star rating lib based on best practice UX/UI methodes. It is written in scss and fully customizable. ","archived":false,"fork":false,"pushed_at":"2023-02-04T08:46:43.000Z","size":6535,"stargazers_count":68,"open_issues_count":12,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T23:00:40.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BioPhoton.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-27T12:50:15.000Z","updated_at":"2023-02-19T20:45:19.000Z","dependencies_parsed_at":"2023-02-18T15:02:16.566Z","dependency_job_id":null,"html_url":"https://github.com/BioPhoton/css-star-rating","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fcss-star-rating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fcss-star-rating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fcss-star-rating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fcss-star-rating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioPhoton","download_url":"https://codeload.github.com/BioPhoton/css-star-rating/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244829609,"owners_count":20517342,"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":[],"created_at":"2024-07-31T05:00:55.977Z","updated_at":"2025-03-21T16:32:42.322Z","avatar_url":"https://github.com/BioPhoton.png","language":"SCSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Css Star Rating ⭐⭐⭐⭐⭐\n####  ⭐ Css Star Rating is a pure css star rating plugin based on best practice UX/UI methods. ⭐\n\n![License](https://img.shields.io/npm/l/css-star-rating.svg) \n[![NPM Version](https://img.shields.io/npm/v/css-star-rating.svg)](https://www.npmjs.com/package/css-star-rating) \n[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/css-star-rating)\n[![Build Status](https://travis-ci.org/BioPhoton/css-star-rating.svg?branch=dev)](https://travis-ci.org/BioPhoton/css-star-rating)\n[![npm](https://img.shields.io/npm/dt/css-star-rating.svg)](https://www.npmjs.com/package/css-star-rating)  \n\n[![Package Quality](http://npm.packagequality.com/badge/css-star-rating.png)](http://packagequality.com/#?package=css-star-rating)  \n\nCss Star Rating is written in scss and fully customizable over variables.  \nEasily compose your own rating component over a rich set of css modifiers for any kind of UI state.  \n## Demo\n\nDemos in the **[KSS style guide](https://biophoton.github.io/css-star-rating/)**\n\n## Features\n\n- [x] **Written in scss**\n- [x] **Customizable over variables**\n- [x] **Flexbox layout**\n- [x] **SVG icons**\n- [x] **Icon fonts like fontawesome, ionicon...**\n- [x] **Display rating over css class**\n- [x] **Different Numbers of stars**\n- [x] **Color of stars depend on rating**\n- [x] **Half stars**\n- [x] **Sizes**\n- [x] **Star alignments**\n- [x] **Static colors**\n- [x] **Disabled mode**\n- [x] **Star types**\n- [x] **Label**\n- [x] **Label positions**\n- [x] **Animations**\n- [x] **Directions**\n- [x] **Themes**\n\n## Browser support\n\n\n| IE | Firefox | Chrome | Safari | Opera |\n|--- |---\t   |--- \t|---\t |---|\n| 11  \t|  50 \t|   55\t|  10 \t|   41\t|\n| \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/browsers/ie.png\" width=\"100\"\u003e\t| \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/browsers/firefox.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/browsers/chrome.png\" width=\"100\"\u003e  | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/browsers/safari.png\" width=\"100\"\u003e  | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/browsers/opera.png\" width=\"100\"\u003e |\n\n## Related Projects\n\n| Css | Angular1 (\u003e=1.5)| Angular (\u003e=10) |\n|---  |---\t    |--- \t       |\n| \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/family/css3.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/family/angular1.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/family/angular.png\" width=\"80\"\u003e |\n| [Css Star Rating](https://github.com/BioPhoton/css-star-rating) | [Angular1 Star Rating](https://github.com/BioPhoton/angular1-star-rating) | [Angular Star Rating](https://github.com/BioPhoton/angular-star-rating) |\n\n## Demo\n\n- [x] [KSS documentation](https://biophoton.github.io/css-star-rating/)\n\n## Install\n\n**Get Css Star Rating:**\n - clone \u0026 build this repository\n - [download as .zip](https://github.com/BioPhoton/css-star-rating/releases)\n - via **[npm](https://www.npmjs.org/)**: by running `$ npm install css-star-rating` from your console\n \n**Load library**\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/css-star-rating/css/star-rating.css\"\u003e\n```\n\n**Copy assets (optional)**\nIf you want to use svg as icon type copy the  \n```star-rating.icons.svg``` image form ```node_modules/css-star-rating/images/star-rating.css``` to your roots assets folder.\n\n**Usage**\n```html\n\u003cdiv class=\"rating large star-icon direction-rtl value-1 half color-default label-top\"\u003e\n   \u003cdiv class=\"label-value\"\u003e1.5\u003c/div\u003e\n    \u003cdiv class=\"star-container\"\u003e\n        \u003cdiv class=\"star\"\u003e\n            \u003ci class=\"star-empty\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-half\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-filled\"\u003e\u003c/i\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"star\"\u003e\n            \u003ci class=\"star-empty\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-half\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-filled\"\u003e\u003c/i\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"star\"\u003e\n            \u003ci class=\"star-empty\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-half\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-filled\"\u003e\u003c/i\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n\n## Css Modifiers\n\n**.value-[N]**:  \nThe actual star rating value. The color of the stars depends on the rating number  \n- .value-0\n- .value-1\n- .value-2\n- .value-3\n- .value-4\n- .value-5\n```html\n\u003cdiv class=\"rating value-3\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-value.PNG\" width=\"290\"\u003e\n\n**.half**:  \nIf set, every rating value will have a half star at the end.\n- .half\n\n```html\n\u003cdiv class=\"rating value-3 half\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-show_half_stars-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-show_half_stars-true.PNG\" width=\"290\"\u003e  \n\n**text**:  \nThe text next to the stars. \n- (Just additional HTML)\n\n```html\n\u003cdiv class=\"rating value-3\"\u003e\n   \u003cdiv class=\"label-value\"\u003eMy text\u003c/div\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-text.PNG\" width=\"290\"\u003e\n\n**.label-[VISIBILITY]**:  \nThe position of the label.\n- .label-visible\n- .label-hidden\n\n```html\n\u003cdiv class=\"rating value-3 label-hidden\"\u003e\n   \u003cdiv class=\"label-value\"\u003e3.5\u003c/div\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-visible.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-hidden.PNG\" width=\"290\"\u003e  \n\n**.label-[POSITION]**:  \nThe position of the label.\n- .label-top\n- .label-right\n- .label-bottom\n- .label-left\n\n```html\n\u003cdiv class=\"rating value-3 label-right\"\u003e\n   \u003cdiv class=\"label-value\"\u003eGood\u003c/div\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-top.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-bottom.PNG\" width=\"290\"\u003e  \n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-right.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-label-left.PNG\" width=\"290\"\u003e\n\n**.space**:   \nIf the start use the whole space or not.  \n\n```html\n\u003cdiv class=\"rating value-3 space-between\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-space-default.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-space-between.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-space-around.PNG\" width=\"290\"\u003e\n\n**.[SIZE]**:  \nThe height and width of the stars.    \n- .small\n- .medium\n- .large\n```html\n\u003cdiv class=\"rating value-3 large\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-size-small.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-size-medium.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-size-large.PNG\" width=\"290\"\u003e\n\n**color-[COLOR_NAME]**:  \nStatic color of stars.\n- .color-default\n- .color-negative\n- .color-ok\n- .color-positive  \n\n```html\n\u003cdiv class=\"rating value-3 color-negative\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-color-default.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-color-positive.PNG\" width=\"290\"\u003e  \n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-color-ok.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-color-negative.PNG\" width=\"290\"\u003e\n\n**.disabled**:\nThe click callback is disabled, colors are transparent   \n  \n```html\n\u003cdiv class=\"rating value-3 disabled\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-disabled-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-disabled-true.PNG\" width=\"290\"\u003e\n  \n**.direction-[DIRECTION]**:   \nThe direction of the stars and label.   \n- .direction-rtl\n- .direction-ltr  \n\n```html\n\u003cdiv class=\"rating value-3 direction-rtl\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-direction-rtl.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-direction-ltr.PNG\" width=\"290\"\u003e\n  \n**.[ANIMATION_SPEED]**:   \nThe duration of the animation in ms.   \n- .immediately\n- .noticeable\n- .slow  \n \n```html\n\u003cdiv class=\"rating value-3 slow\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-animation_speed-immediately.gif\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-animation_speed-noticeable.gif\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-animation_speed-slow.gif\" width=\"290\"\u003e\n\n**starType**:  \nThe type of start resource to use.     \n- .star-svg\n- .star-icon (star character)\n- .custom-icon (i.e. font-awesome)\n\n```html\n\u003cdiv class=\"rating value-3 star-icon\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        \u003c!-- font icons--\u003e\n        \u003cdiv class=\"star\"\u003e\n            \u003ci class=\"star-empty\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-half\"\u003e\u003c/i\u003e\n            \u003ci class=\"star-filled\"\u003e\u003c/i\u003e \n        \u003c/div\u003e\n        \u003c!-- or svg icons--\u003e\n        \u003cdiv class=\"star\"\u003e\n            \u003csvg class=\"star-empty\"\u003e\n                \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"assets/images/star-rating.icons.svg#star-empty\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n            \u003csvg class=\"star-half\"\u003e\n                \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"assets/images/star-rating.icons.svg#star-half\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n            \u003csvg class=\"star-filled\"\u003e\n                \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"assets/images/star-rating.icons.svg#star-filled\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-type-svg.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-type-icon.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/css-star-rating/master/resources/images/prop-type-custom_icon.PNG\" width=\"290\"\u003e\n\n\n## Themes\nAs a bonus there are some themes as classes. \n**theme-[NAME]**:  \nThe type of start resource to use.     \n- .theme-google-places\n- .theme-kununu\n\n```html\n\u003cdiv class=\"rating value-3 theme-google-places\"\u003e\n   \u003cdiv class=\"star-container\"\u003e\n        ...stars...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBioPhoton%2Fcss-star-rating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBioPhoton%2Fcss-star-rating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBioPhoton%2Fcss-star-rating/lists"}