I’ve been looking for, and unable to find, a menu that goes from a vertical menu to hamburger menu.

So this is my attempt at making one. As an added bonus it’s pure CSS, and requires no JS.

I’m not going to explain how it works in detail, but basically the functionality is triggered by changing the state of the (hidden) checkbox, by clicking the label (which is styled as the hamburger), this allows me to use the adjacent sibling combinator Read On >>Pure CSS responsive menu, vertical to hamburger

I’m in the process of creating a web-based satisfaction survey for the hospitality sector, the survey uses a five-point Likert scale.

I found this neat little jQuery rating widget by Deepak Kamatt, on CodePen, but in its default state the widget uses a FontAwesome star icon for rating, which obviously won’t work for a Likert scale. I searched FontAwesome but couldn’t find five consistently styled/designed smileys/emoticons/emojis that indicate each each level of satisfaction. Read On >>Creating a Likert Scale icon font

I created these for a project, where accessibility was mandatory and the primary user was of an older age profile. When considered in context of the target user, standard HTML checkboxes and labels were not ideally suited, the small target area of the label and the checkbox being the main issue. Read On >>Pure CSS, accessible custom checkbox/tickbox and label

I was on the lookout for an accessible, pure CSS, floated form label. Lots of different solutions were available, but none fully suited my needs. Read On >>Pure CSS, Accessible, floated, form labels