Posts Tagged ‘css’

  1. 15 Oct, 2017

    Rebuilding slack.com

    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. […]

  2. 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 […]

  3. 31 Jul, 2017

    Pattern Variations

    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, […]

  4. 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.

  5. 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. […]

  6. 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, […]

  7. 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 […]

  8. 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 […]

  9. 14 Mar, 2016

    Trump.css

    Trump.css pic.twitter.com/8Ezki3F7fg — Brad Frost (@brad_frost) March 14, 2016

  10. 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 […]

  11. 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 […]

  12. 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 […]

  13. 31 Mar, 2015

    Flexbox Space Jam

    So I recreated the Space Jam website using flexbox. Because Eric Meyer told me to.

  14. 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.

  15. 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, […]

  16. 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.