CSS Columns

I frequently use CSS multi-column layout (i.e. column-count: 3) for basic list items limited to words or phrases (like my search page tags list), but I’ve always struggled to make the property work with more complex content. And after all, complex pages are where CSS columns would come in most handy—reflowing content in and out of columns across viewport widths to suit:

CSS Columns Breaking

The first hurdle has always been avoiding module content breaking across columns awkwardly:

CSS Columns Breaking

In the Codepen below, I added break-inside: avoid; to remedy this, but support is partial. In some browsers, additional whitespace may appear at the top of columns, and in others, content is dispersed unevenly across columns.

See the Pen CSS Columns For Layout V1 by Trent Walton (@TrentWalton) on CodePen.

As a next step, I added display: inline-block and removed all the break-inside: avoid; funny business. This switch was way desirable, but days later I noticed loads of extra whitespace below the columns (in Chrome at least). The amount depended on the arrangement of the modules and size of the content within, but it was a significant problem.

See the Pen CSS Columns For Layout V2 by Trent Walton (@TrentWalton) on CodePen.

To remedy the whitespace problem, I came up with my current-final-answer (below). I added a <div> to each module, setting the outer one to display: block and leaving the inner one display: inline-block. The extra whitespace is gone, and the technique seems to be resilient to various types & sizes of content.

See the Pen CSS Columns For Layout V3 by Trent Walton (@TrentWalton) on CodePen.

I’m sure this technique will evolve & improve over time, but for now, I find it quite useful. Ta-da!

Glitchskier

I recently discovered a new action game called Glitchskier by Shelly Alon. In case you aren’t aware, flying a triforce(ish) starship through what reminds me of the Stranger Things intro (music and all) blowing up Tron-like villains is right up my alley. I love every detail.

Glitchskier

Glitchskier

Viewport Padding

I was inspecting Ethan’s site the other day (as totally normal and well-adjusted people do) and realized he was using one of my favorite tricks where viewport units were combined with em units via calc() for vertical spacing.

ethanmarcotte.com

Viewport units can help you scale margin and padding across viewport sizes, but they can also grow or shrink beyond what’s intended. To compensate for potential awkwardness, Ethan combined vh with em via calc().

I created a Codepen to show a similar case with vw units.

Codepen Demo

Note that .viewport-only has 8vw for padding, and tends to grow and shrink too much. .viewport-calc has calc(4vw + 2em) for padding, which scales without overdoing it at extreme widths.

.viewport-only{
  padding: 8vw 0;
}
vs
.viewport-calc{
  padding: calc(4vw + 2em) 0;
}

In my mind, it’s like saying, “here’s 2em of padding as a baseline with a few 4vw units sprinkled over for scalability.” I use this all the time. Happy padding!

Update: 02/07/17
Thanks, Jeremy, for pointing out a potential android pitfall.

Alamo Drafthouse Pre-roll

I love Alamo Drafthouse—It’s a big part of what makes Austin home for me, and part of my monthly (sometimes weekly) routine. The recently-updated announcement videos they run during pre-roll are fantastic. They’re extremely well done without coming across as too slick or corporate-y. I could be wrong, but I think I spy some Archive Type in there.

Alamo Drafthouse Pre-roll

Day of the Tentacle

Over the weekend I rediscovered Day of the Tentacle, triggering the biggest nostalgia jolt I’ve experienced in quite some time. I vividly remember playing the game on one of my first PCs in 1993. The illustration style, no-lose style of gameplay, and voice acting is all spectacular. The newly remastered edition is a worthy update.

I played through on iPhone, but the game is available on a lot of platforms.

Day of the Tentacle Day of the Tentacle Day of the Tentacle

Hello, Jekyll

I’ve logged quite a lot of hours battling databases, plugins, and a GUI editor to write (and occasionally design) blog posts. Wordpress has served me well, but to simplify the process I’ve ported my blog to Jekyll. It’s great to be static! Writing already feels more casual and enjoyable.

Over the past few years, Paravel has used Jekyll to build the latest version of our site, Dave’s blog, Reagan’s blog, TMFO, and the DayTrip Blog. We even use it regularly for prototyping with clients.

The familiarity I’d gained on those projects made the process relatively easy. Here’s a rough outline of how it went:

Export & Archive
  1. Via Tomomi Imura’s advice, I exported comments to Disqus.
  2. Content exports via Ben Balter’s Jekyll Exporter Wordpress plugin and the WP Static HTML Output plugin
  3. For good measure, I also FTP’d down all my files and backed up the server before launching the Jekyll version.
