Posts Tagged ‘css’
24 Aug, 2018
Designer+Developer Workflow: Head-Down Work
Following up on the video Dan and I recorded that shows how we collaborate as designer and developer, I recorded a video of me doing a bit of head-down development work. Dan and I mention in our first video that […]
14 Aug, 2018
Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles) This was an easy buy.
16 Jul, 2018
Love how Heydon flips this all on its head.
13 Jun, 2018
Resilient, Declarative, Contextual
This is a fantastic article by Keith J. Grant that breaks down CSS’s unique qualities that makes it powerful, but also perhaps a bit confusing to people coming at it from a programmatic background. It’s a great reminder as to […]
06 May, 2018
What’s wrong with CSS-in-JS?
I have yet to dive deep into CSS-in-JS, but I’ll admit I’m skeptical. This podcast by Chris Ferdinandi lays out a lot of the reasons why I’m a bit apprehensive. Three other observations I’ve noticed as I encounter CSS-in-JS in […]
23 Apr, 2018
Grid To Flex
From Una: CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect (more info here). This site is a solution for you so you […]
16 Apr, 2018
Scroll to the Future
02 Apr, 2018
Creating Themeable Design Systems
TL;DR: Design systems + CSS Zen Garden = Awesome. Is it possible to create a single design system that powers wildly different-looking brands and experiences? The answer is yes! But why would you want to? Different audiences and contexts – […]
15 Oct, 2017
There are some fantastic insights contained in Mina Markham’s post about their rebuilding Slack.com. I especially loved her describing some of the thorny aspects of enhancing to CSS Grid layout, as well as seeing a before-and-after histogram of CSS specificity. […]
05 Sep, 2017
Building a design system for HealthCare.gov
This is a great post that lays out the nuts and bolts of the design system used to build Healthcare.gov. It details a lot of architecture and tooling, and I’m super happy to hear they took inspiration from my post […]
31 Jul, 2017
At the heart of a good design system is a set of solid, flexible components that can be arranged to create cohesive, delightful user interfaces. There’s an oft-repeated misconception that pattern-driven design and development forces teams to use a finite, […]
05 Jul, 2017
Is it really safe to start using CSS Grid Layout?
“it isn’t your fault, but it is your problem” That’s a brilliant line, and as Rachel points out in this great post on using CSS grid layout, that line can be used for a whole host of things.
03 Apr, 2017
Questioning Container Queries
I think what Paul Robert Lloyd is saying here is interesting, but I’m not sure it adds up to “we don’t need container queries.” His example shows what layouts are possible with grid and flexbox, all of which I think is awesome. […]
10 Mar, 2017
Time to Learn Grid
Dust of Firefox. Fire up Rachel Andrew‘s grid demo to see this: Install browser update. Reload to see this: Neat! Well, guess it’s time to really learn grid. I’ve been in so many of Rachel Andrew’s and Jen Simmon‘s conference talks, […]
07 Nov, 2016
CSS Architecture for Design Systems
We just created a design system for a huge organization and established a CSS architecture we’re quite pleased with. It’s one of the first times I’ve ever gotten to a project’s finish line without wishing I’d done at least a […]
22 Jul, 2016
A Code Review, Or Yet Another Reason to Love the Web
I’m in the early days of creating a design system for a big organization. Last week I posted some of my initial form markup to Codepen: See the Pen PzEZwr by Brad Frost (@bradfrost) on CodePen. And asked for feedback […]
14 Mar, 2016
Trump.css pic.twitter.com/8Ezki3F7fg — Brad Frost (@brad_frost) March 14, 2016
12 Jan, 2016
Frontend Guidelines Questions
The frontend considerations of an organization are many. We’re overwhelmed by tools, processes, workflows, styles, opinions, and ever-changing best practices. In order for frontend teams to create cohesive, consistent work, it’s important for organizations to establish some guidelines for how […]
10 Jul, 2015
Atomic Design Is For User Interfaces
I’m almost finished with Chapter 2 of Atomic Design, which defines the atomic design methodology and discusses the benefits of using atomic design to craft UI design systems. While approaching this chapter, I wanted to address the fact that atomic […]
02 Jul, 2015
Contextual Styling: UI Components, Nesting, and Implementation Detail
I absolutely love Harry’s post about creating agnostic UI components for more resilient design systems. I get this question a lot: how do I create a component that looks/behaves one way in one context, but another way in a second context? And […]
31 Mar, 2015
Flexbox Space Jam
So I recreated the Space Jam website using flexbox. Because Eric Meyer told me to.
05 Sep, 2013
Starting to Write CSS
David Walsh takes a look at Atomic Design through the lens of CSS architecture. Some interesting thoughts here.
10 Nov, 2011
Fixed Positioning in Mobile Browsers
Fixed positioned elements (typically headers or footers) are extremely common conventions for native mobile platforms, so naturally fixed elements found their way into mobile browsers. Web designers are used to fixing elements to the window using CSS’s position: fixed, however, […]
21 Apr, 2010
HTML5 Compatibility Sites
With all the rapid development of HTML5 and CSS3 going on, its difficult to keep track of how far along these hotly-anticipated new features are. Thankfully, there have been some beautiful and/or functional sites popping up to help gauge the feature’s support. Here’s a list of a few great ones.
07 Feb, 2010
Photoshop Trick for CSS Sprites: Rollover Color with Missing Fonts
As a web developer working with a variety of designers, I often find myself in situations where I need to create rollover states in Photoshop for text assets whose fonts I don’t have installed on my computer. Here’s a technique to bypass that problem entirely.