CSS WordPress

“The Notch” and CSS

Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. It’s not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you [...]

lite.cnn.io

This little website pulls in all the main stories from CNN and strips almost everything from the design; styles, images, fonts, ads, colors. Nada, zilch, gone. At first it looks like nothing but hypertext and it feels like an extraordinary improvement but Sam Saccone made a thread about potential improvements that the team could use to make that experience even faster such as server side rendering and replacing the React framework with something smaller, like Preact. Either way this approach [...]

Problem space

Speaking of utility libraries, Jeremy Keith responded to Adam Wathan’s article that we linked to not long ago. Jeremey is with him through the first four “phases”, but can’t come along for phase 5, the one about going all-in on utility libraries:At this point there is no benefit to even having an external stylesheet. You may as well use inline styles. Ah, but Adam has anticipated this and counters with this difference between inline styles and having utility [...]

Managing CSS & JS in an HTTP/2 World

Trevor Davis on how we’ll link up CSS when we go all-in on HTTP/2:This is the opposite of what we have done as best practice for years now. But in order to take advantage of multiplexing, it’s best to break up your CSS into smaller files so that only the necessary CSS is loaded on each page. An example page markup would look something like this:<link href="stylesheets/modules/text-block/index.css" rel="stylesheet"> <div class="text-block"> ... </div> <link href="stylesheets/modules/two-column-block/index.css" rel="stylesheet"> <div [...]

Pattern Library Workflow

Jon Gunnison documents some things that have made pattern libraries successful at Allstate. Tidbits I found interesting:There are specific jobs (part of what he calls “governance”) for maintaining the library. I love that they are called librarians. A “designer librarian” and a “UI dev librarian”. Acknowledgment that there are “snowflakes”, or single instances that don’t fit into a pattern (at least right now). The pattern library is fed by information that comes in from lots of different places. Hence, requiring librarians [...]

How do you start a sentence with “npm”?

This npm. Asking this question was a fun little journey.Right on the npm website, the very first sentence starts with “npm”, and they do not capitalize it.That’s a pretty good precedent for not capitalizing it. It certainly looks awkward though, which is why I asked the question to begin with. It doesn’t feel right to me to start a sentence that way, and I’m sure other some other people would look at it and see a mistake. Their own [...]

How We Solve CSS Versioning Conflicts Here at New Relic

At first the title made me think of Git conflicts, but that’s not what this is about. It’s about namespacing selectors for components. Ultimately, they decided to use a Webpack loader (not open source, it doesn’t appear) to prefix every single class with a hashed string representing the version. I guess that must happen in both the HTML and CSS so they match. Lots of folks landing on style-scoping in one way or another to solve their problems. It makes [...]

What is Timeless Web Design?

Let’s say you took on a client, and they wanted something very specific from you. They wanted a website that without any changes at all, would still look good in 10 years. Turns out, when you pose this question to a bunch of web designers and developers, the responses are hugely variant!The Bring It On Crowd There are certain folks who see this as an intreguing challenge and would relish the opportunity.Accept. With glee. — Jeremy Keith (@adactio) July 27, 2017Accept the [...]

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you.Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: 1 and grid-column-end: [...]

Did CSS get more complicated since the late nineties?

Hidde de Vries gathers some of the early thinking about CSS:There is quite a bit of information on the web about how CSS was designed. Keeping it simple was a core principle. It continued to be — from the early days and the first implementations in the late nineties until current developments now.The four main design principles listed are fascinating:Authors can specify as much or little as they want It is not a programming language by design They are agnostic as [...]