Практически любой сайт не обходиться без блоков потоковых элементов, таких как: список новостей, товаров, фотографий галереи. Такие элементы в основном выводятся шаблонизатором в цикле, занимают равное число колонок и непредвиденное количество строк. Если такие элементы переходят на вторую строчку, то между ними нужно предусмотреть вертикальные отступы, что бы они не сжимались. Даже если на макете дизайнер для красоты вывел только один ряд, на верстке обязательно нужно предусмотреть увеличение числа таких элементов

Стояла задача добавить стар-рейтинг к форме комментариев для шаблона.

Это должны быть обычные 5 звездочек, при наведении на которые выделяются все звездочки от начала до той, на которую навели и при выборе (клике) такое состояние сохраняется. Также, конечно, нужно обеспечить передачу значения указанного рейтинга при отправке формы.

Решение делал не для конечного проекта, а для шаблона. Поэтому нужно было сделать звездочки максимально гибким для дальнейшей кастомизации. То есть изменения цвета, размера звездочек должно быть максимально легким. Под такую конфигурацию использование спрайта изображений не подходило, поэтому решил использовать шрифтовые иконки. Выбор пал на сервис Font Awesome. Там есть звездочки с названием fa-star-o — звездочка по умолчанию и fa-star — звездочка активная (при наведении и выборе).