cjcenizal/flexbox-patterns

Patterns for using flexbox CSS to build awesome UI components.

flexbox-patterns's Issues

defaults of flex-grow and flex-shrink are wrong

• flex-grow: 1 indicates how the element expands as its container gets larger. By default, the value is 1. We’ll set it to 1 so that the card will expand as much as possible to fill the container.
• flex-shrink: 1 controls how the element shrinks as its container gets smaller. By default, this value is 0. When we set it to 1, we tell the card to shrink as much as it has to, to fit into its container.

http://www.flexboxpatterns.com/card-group

In correct:

• flex-grow: 0 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
• flex-shrink: 1 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

The following source code comment is correct.

Simplify site-header pattern

Link: http://www.flexboxpatterns.com/site-header.

Proposal

<div class="siteHeader">
  <div class="siteHeader__item siteHeaderLogo">
    <div class="fa fa-inbox"></div>
  </div>
  <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
  <div class="siteHeader__item siteHeaderButton">Sent</div>
  <div class="siteHeader__item siteHeaderButton">Trash</div>
  <div class="siteHeader__item siteHeaderButton">Settings</div>
</div>

CSS

.siteHeader {
  display: flex;
  padding: 10px;
  background-color: #56727C;
}

    /* ... */
    .siteHeader__item:last-child {
      margin-left: auto;
    }

No need for sub-sections anymore. :)

Cheers.

Consider a11y in code snippets

A lot of people are likely to just copy and paste your HTML code snippets into their project. Because of this, I would recommend considering accessibility in the HTML (roles, meaningful markup, and so on).

[Browser Compat] Card group doesn't look quite right in IE11

While everyone should test their sites in the browsers they care about, especially for a new feature like Flexbox, it's probably worth adding a note that this doesn't work in IE 11.

I didn't try to reduce the issue or work around it to see what the root cause is.