[Standards]: CSS Flexbox

[joshbruce]

Moved from other GitHub location

Justin: Can we use it?

It is not supported in IE9 and lower.

It does allow us to write cleaner code. The first scenario I've encountered where I would like to use it, is in the header. I would like to vertically center the items and have them flow from left to right.

Josh: Believe the USWDS has a polyfill to allow for that...can you double check?

Justin: I don't see where the polyfill is, but I do see the flex box being used. So, I beleive we can use this.

.usa-layout-docs {
  display: flex;
  flex-direction: column;

Josh: @jbabbs - I would say, if the USWDS uses it, then we should be okay for now. Having said that, if our user acceptance tests say our solution does not work IE9 we might have to revisit.

Might want to put on back burner research potentials to prepare for the unlikely event. I won't believe our current header designs have anything centered as of yet. Is that still true?

[jenbesergsa]

Browser Support

[jbabbs]

We have an image and a search bar that is centered vertically in our condensed header.

[joshbruce]

I know this is going to sound counter to what I said in the moment; so, bear with me.

Given that the only thing currently in the condensed header is the logo...can't we just text-align: center?

<nav class="sam-header-nav">
    <ul>
        <li><a class="sam-home"><span class="usa-sr-only">SAM.gov home page</span></li>
    </ul>
</nav>

// css
.sam-header-nav {
  li {
    text-align: center;
  }
  .sam-home {
    display: inline-block;
    height: x
    width: x
    background-image: ...
    background-position: center center;
    background-size: x auto;
  }
}

No need to add a new technology because we can get the desire layout using straight HTML + CSS. We're going to have to rearrange the header elements again anyway - when we actually add something other than just the logo.

Tagging @jagannathch

[jagannathch]

@joshbruce @jbabbs I am still in favor of keeping the img left align just for consistency...can we do a text align: center while do a float: left on the img?

[joshbruce]

@jagannathch - Not sure I'm understanding, to be honest.

Which one are we shooting for:

1. |                       [logo]                       |

2. |[logo]                                              |

3. |                                               [logo]|

Re the condensed header mentioned by @jbabbs - which one are we shooting for:

1. |                     [logo][search bar]                     |

2. |[logo][search bar]                                          |

3. |                                          [logo][search bar]|

Personally, I though the wireframes showed: 1 and 2, respectively.

[jagannathch]

In the condensed header, shooting for 2. In the expanded header (base page), shooting for 1 (but this could change depending on what the logo actually ends up being)

[joshbruce]

@jagannathch, @jenbesergsa, and @jbabbs - Then it seems the requirement to use FlexBox, in this instance, is not needed, yeah?

[jagannathch]

dont think so.