desideratum

Mar 14

"Game Over" by Kordian Lewandowski

"Game Over" by Kordian Lewandowski

Oct 09

I love this poster. Universally applicable.

(via swiss-miss)

I love this poster. Universally applicable.

(via swiss-miss)

Jul 25

Death to the Bottom Line

Some creative nth-child()-ing. In a table-esque inline-block list, it will remove the extra line that results from needing both container and list item borders.

Why might this be useful?

For this example, I’ll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:

Selectors to get only the bottom row elements in a 3-column, table-esque inline block list

For this example, I’ll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:

Selecting the bottom items in a table-esque inline-block list

There’s a pattern/strategy here. Let x be the total number of columns. All we have to do is figure out how to select each list item when it’s on the bottom row, and deselect it when it’s not. Let’s try this with four columns:

  1. Select the last item, regardless of its position.

    li:last-child

  2. Select the next to last child, except when it’s in the rightmost column (where it’s not touching the bottom).

    li:nth-last-child(2):not(:nth-child(xn))

  3. Select the third to last child, except when it’s in the two rightmost columns.

    li:nth-last-child(3):not(:nth-child(xn)):not(:nth-child(xn-1))

  4. Select the fourth to last child, except when it’s in any column but the leftmost one.

    li:nth-last-child(4):not(:nth-child(xn)):not(:nth-child(xn-1)):not(:nth-child(xn-2))

For additional columns, add another selector incrementing the nth-last-child() parameter, and add another :not(:nth-child(xn-?)), incrementing the ?.

Questions? Find me on Twitter and ask away! Or just view some working code on Dabblet.

Jun 20

[video]

Jun 04

[video]

[video]

Mar 01

DirecTV WTF

Feb 07

Social Media Explained… with donuts

Social Media Explained… with donuts