Add support for vertical align columns

[walkerab]

I would like to be able to vertically align my pure-u columns.

I've tried adding classes to my columns:

.u-align-end {
    vertical-align: bottom; /* for the display-inline fallback */
    align-self: end; /* for flex-box 2012 standard */
    align-self: flex-end; /* for flex-box latest standard */
}

.u-align-center {
    ...
}

But they don't work in Safari, since it is doing strange things with display: -webkit-flex on .pure-g. I could simply remove display: -webkit-flex, but then I'm worried I might be breaking compatibility elsewhere. I don't have a Windows machine to test on.

It would be great if this functionality could be built into Pure. IMO one of the key reasons to use inline-block/flex-box over floats is the ability to align columns.
#293, #190 seem related.

[ericf]

We ideally would want this to be powered by Flexbox. If your app can support IE10+, then you can use it to align thing vertically: http://caniuse.com/#search=flexbox

[walkerab]

I understand the desire to use flex-box. It is undoubtedly the way forward from the plethora CSS hacks we use for layout.

I realize now that I probably should have should have made this into two separate issues - one as a bug report for Safari, and one as a feature request.

The "bug" in Safari has been resolved. I simply needed to use another -webkit- prefix.

.u-align-end {
    vertical-align: bottom;
    -webkit-align-self: end; /* for Safari */
    align-self: end; /* 2012 standard */
    -webkit-align-self: flex-end; /* for Safari*/
    align-self: flex-end; /* latest standard */
}

As for the feature request, all I'm really wanting are helper classes on pure-u. e.g. pure-u-align-center, pure-u-align-end, etc

I can of course just make my own helper classes, but I see this being a useful feature to many others.

Does anyone else think this is a good idea? I could make a pull request.

[tilomitra]

I personally find these helper classes to be quite useful. They play well with the concept of Atomic CSS. What do you think, @ericf?

If we do decide to add more helper classes like this, they should follow some similar convention. In SMACSS-land, I think they should be called .pure-is-aligned-center or something.

[ericf]

@tilomitra I think the biggest hurdle for this is communicating the browser support story. These classes will sometimes, maybe work :-/

[walkerab]

What do you mean by "browser support story"? I'm not familiar with the term.

Do you mean we need to communicate through the docs where the classes are useful?

[jamesalley]

Because vertical align is needlessly difficult to achieve with CSS (see #293) this indeed might be good to add, whatever the classname might be. I'm keeping this issue open.

[redonkulus]

Looks like a solution for flexbox or CSS grids.