Starability.css - Accessible rating with animations on top
Remember: to submit the data you will need to add a bit of your own code. Here we have just a fieldset with a collection of radio buttons, neatly styled. There are no dependencies in this library.
Important: The library does not rely on a reverse order of inputs any more. This means that the issue with the keyboard arrows moving in a reverse direction is no longer there. It is strongly advised to update the HTML structure in your project, although the updated CSS doesn't break the functionality even for the previous version of HTML markup.
This step by step tutorial is based on an assumption that project directory structure looks as follows:
- css file with chosen rating (eg.: starability-fade.min.css)
If you have a different file structure, remember to update file path for CSS stylesheet links (in HTML
How to use
Copy the structure of HTML (fieldset and insides), to make sure the styles work correctly. If you want more than one rating widget on the same page, remember that the id's need to be different for each radio buttons collection:First rating:1 star2 stars3 stars4 stars5 starsFirst rating:1 star2 stars3 stars4 stars5 stars
Add a stylesheet with a name of an animation that works best for your app name inside your website's
<head>element. There are the minified versions or standard CSS files. Let's say we want a fading animation:
If you wish to use more than one animation per website (though better stick to one!), you can include the file with all of the animations combined:
Add the chosen rating version class name to the fieldset element in your HTML. For our fading animation you would have to add the
List of rating animations
For now you can choose one of the animations listed below. Go to the demo to see how they look.
- starability-coinFlip (by Paulina Materna)
Starability.css works in IE10+ and all modern browsers. If you want to support browsers below IE10, you should disable animations for them, for example by using Modernizr.
Disabling hover action
This rating system by default reacts to
:hover, changing the background image position. This is an operation that causes repaints. If you want to make your website as light as possible, you can remove declaration that will highlight stars on hover:
By default, if user focuses with keyboard on the rating widget, there is an outline around all the stars to make it easier to navigate. This is not visible for users using only mouse. The function can be turned off by setting the
$accessible-focus-ring variable to
false in _variables.scss file and removing a span with
.starability-focus-ring class from the HTML. It is not advised though to remove the outline.
There is also another functionality that can be turned on by changing the
$accessible-outline variable value to
true. It will show an outline around active stars that are in the keyboard focus. It can enhance the widget's accessibility for some users.
Showing the static rating result
You can add the static results of the rating anywhere you need it. To indicate how many stars were added, change the
data-rating value on an element with the
starability-result class. Please note, that this supports only integer numbers. If you wish to show the results as the float numbers, you might need to use other solution.
Rated element nameRated: 3 stars
There is no official support for half-stars, as we don't want to make the library output bigger than needed, but you can easily add the support for showing half-stars in the rating results. To do so, check the answer in this issue.
Further customisation with SASS
If you are well-versed with SASS, you can easily adjust rating widget to your needs, e.g. have a 10-star based system or turn off outline and hover. It can be done by setting
false values to the variables in the _variables.scss file and running the gulp task to process the files. Of course, to have a 10-stars system you also need add additional radio inputs in your HTML.
If you are not using SCSS syntax, you can also have a 10-star based system. Just remember to change the width of the fieldset element in your CSS, so that the stars would all fit it (for example for 10 stars, the width of fieldset should be 10x the width of a star, so 300px).
Check what was changed in the newest version in the Changelog.
The library wouldn't be what it is now without:
- Anna Migas
- Paulina Materna
- Scott O'Hara
- Mislav Marohnić
- Dan Dascalescu
- Steve Lacey
- Artur Parkhisenko
- Barry Els
- Alex Carpenter