Post pobrano z: The Media Object, A Bunch of Ways

The Media Object pattern is: image thingy on the left, heading and text on the right.

That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can be done many ways.

Let’s take a crack at a lot of those ways. In these demos, I’m not particularly focusing on naming conventions, semantics, or browser support. Just possibilities.

With Floats

Certainly, we could float the image to the left!

See the Pen Media Block #1 by Chris Coyier (@chriscoyier) on CodePen.

But just floating means you get wrapping. Wrapping might be perfectly fine, or you might not want it.

To fix that, we could make sure all the text is wrapped in an element, then make sure that element has padding-left equal to the width of the image and any white space between them.

See the Pen Media Block #2 by Chris Coyier (@chriscoyier) on CodePen.

Or, you could float both sides:

See the Pen Media Block #3 by Chris Coyier (@chriscoyier) on CodePen.

With Flexbox

Flexbox makes quick work of it!

See the Pen Media Block #4 by Chris Coyier (@chriscoyier) on CodePen.

Note that we’re allowing the <img> to become a flex item. We used align-items: flex-start; to make sure it doesn’t stretch out to the same height as the text.

With Tables

The media object could be a two-cell row of a table:

See the Pen Media Block #5 by Chris Coyier (@chriscoyier) on CodePen.

If you wanted to keep non-<table> markup, it’s still possible to make it behave like a table via display: table;:

See the Pen Media Block #6 by Chris Coyier (@chriscoyier) on CodePen.

With Grid

Grid layout allows us to define a set of columns. It’s quite easy to set up the first column to the fixed width we want, and the second column to take up the rest of the space.

See the Pen Media Block #7 by Chris Coyier (@chriscoyier) on CodePen.

Like in flexbox, we can avoid the image stretching itself out by aligning it to the top with align-self: start;.

I’m sure y’all can find about a dozen more ways to do it!

The Media Object, A Bunch of Ways is a post from CSS-Tricks

Post pobrano z: Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl:

At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.

Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It’s a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I don’t have more detail handy).

Direct Link to Article — Permalink

Align SVG Icons to Text and Say Goodbye to Font Icons is a post from CSS-Tricks