Skip to main content

Quick Medium-Like Card Styling For The Blog

3 min read

As much as I lament the idea of Medium becoming the sole publishing space for the web, I am also unapologetic in how much I love the look and feel of it. And it's no secret that I've tried to mimick the style on my own self-hosted blog to get the best of both worlds; the clean, readable, mobile first astethic of Medium with the portability of my own site. While the blog spent six months on the Jekyll platform and was hosted on Github, I started to really miss the ease of the Wordpress editor (which is, smartly, continuing to be improved on with the release of WP 4.5 yesterday).

As I was surfing Medium today, I noticed the subtleness of their card style:

For now, let's ignore the "Write here..." front-end editor which I ALSO love but warrants a different post. Notice that Medium has a very light gray background color (fafafa). In fact, their CSS has it coded as "backgroundGrayLightest." Then for the card box they use white with a very subtle dropshadow to make it pop out. What's nice about this styling is it's very transferrable. Most objects exist in some "card" form. It might not be a perfect shaped, but a webpage (usually) the sum of rectangles. This is good news because that means you can mimick this look with nearly any other, so I thought, "Why not?" and gave it a go on adamcroom.com.

Looking again at Medium's CSS, I was able to pull this styling on the card:

 

background: ;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.09);
border-radius: 3px

This is all very standard CSS and very compatible. So that's good news. The next thing I did was to identify what box I want to add the background and shadow. I usually do this work backwards using Google Chrome's Inspect tool. You'll notice as I jog through the code Chrome will highlight all of these hidden boxes that make up my the webpage.

 

This allows me to quickly identify the equivalent box around post summarys in my custom WP theme as .blog-simple ul .entry-header and drop in the exact same styling Medium uses to get this:

And this kind of stuff is what I love about the web. As Jon Udell recently pointed out, this feature to look at the styling has been critical in the history of the web:

The original 1996 CSS spec, for example, recommended that browsers enable users to override publisher-defined style sheets. CSS recognized that the needs of publishers and readers are in dynamic tension. Publishers decide how they want readers to see their pages, but readers can decide differently.

As a reader, I can manipulate Medium's styling. By being able to look at it, I can learn from it or even change it within the browser if I choose.

This is simple stuff and I've been doing this kind of tossed together poor man's way of coding for a long time, but I never grow tired of it.The beauty and simplicity of the web brings out the primal in me.