Simplify site-header pattern

[KittyGiraudel]

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.

[KittyGiraudel]

Note that exact same thing can be applied on footer and sidebar. No need for sub-sections when you can use auto margin.

[cjcenizal]

@hugogiraudel Thanks a lot man! Sorry for addressing this so late... I'm getting my kitchen remodeled, I'm transitioning between jobs, and I went on vacation. 😄

You make a really good point. Of course, this would mean these components would no longer be good examples of using flexbox! So I updated the examples to illustrate how I think flexbox can be applied in a useful way. If you have a second to check it out, I'd like to know what you think.

These section elements are useful because now additional buttons/links can be added to them without needing to change any styles. If we were to use margin-left/top: auto, we'd have to do a little extra work to make sure they'd still be spaced apart correctly, so I think flexbox is better here.

BTW, thanks for your amazing work on sass-guidelin.es. It's been a huge influence on me for the past few years and I always recommend that people refer to it.