Loops in CSS Preprocessors

If you've ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust.

Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code.

We'll take a look at what loops can do, and how to use them in the major CSS preprocessors: Sass, Less, and Stylus. Each language provides a unique syntax, but they all get the job done. There's more than one way to loop a cat.


We Asked 8,500 Internet Commenters Why They Do What They Do

Read Christie Aschwanden's first paragraph. If you've written anything that elicits comments, I'm sure you can relate.

There is plenty of data here to digest, and also further speculation:

I had a hypothesis: Maybe this commenting-without-reading phenomenon represents a variation of the backfire effect, in which a person who receives evidence that their belief is erroneous actually becomes more strongly convinced of the viewpoint they already held. In this case, the reader sees a headline that catches their interest and reminds them of something that they already know, which triggers them to think about their pre-existing knowledge or belief about the subject and then to blast it out to the world. The article they’re reading doesn’t inform them, it just provides an opportunity for them to reinforce (and broadcast) what they already know.

We’re All Frauds

Gina Trapani:

On a daily basis I’m struck by the fact that no number of degrees—or titles, or companies, or years experience, or apps shipped, or books published, or Twitter followers—matter when you’re facing down a situation that’s completely new. You think it through, you consult your trusted advisors, you do your best, and maybe you write down what you learned. That’s just about all you can do. Because you don’t know what you’re doing, and neither does anyone else.

The thing I find funny about Imposter Syndrome is that the symptom is you feeling inadequate, but knowing about the syndrome is a relief.

Input Masking

I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I'd just line up a few demos for really easy reference.


Experimenting with Color Fonts

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about his experience building a color font and described the problem that they intend to solve:

Typography on the web is in single color: characters are either black or red, never black and red.


I totally forgot about print style sheets

Manuel Matuzovic rediscovers @media print {} styles.

The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That's fine if you intend to take a "start from scratch" approach to print styles. I generally prefer just not scoping screen styles and using a couple of print-scoped overrides (a "blacklist" instead of a "whitelist").

Manuel pointed out that you can use Chrome DevTools to emulate print media, which is pretty dang useful! Here's a quick video of that:

That screenshot of Indiegogo's site also goes to show how inline SVG (or any images, I suppose) can get a little crazy if you don't include any sizing information in the HTML. That prompted this tip:

Even if CSS does load and size those SVG's correctly, it might be helpful to have them sized approximately correct to begin with, to avoid what Sara Soueidan has dubbed 'Flash of Unstyled SVG'.

Remember that attributes like width and height are extremely easy to override in CSS. Setting them at all in CSS will override them. They aren't like inline styles.

Manuel's article is loaded with 12 other hot tips on things to include in a print stylesheet that you might not think of: preventing orphans, forcing colors to print correctly, displaying otherwise-hidden content, providing alternate content for things that won't print correctly, etc. Couple of other tips here.

We have a pretty good* newsletter.