CSS Transitions & Whimsy

In my constant effort to push my skills, I’ve been fooling around with CSS transitions and animations with the idea that some dull micro-interactions can become a tiny bit more enjoyable (or a tiny bit less excruciating, depending) with a little bit of motion and maybe some whimsy.

The button below is one result, experimenting with timing the transitions of an element’s properties differently. It’s nothing fancy — you get a normal hover effect when you roll your cursor over the button, then a “secret” message when you roll off.

Dumb, I’ll admit, but the potential for relieving some dullness is real.

If for some reason you want to see the source code, its available and editable on CodePen.

Posted in CSS

Still-fishing the Specs

Considering the pleasures of CSS Specifications as casual reading

What the hell is this supposed to do?

[class^="some-value"] {
  padding: 3rem 2rem 0;

That construction, [attribute^="value"], is one of a set of “attribute substring combinators” (an explanation at MDN) that allow you to use something like a regular expression (it’s not actually a regular expression, just resembles one) to refine a selector. You might wonder, like I did when I first encounntered it, how on earth that could ever be useful.

Here’s how.

(read more )

Posted in CSS

Gutenberg Block Styles Headstart

I plan to keep banging this drum — WordPress 5.0 is coming this year, a lot will change, and the big change will be the introduction of a new default editor codenamed “Gutenberg.”

Elsewhere I’ve (hastily) sketched out some things WordPress users should do to prepare for 5.0, here I’m addressing WordPress developers.

Blocks of content entered into a post (keep in mind that everything is a post) via Gutenberg get tagged with a block-specific CSS class, like .wp-block-button or .wp-block-cover-image. Default styles for core-blocks are loaded (for now, While we use a plugin) from somedomain.com/wp-content/plugins/gutenberg/build/core-blocks/style.css, and are loaded before the theme stylesheets. The Gutenberg developers have written well-formed CSS so a theme’s stylesheet overrides the default styles without problems like over-specified selectors or !important declarations.

Much of my work is building custom WordPress themes and the custom themes I make almost always start from Automattic’s Underscores starter-theme. Underscores provides modularized CSS using SASS. Anticipating WordPress 5.0, and for the sites (like this one) that currently use the plugin, I’ve created a collection of SASS files copying the default styles for Gutenberg core blocks, organized according to where the block sits in the editor’s selection dropdown. The files are available on Github.

A developer can incorporate this collection to a theme’s SASS folder for quick availability of the necessary selectors for styling blocks, providing a head-start in matching block styles to the theme.

In addition to the theme styles, there is also a collection of editor-styles in the GitHub project. I don’t want to blab about it here, but with careful development of editor-styles, a theme can come very close to displaying the editor contents just as they will appear on the live site, approaching the What You See Is What You Get promise that no one has ever quite delivered.

Web Fonts Get Easier

“Much easier,” I could have said. A while back I reviewed Eric Meyer’s book CSS Fonts (actually a pre-released chapter of a forthcoming book) after putting some information in it to use immediately, applying a purchased font to a critical section a client’s website.

The ease of that small task encouraged me to work on a larger scale, so a couple of days ago I made the time to install a custom web font on a personal blog. You can see it at Frogs For Snakes. The font (as I write this) is “Delicious”, a free font from the exljbris Font Foundry. I like the font but not for this particular site, which I think needs something less spartan, so it may have changed by time you read this.

Below I list the ridiculously simple steps for using custom fonts on a website. You should take some care, if you decide to do this, to ensure that the fonts you select are licensed for your use, and you should contribute to the extent you can to the foundries and to the websites that make the fonts and the tools to use them available. Everybody deserves to be paid. There’s nothing wrong with buying a font, either.
(read more )

Posted in CSS

Review: “CSS Fonts” by Eric Meyer, O’Reilly Media

Everything a developer needs to know about fonts.

In this thin, focused volume (68 pages in the print edition), the author tours the CSS fonts specification, explaining what the spec. means and describing how it’s implemented. He provides many mark-up examples demonstrating how to control the appearance of fonts on a web page, examples that cover most, maybe all, of the actual situations a working developer will encounter. Most of the book expansively explicates the @font-face rule which enables reliable (more-or-less) use of imported fonts, which is increasingly freeing us from prior typographic constraints.

The book helped me immediately, providing a detailed solution to a troubling problem a few minutes after downloading a copy. Besides being handy, it’s exhaustive treatment has made it an often-used reference after that first moment of glory.

A little distracting, without affecting the value of the content, this appears to be a single chapter from a longer book — “Chapter 1: Fonts” shows up at the front but there’s no Chapter 2 (unless the separately published CSS: Text is Chapter 2).  Also, there’s no sign of the publisher’s standard, and welcome, “Who is this book for?” preface, making me wonder a little what the game is we’re playing.

Even with that distraction and the short length, I recommend the book. Meyer knows the subject matter, theoretically and practically, has a straightforward and subtle sense of humor, and comes across as a friendly, helpful guy who happens to know more about the subject than you.

Designer/Developers interested in expanding their typographic skills will find the book useful, as will developers in collaborative relationships with designers. Designers without technical skills would probably find this hard-going, but with some effort it could provide a sound summary of what’s typographically possible these days.

My copy of this book was provided by O’Reilly Media in exchange for this review.