Add items-baseline utility.

[gobijan]

I started to migrate my new product in the making to csszero. Before I was using my custom version of Tachyons and Open Props.
While doing the migration I found the items-baseline utility class quite useful I had in Tachyons.

.items-baseline { align-items: baseline }

I think it's worth adding it to utilities.
Will open a PR if you are ok with it.

[lazaronixon]

The idea behind the utility.css is that you can use those classes to format the content of your components quickly. It also works as a small, unambiguous source of the most commonly used utility classes that people can learn from. Do you have an example where I can't use center in place of baseline?

[gobijan]

This is a an example where I would use baseline:

For comparison here is the center version:

What you think? For pure user interfaces center is still sufficient probably. Your call :D

[lazaronixon]

Can you share the HTML, please? I usually fix this by removing the line height and using leading-none. I don't know if that's the case here.

[dniman]

I encountered an issue today with vertical alignment when using an inline SVG icon and text side by side.

  <img  width="36" src="welcome.svg">
  <span class="text-xl" style="line-height: 2">Welcome</span>

The original SVG size is 24. When I scale it up to 36, the line-height (or leading) doesn’t behave as expected, and the alignment between the icon and the text becomes inconsistent. I had to manually adjust the line-height to make it look right.

Is there a recommended way to handle this kind of alignment when mixing resized icons and text?

[lazaronixon]

@dniman try removing the line height from the text, especially when it's a big header.

  <img  width="36" src="welcome.svg">
  <span class="text-xl leading-none" style="line-height: 2">Welcome</span>

[lazaronixon]

@gobijan Right, you convinced me. align-items: baseline might be helpful for aligning texts of different sizes.
39ba209