Unobtrusive and smart Sticky Footer
It is as simple as html, body { height: 100%;}body > footer { position: sticky; top: 100vh;} Silvio Rosa made a CodePen about it, which …
Learn Responsive Design
Learn Responsive Design is A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. It´s a …
Axiomatic CSS and Lobotomized Owls
* + * Read Axiomatic CSS and Lobotomized Owls, an article by Heydon Pickering about creating vertical rhythm with very little CSS.
::before and ::after
::before and ::after add a first child before the other children and a last child after the other children of the element. Rachel Andrew, How to …
HTML with Superpowers
It has to have a hyphen in it. Dave Rupert Excellent slide deck by Dave Rupert about Web Components. Find the deck on Notist. Within the presentation …
Expandable sections within a CSS Grid (Quickview)
Kev Bonett gives an excellent example of how to style expandable CSS Grid sections with only some lines of CSS. Check out his CSS-Tricks article. …
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.