CSS

CSS-only solution for Flash of Invisible Text using font-display

My recently article on resolving the Flash of Invisible Text in Drupal left me wanting. It was never fully resolved since I was using Google Web Fonts, and they haven’t specified the CSS font-display property in their stylesheets. Using a pure CSS solution will have much better performance than Javascript, so I decided to do deeper investigation to see if this is solvable without self-hosting the webfonts.

There’s three things I want to test:

Drupal Performance: Eliminating the Render-Blocking resources

One of the biggest factors in page performance is render-blocking assets. These are assets that prevent the page from being rendered while they load. Typically this is Javascript and CSS in the head of the document. When you're using a CMS like Drupal, you often don't have much control over how these are structured since the CMS does its own management for combining various files into cached versions depending on what components or modules exist on a given page.

Drupal Performance: Eliminating the Flash of Invisible Text

Today there are a plethora of fonts available for use on the web. All major browsers support web font technologies, and there are many foundaries and freely licensed fonts available for making a site look just so. We no longer have to deal with the extremely limiting set of baseline fonts installed on visitors' computers. However, the rise of webfonts also means that there is a performance impact to using them. When the browser loads the site, it also has to load the fonts, just like any other static asset.

Atomic Design Patterns, Responsive Design, and Rapid Prototypes

Last week while doing some research I stumbled across a new project from Brad Frost, Pattern Lab. This is a quick and dirty simple framework for facilitating Atomic Design when prototyping out web designs. I was floored as this matched exactly what I was in the middle of needing. I'm currently in the middle of major redesign for an insanely huge site, and one of our deliverables is a Live Style Guide as well as copies of our responsive design prototypes.