Measured Current Site Performance
Jekyll Setup
  1. Followed the quick start instructions
  2. Dropped all Wordpress jekyll-export/_posts files into the Jekyll _posts folder
  3. Created unique layouts for articles and notes
  4. Confirmed article art direction CSS made it to front matter
Added Features
Tidy Up
  • Added static pages and a 404
  • Fixed broken paths thanks to find & replace in project

At this point, I decided to leave off comments for now. I’m still on the fence, but am going to experiment with correspondence via social channels and (hopefully) other people’s blogs :)

There are heaps more to optimize and improve, but it’s been an enjoyable experience thus far. The writing process feels great again, and I have a new place to play (even though it’s the same old blog)!

Let me know if you spot any glaring errors or omissions. In the meantime, I’ll just leave this list of ideas for future improvements here for reference:

  • Improve performance
  • Clean up (reduce) tags
  • Research CDNs & caching
  • Think about sans body type
  • Experiment with CSS Grid on my homepage
  • Tie in other articles with more TLC than tags
  • Build a new layout for non-legacy articles so I can create unique article designs easier

David Lynch on Ideas

The thing is to be true to the idea. A lot of artists think that suffering is necessary, but in reality, any kind of suffering cramps the flow of creativity. […] Happiness in the doing is so important. And I always say it’s our life going by.

via Devour

The Marvel Symphonic Universe

First off, every Every Frame a Painting video is worth your time, but the latest one about the state of cinematic music composition is extra fascinating. I found lots of parallels for any industry that can be tempted to (over)imitate itself—especially when the process includes lots of people and phases.

Creativity and uniqueness take some risk.

Impossible Foods’ Meat-Free Burger

I love burgers, but wasn’t fully-aware of beef’s tax on our climate/environment. As Pat O. Brown, CEO and founder of Impossible Foods, states:

If you eat a quarter-pound impossible burger instead of a quarter-pound burger made from a cow, you save greenhouse gas emissions that are equivalent to driving 18 miles my yourself in a typical American car, you save water thats equivalent to taking a 10 minute shower, and free up a land area of 75 sqft.

I can’t wait to try one of these.

Presentable Episode 7

I’ve been thoroughly enjoying Jeff Veen’s new podcast, Presentable. In the latest episode (#7) with Stanley Wood the two discuss how style guides, process, and org structure fit together. One bit in particular that stood out to me was where (at the 32 minute mark) Jeff asked about the Spotify team structure and how Guilds come into play. It seems to break down like this:

spotify-structure-community
via labs.spotify.com
  • Squads are small interdisciplinary teams working on a specific feature
  • Tribes are organized around a subject like performance or perhaps a business goal
  • Chapters & Guilds cut across the preceding two groups to enhance communication and standardization around things like design, front-end, or even a platform like iOS

While this may not be totally unique to Spotify, hearing phrases like “cut across” paint a clear picture in my mind of how groups like these need to be able to move laterally across the entire organization as well as how these groups can coexist within the context of business goals and road maps. Great stuff—the entire episode is worth a listen.

Sharp Sans

I’m adding Sharp Sans to my list of fonts I hope to find an opportunity to work with soon.

sharp-sans2

A description from Village Type & Design:

Sharp Sans injects some much needed humanism into the Futura model. With its sheered terminals and true italics, Sharp Sans combines the appealing typographic compensation of the grotesque, with the plump circular bowls of the geometric. The result is a typeface suited for both text and display use that breaths life into the genre of the geometric sans.

sharp-sans-site-weights
The new Sharp Type Foundry site’s hover & pan weight switcher is lots of fun
sharp-sans
17373674735_e9fbc7ceab_o

Stranger Things

Let’s just take a minute to bask in how cool everything associated with Stranger Things is. The synth tones of the opening credits and the appropriately evocative use of ITC Benguiat and ITC Avant Garde Gothic had me hooked. I love it like I love the Halt and Catch Fire intro.

stranger-things-title
title-itc-avant-garde-gothic

The texture on the lighting and the way those G’s slide into the N’s… There’s so much to love.

And then I saw the Struzan-esque poster art done by Kyle Lambert. It’s right up my alley (having recently commissioned a similar work from Paul Shipper for The Many Faces Of), and it drives home the Stephen Spielberg & Stephen King inspiration around the show itself.

stranger-things-poster
stranger-things-bikes
stranger-things-highschool
stranger-things-corridor
stranger-things-kids

I don’t know the television & film business, but I can’t imagine a world where this show exists without the internet, and thus, the Netflix create-your-own-content approach. More of this, please!

Update 7/20/16

Fonts In Use just published an excellent writeup with more detail about the show. Miguel Sanz also tracked down the creators of the main titles, Imaginary Forces.