Flexbox sizing mental model
The following explanation from Anna Monus is taken out of A Comprehensive Guide to Flexbox Sizing and I find Anna´s text most helpful. Anna has …
Design systems for everyone ★
Ethan Marcotte has four new courses on design systems, available for free at Aquent Gymnasium. These are my notes about the excellent first course, Design …
Remove unwanted scrollbars
Detect CSS Overflow Elements is a tiny hack by David Walsh to detect the root cause of unwanted scrollbars on a web page. Use the …
Web Interface Handbook
The Web Interface Handbook “is a book about the fundamentals of creating a good web interface. You will find out how to make effective forms, …
CSS Tips
CSS Tips by Marko Denic is a compilation of things that can be done with CSS. It contains A typing effect drop-shadow for transparent images Smooth scrolling Styling cursors Truncating …
Form design ★
Form design by Geri Reid is a comprehensive compilation of best practices for accessible HTML forms. Geri´s site is beautiful, too.
Letterspacing of <code> elements
Widening the letterspacing of <code> elements in the flow of text emphasizes the code-nature of the element without using a different font or a different …
Split a figure
A responsive technique of splitting a figure equally into an image (one half of the available space), and the corresponding caption (other half of the available space).
Indicating the focused element
Focus is important for keyboard navigation Do not disable the focus outline How to style the focus indication References Focus is important for keyboard navigation …
Back to Top
A Back to Top link helps users navigate to the top (start) of long pages. Behavior of a Back to Top link HTML to create the …