Search
Avoiding the Pitfalls of Nested Components in a Design System
26.4.2022
When creating a component-based, front-end infrastructure, one of the biggest pain points I’ve personally encountered is making components that are both reusable and responsive when there are nested components within components.
Take the following “call to action” (<CTA />…
Avoiding...
How Do You Handle Component Spacing in a Design System?
26.1.2022
Say you’ve got a <Card /> component. It’s highly likely it shouldn’t be butted right up against any other components with no spacing around it. That’s true for… pretty much every component. So, how do you handle component spacing in …
How Do You Handle...
Build and Ship a Design System in 8 Steps Using Backlight
24.1.2022
Learn how to use Backlight, an all-in-one collaborative tool that allows teams to build, ship, and maintain Design Systems at scale.
The post Build and Ship a Design System in 8 Steps Using Backlight appeared first on Codrops
Yes, Design Systems Do Improve Developer Efficiency and Design Consistency
5.11.2021
One of the toughest things about being someone who cares deeply about design systems is making the case for a dedicated design system. Folks in leadership will often ask you to prove the value of it. Why should we care …
The post Yes, Design Systems Do Improve Developer Efficiency and Design...
Collective #679
16.9.2021
Doodle Ipsum * W3C Design System * WebGL-Memory * Grainy Gradients * Bonsai
The post Collective #679 appeared first on Codrops
Using Your Own Design System with KendoReact Components
30.10.2020
Maybe you’ve already heard of (or even worked with!) KendoReact. It’s popped up in some of my day-to-day conversations, especially those about working with design systems and React. You could think of it as a component library like Bootstrap or Material Design, except the components...
Form design
15.9.2020
A very digestable guide from Geri Reid on building forms. Not the code, but the design and UX principles that should guide the code.
Working on a design system for a bank has taught [me] a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist...
Setting up and Customizing the Ant Design System in a Nuxt App
9.9.2020
I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has recently gained some some of my affection because it’s easy to use, has extensible defaults, and features a delicate design.
Nuxt and...
Collective #618
13.8.2020
Elder.js * Serverless: I'm a big kid now * The Endless Doomscroller * Building a Design System Library
The post Collective #618 appeared first on Codrops
CUBE CSS
11.6.2020
A CSS methodology from Andy Bell:
The most important part of this methodology is the language itself: CSS. It’s key to note its existence in the name because some alternative approaches, such as BEM—which I have enjoyed for many years—can veer very far away from Cascading Style Sheets. I love CSS...
The Best Design System Tool is Slack
4.6.2020
There’s a series questions I have struggled with for as long as I can remember. The questions have to do with how design systems work: Where should we document things? Do we make a separate app? Do we use a third-party tool to document our components? How should that tie into Figma or Sketch?...
How to build a bad design system
31.3.2020
I didn’t realize this until it was far too late, but one of the biggest mistakes that’s made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions.
Is there a conversation about the color of your buttons that’s taking...
What to Use Instead of Number Inputs
6.3.2020
You might reach for <input type="number> when you're, you know, trying to collect a number in a form. But it's got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn't one (like how a credit card number has spaces), because it's really just a string...
Collective #582
20.1.2020
City Roads * Design System Checklist * The Apple Archive * The JAMstack in 2020
Collective #582 was written by Pedro Botelho and published on Codrops
Making Room for Variation
30.12.2019
Say you have a design system and you're having a moment where it doesn't have what you need. You need to diverge and create something new. Yesenia Perez-Cruz categorizes these moments from essentially ooops to niiice:
There are three kinds of deviations that come up in...
Two Lessons I Learned From Making React Components
19.12.2019
Here’s a couple of lessons I’ve learned about how not to build React components. These are things I've come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot...
Auto Layout lands in Figma
5.12.2019
Here’s a fresh update to my favorite design tool that is thoroughly exciting: Auto layout! That means we can make frames that resize based on the size of the content within it. That's particularly useful for buttons in a design system where you want to drop a button on the page and then keep...
Smarter Design Systems Tools
22.11.2019
What has me really excited about building websites is largely around design systems and the design tools we use to build them. Though, design systems are certainly not limited to websites.
Closing the Gap
In the ever-so-hot-right-now world of design systems, one of the most common phrases people...
Collective #557
14.10.2019
Design System Playground * roughViz * GitSheet * How to design delightful dark themes * Able
Collective #557 was written by Pedro Botelho and published on Codrops
Getting design system customization just right
29.7.2019
I had a little rant in me a few months ago about design systems: "Who Are Design Systems For?" My main point was that there are so many public and open source ones out there that choosing one can feel like choosing new furniture for your house. You just measure up what you need and what you like...