Webfont icons — what typographers would traditionally refer to as dingbats — are an important part of modern web development. There are so many advantages to them:

Comment:
I've used https://icomoon.io for years, because of its great selection of free icon fonts and also because it's quite easy to import self designed svgs and turn them into glyphs. It's easy to use and all relevant functionalities are free of charge.

https://web.dev/optimize-webfont-loading/#customize-the-text-rendering-delay

Never, ever use system-ui as the value of font-family

https://infinnie.github.io/blog/2017/systemui.html

A visualizer to help you learn how the DOM Event system works through exploration. Explore event phases, stopping events, canceling events, passive events and more.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.

Filling out a form can frustrate anyone if it requires a high cognitive effort. A high cognitive effort causes users to think and work harder, increasing the time to complete the task. This experience can lead to page abandonment and lower conversion rates on a checkout form. To prevent this, apply these best practices to […]

aspect-ratio is a great example of a humble property that fills a long-awaited need in the CSS community. It’s simple to use and behaves in a way that respects content, without the need for any extra CSS.

Normalize.css is a library that helps you build all elements more consistently when displayed in today’s popular browsers. I hope that the article will provide you with useful CSS libraries for web…

https://philipwalton.github.io/solved-by-flexbox/
https://tobiasahlin.com/spinkit/
https://connoratherton.com/loaders
https://github.com/AllThingsSmitty/css-protips
https://csslayout.io/close-button/
https://bansal.io/pattern-css
https://github.com/codrops/PageTransitions
https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

Stephanie Eckles

Sixty percent of first-time visitors leave a website in less than fifteen seconds. Yet, there is an often overlooked usability factor that improves visitor retention—scannability. These UI design tips for using research, science, and strategy to layout content help convert short-term visitors to long-lasting users.

Learn the basics of web design in 4 minutes with this interactive tutorial.

It’s got:

• Horizontal rulers at the top of the frame showing where (1) page actions, (2) page title, and (3) the search bar (if applicable) go
• Horizontal rulers at the bottom of the page showing where the tab bar goes
• Vertical rulers at (1) the standard iOS side margins and (2) the centerline
• A single-layer status bar – easy to delete or change to white, as needed
• A single layer device outline (including notch)

And it makes it dead simple to lay out apps in a “typical” iOS style.

Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects.

There are two kinds of shadows that occur when a light shines on an object, a drop shadow and a form shadow.

90 percent of the problems found in forms solved in a few hundred precious words.

• Use sentence case for labels, hints and error messages. It’s easier to read and spot nouns. Use a verb for button text because the user is doing something.

• Be tolerant of mistakes like extra spaces, dashes and slashes. Do the hard work so users don’t have to.

• Prefix the word “Error:” to the document’s title. It’s the first thing announced by screen readers when the page loads.

• Tell users what they need and how long the form will take to complete before they start.

A simple hand drawn HTML/CSS theme.

This stylesheet is heavily inspired by the Hand Drawn Vector UI Kit by Tony Thomas. I wanted a CSS theme that looked just like that, so I drew a bunch of similar components and got them working on the web.

https://medialoot.com/item/hand-drawn-vector-ui-kit/

HTML coverage using HTML Kitchen Sink.

https://github.com/dbox/html5-kitchen-sink/

The font is Short Stack.

In general, the attribute selector can target any attribute that's attached to an HTML element. By default, the selector is case sensitive and has a lower specificity than id's and classes.

CSS attribute ends with

Conversely to looking for matched at the start, we can also look at the very end of an attribute's value by useing the $ operator. We'd match something value but not value something. This is especially interesting because we know that files always have a certain extension and by passing the full name into a data-attribute, we'd be able to match elemenets that represent PDF documents like this a[href$="pdf"].

[data-attribute$="value"] {
  /* ... */
}

Create a set of lush, realistic CSS shadows.

https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/

I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

Colors are always a tricky topic to address for many reasons. First, it’s a key pillar of a brand’s identity and has a clear impact on the perception of the brand by both the user and employees, and…

1. Clutter & Legacy
2. Simplify our designer’s journey
3. Accessibility

Easily make tints and shades that match the output of Chrome DevTools, PostCSS, and Sass.