replace center with more general one

[revyh]

Sometimes it's need to center block only vertically or horizontally. Maybe it's worth to replace center with more general align( [vertical], [horizontal] ). vertical argument can be one of top, center, bottom and horizontal argument can be one of left, center, right:

/* before */
.centered {
  @util align(center, center);
}

.aligned {
  @util align(bottom, right);
}

/* after */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.aligned {
  position: absolute;
  bottom: 0;
  right: 0;
}

Also It may be useful to have fill values for both arguments:

/* before */
.fill-horizontally {
  @util align(center, fill);
}

/* after */
.fill-horizontally {
  position: absolute;
  top: 50%;
  left: 0;
  rigth: 0;
  transform: translateY(-50%);
}

All this behaviour can be implemented with flexbox method too

[ismamz]

Great idea! Could you detail for all the cases what would be the resulting code?

[revyh]

yeah, sure. It's tedious to list resulting code for all 16 possible combinations of [horizontal] and [vertical]. So, I'll write results for [horizontal] and [vertical] in separate. I think it would be enough to clarify the idea.

/* [horizontal] == left */
position: absolute;
left: 0;

/* [horizontal] == center */
position: absolute;
left: 50%;
transform: translateX(-50%);

/* [horizontal] == right */
position: absolute;
right: 0;

/* [horizontal] == fill */
position: absolute;
left: 0;
right: 0;

/* [vertical] == top */
position: absolute;
top: 0;

/* [vertical] == center */
position: absolute;
top: 50%;
transform: translateY(-50%);

/* [vertical] == bottom */
position: absolute;
bottom: 0;

/* [vertical] == fill */
position: absolute;
top: 0;
bottom: 0;

Also, I'd like to add outer-* values:

/* [horizontal] == outer-left */
position: absolute;
right: 100%;

/* [horizontal] == outer-right */
position: absolute;
left: 100%;

/* [vertical] == outer-top */
position: absolute;
bottom: 100%;

/* [vertical] == outer-bottom */
position: absolute;
top: 100%;

The only problem with outer-* values is that they can't be implemented with flexbox (or at least I don't know how to do this).

To be honest, I don't think that centerMethod option was a good idea. Because flexbox operates on element's children and position: absolute operates on element itself. They aren't interchangeable. It doesn't really matter when you write code, because there is no big difference where you put @util center: in a child or in a parent. But if you will decide to move from "transition" method to "flexbox" you will find that you can't just change centerMethod: transform to centerMethod: flexbox and expect that your code will use flexbox now. You'll should manually move all @util center from child to parent. So, I don't see any advantages of centerMethod in front of two explicit and separated utils (align for "transform" method and align-children for "flexbox" method). Also, if you agree to add outer-* values to align then align and align-children will have different capabilities and it will be nice to have access to both of them in code.