Chris Coyier - CSS-Tricks

Pattern Library Workflow

# August 18, 2017 By Chris Coyier

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 to triage.

Saving SVG with Space Around It from Illustrator

# August 18, 2017 By Chris Coyier

There are a number of ways to export graphics from Illustrator. Some of them aren't particulary useful (Save As), some of them don't support SVG (Export for Web), some of them produce good output but have limited options that don't allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens area.

illustrator SVG

Visual Email Builder Apps

# August 17, 2017 By Chris Coyier

I bet y'all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right within the email. It's nice. It's a lot nicer than editing the quagmire of HTML underneath, anyway!

But not everybody needs all the rest of the features that those apps bring, like list management and the actual sending of the email. Perhaps you have an app that already handles that kind of thing. You just need to design some emails, get the final HTML, and use it in your own app.

When I was looking around at email tooling, I was surprised there were a good number of apps that help just with the visual email building. Very cool.

(more…)

Oxygen – The WordPress Visual Site Builder for Real Designers?

# August 17, 2017 Sponsored

WordPress page builders are generally shunned by those who know how to code. They are generally bloated and slow. And you are offered very limited customization options. But what if there was a visual site builder meant for advanced, professional website designers?

It turns out there is! It's called Oxygen, and it's quickly becoming the tool of choice for WordPress web designers.

(more…)

A Poll About Pattern Libraries and Hiring

# August 15, 2017 By Chris Coyier

I was asked (by this fella on Twitter) a question about design patterns. It has an interesting twist though, related to hiring, which I hope makes for a good poll.

(more…)

(An Interview About) imgix Page Weight

# August 15, 2017 By Chris Coyier

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting.

We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to me to have tools for specifically analyzing and demonstrating how we could have done better with images specifically. That's what this Page Weight tool is.

Clearly this is a marketing tool for them. You put in a URL, and it tells you how you could have done better, and specifically how imgix can help do that. I'm generally a fan of that. Tools with businesses behind them have the resources and motivation to stick around and get better. But as ever, something to be aware of.

I asked Brit Morgan some questions about it.

(more…)

Long Distance

# August 14, 2017 By Chris Coyier

A podcast (turns out to be a 2-parter) from Reply All in which Alex Goldman gets a scam phone call about his iCloud account being compromised. He goes pretty far into investigating it, speaking regularly with the people who run these scams.

Especially resonant for me, as someone who also spoke directly with a hacker who's goal was doing me harm. I've long struggled with thinking rationally about stuff like this.

Crafting Webfont Fallbacks

# August 13, 2017 By Chris Coyier

There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we'll call it FOCST (Flash of Carefully Styled Text).

web fonts

How do you start a sentence with “npm”?

# August 12, 2017 By Chris Coyier

This npm. Asking this question was a fun little journey.

(more…)

CSS Utility Classes and “Separation of Concerns”

# August 11, 2017 By Chris Coyier

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up.

Here's a particularly interesting bit where he specifically calls out "separation of concerns" as being a straw man:

You either have separation of concerns (good!), or you don't (bad!).This is not the right way to think about HTML and CSS.

Instead, think about dependency direction. There are two ways you can write HTML and CSS:

CSS that depends on HTML ... In this model, your HTML is restyleable, but your CSS is not reusable.

HTML that depends on CSS ... In this model, your CSS is reusable, but your HTML is not restyleable.

It occurs to me that there are fairly large contingents heading in both directions with styling. One direction is headed toward tightly coupled CSS (i.e. `.vue` files with scoped styles living right next to the template HTML). The other direction is styling classes that are completely de-coupled from HTML (i.e. atomic CSS).

What seems to be least popular is loosely-coupled global styles.