Starability.css is an accessible rating system with cute animations on top. No JavaScript included.
npm install starability
Accessible rating forms with cute animations on top. The name is the combination of two words: star and accessibility (or ability in general, whatever pleases you). Starability ratings are made with HTML, CSS (no JavaScript), and are accessible by keyboard, so even people using screen readers are able to use them. To achieve this effect I am using the sibling combinators technique that was introduced by Lea Verou in "Accessible star rating widget with pure CSS" blogpost, but it is bit upgraded: does not rely on a reverse order of the inputs, what makes it even more accessible. The goal of this small library was to combine the Lea's technique with neat animations and make it easy to quickly use it on your website.
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.
You can check how Starability.css looks here.
This step by step tutorial is based on an assumption that project directory structure looks as follows:
* index.html
* /css
* 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 ).
1. 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:
``html
2. Add a stylesheet with a name of an animation that works best for your app name inside your website's
element. There are the minified versions or standard CSS files. Let's say we want a fading animation:
`html
` 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:
html
`
3. Add the chosen rating version class name to the fieldset element in your HTML. For our fading animation you would have to add the
class:
`html
`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-basic
- starability-slot
- starability-grow
- starability-growRotate
- starability-fade
- starability-checkmark
- starability-heart
- starability-heartbeat
- starability-coinFlip (by Paulina Materna)
Supported browsers
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
, 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:`css
.starability-fade > input:hover ~ label {
background-position: 0 -30px;
}
`Accessible outline
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
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.`html
Rated element name
Rated: 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
The library is licensed under The MIT License (MIT).
Go to the Lunar Logic website to learn more about us and our work.