Manuel Matuzovic · Oct 20, 2022
You can use the :placeholder-shown pseudo-class to select input fields with a placeholder that haven't been filled out yet. input:placeholder-shown { outline: 5px solid blue; } Name E-Mail input:placeholder-shown { outline: 5px solid blue; } Name E-Mail PS: Yeah, I know, that one has been around for quite a while alre.
Material Design · Oct 18, 2022
Jumpstart your designs with ready-to-use components and styles in Figma
Adam Silver · Oct 17, 2022
In 2021 I worked on a service that allows teacher training providers to set up interviews with trainees. We needed to find the best way for users to enter a time. But it’s harder than it seems because: - a time is made up of hours, minutes and a period (AM or PM) - there are many different formats for the same time li.
Manuel Matuzovic · Oct 3, 2022
:has() allows you to check whether a parent element contains specific children. In the following example, each .form-item that contains/has a child with the aria-invalid attribute set to “true” displays text in red color. (currently only in Chrome/Edge 105+ and Safari 15.4+ ) .form-item { --color: #000; color: var(--c.
Material Design · Sep 13, 2022
Customize color palettes, add gradients, and more with COLRv1
Lea Verou · Jul 28, 2022
Since 2019, the annual State of CSS survey has collected feedback from web developers from across the world to try and take the pulse of the CSS ecosystem, and it’s become a valuable resource not only for CSS developers, but also for browser vendors. This summer, one of my side projects is helping out with survey desi.
Lea Verou · Jul 14, 2022
A few days ago I asked Twitter a seemingly simple question (I meant aria-pressed , not aria-selected but Twitter doesn’t allow edits…) : https://twitter.com/LeaVerou/status/1545712667515654144 For background, I was implementing a web component for an app I’m working on at work and I was getting into some pretty weird.
Learn UI Design · <name>Erik D. Kennedy</name> · Jul 11, 2022
Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques
Material Design · Jul 7, 2022
With color harmony and Material Design 3 refinements
Lea Verou · Jun 29, 2022
Related: Chris’ blog post for the release of Color.js This post has been long overdue: Chris and I started working on Color.js in 2020, over 2 years ago! It was shortly after I had finished the Color lecture for the class I was teaching at MIT and I was appalled by the lack of color libraries that did the things I nee.
Manuel Matuzovic · Jun 27, 2022
Historically, Lighthouse has analyzed the cold pageload of a page only. Clicking the “Generate report” button reloads the page before Lighthouse runs its tests. This can be problematic when you want to run tests on parts of the UI that are only visible when the user interacts with it. For example, a fly-out navigation.
A List Apart · by <a itemprop="url" class="author" rel="author" href="https://alistapart.com/author/patrick-clancey/">Patrick Clancey</a> · Jun 9, 2022
The mobile-first design methodology is great—it focuses on what really matters to the user, it’s well-practiced, and it’s been a common design pattern for years. So developing your CSS mobile-first should also be great, too…right? Well, not necessarily. Classic mobile-first CSS development is based on the principle of.
Material Design · Jun 2, 2022
See our handpicked Google Fonts pairings in use, and start using them now in Figma
Material Design · May 19, 2022
Resources from Material Design to help you design for everyone
A List Apart · by <a itemprop="url" class="author" rel="author" href="https://alistapart.com/author/lennartoverkamp/">Lennart Overkamp</a> · May 12, 2022
About two and a half years ago, I introduced the idea of daily ethical design . It was born out of my frustration with the many obstacles to achieving design that’s usable and equitable; protects people’s privacy, agency, and focus; benefits society; and restores nature. I argued that we need to overcome the inconveni.
Material Design · May 11, 2022
An interview with Senior Visual Designer leading icons and design systems for Google Fonts, Sehee Lee
Material Design · May 11, 2022
Material Design’s latest accessibility, color, and components are featured at I/O
Dovetail · May 5, 2022
At Dovetail, design is at the core of everything we do, from product design to illustrations and even our physical office spaces.
Boxes and Arrows · Margot Bloomstein · Mar 22, 2022
Designers can empower people to make confident decisions. Empowerment goes beyond just basic functionality: we help people meet their needs and gain a sense of fulfillment and knowledge through their interactions with screens, products, and services. Empowerment is the sense of confidence people gain by making decisio.
Slack Design · lisa · Mar 18, 2022
Hi, we’re Alison and Zoe, Associate and Junior Designers, respectively, and we just joined Slack in fall of 2021. Our first project here: building guidelines for onboarding emails. If you’ve ever joined a Slack workspace, you’ve gotten one of these. In fact, every person that interacts with Slack as a product will rec.