ch4/ex5: Responsive Flex for UI

ch4-ex5:-Responsive-Flex-for-UI.markdown

ch4/ex5: Responsive Flex for UI

This example demonstrates using the flexbox layout module in a responsive manner to create user interface layouts. In this example, the navigation bar is no longer pinned absolutely to the container, but rather it is a non-flexing element at the two of a vertical flex box. The scrolling container, OTH, can flex based on the remaining size of the parent.

The navigation bar is also using flex box -- there are three groups within that are positioned appropriately within. If the width of the bar is too small, the bar can expand as necessary to fit the content.

The list also uses flex box -- as you resize the view, the list items will expand, but they will also group themselves into a grid layout if they can fit. Internal to each list item is also several flex boxes. This simplifies layout dramatically.

A Pen by Kerri Shotts on CodePen.

License.

index.html

<y-container>
  <y-nav class="y-navigation-bar">
    <y-widget-group>
      <y-menu-button>Menu</y-menu-button>
    </y-widget-group>
    <y-widget-group class="y-flex">
      <y-title>Logology</y-title>
    </y-widget-group>
    <y-widget-group class="y-group-align-right">
      <label>
        <y-search-button>Search</y-search-button>
        <input type="text"/>
      </label>
    </y-widget-group>
  </y-nav>
  <y-scroll-container>
    <y-list>
      <y-list-item>
        <y-list-actions>
          <div>Favorite</div>
          <div>More</div>
          <div>More</div>
          <div>More</div>
        </y-list-actions>
        <y-list-contents>
          <div>1.</div>
          <div class="y-flex">This is a long list item, but it supports text wrapping appropriately without awkward line-height issues. It will go on for as long as you like.</div>
          <y-indicator/>
        </y-list-contents>
      </y-list-item>
      <y-list-item>
        <y-list-contents>
          <div class="y-flex">Aardvark</div>
          <y-indicator/>
        </y-list-contents>
      </y-list-item>
      <y-list-item>
        <y-list-contents>
          <div class="y-flex">Aardvark</div>
          <y-indicator/>
        </y-list-contents>
      </y-list-item>
      <y-list-item>
        <y-list-contents>
          <div class="y-flex">Aardvark</div>
          <y-indicator/>
        </y-list-contents>
      </y-list-item>
    </y-list>
  </y-scroll-container>
</y-container>

style.scss

$font-stack: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
$dp2: "only screen and (-webkit-min-device-pixel-ratio: 1.01 ), only screen and (min-resolution: 1.01dppx), only screen and (min-resolution: 191dpi)";

html {
  font-size: 100%;
  * {
    box-sizing: border-box;
  }
}
body {
  margin: 0; padding: 0;
  font-family: $font-stack;
}

y-container {
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
  display: flex;
  flex-direction: column;
}

y-scroll-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

y-nav {
  position: relative;
  background: #EA1;
  color: white;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  justify-content: flex-end;
  box-shadow: 0 0 6px #8E8A81;
  padding: 0 0.5rem;
  z-index: 9;
  line-height: 3em;
}

y-title {
  font-size: 1.25rem;
  font-weight: bold;
  width: 100%;
  whitespace: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

y-widget-group {
  margin: 0 0.25em;
  position: relative;
  flex:0 0 auto;
  * {
    display: inline-block;
    vertical-align: top;
  }
  label input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    border-bottom: 1px solid white;
    padding: 0; margin: 0.5rem 0;
    height: 2rem;
    background-color: transparent;
    color: white;
    outline: 0;
    min-width: 100px;
    width: 25vw;
    transition: width 0.4s ease-in-out;
    font-size: 1rem;
    border-radius: 0;
    &:focus {
      width: 50vw;
    }
  }
}

.y-flex {
  flex: 1;
}

.y-group-align-right {
  text-align: right;
}

y-icon-button {
  display: inline-block;
  position: relative;
  padding-left: 3rem;
  margin-left: -0.5rem;
  &:before {
    position: absolute;
    left: 0;
    width: 2rem; height: 2rem;
    display: inline-block;
    padding: 0.5rem;
    content: '';
    background-color: white;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 2rem 2rem;
  }
}

y-icon {
  @extend y-icon-button;
  font-size: 0;
}

y-search-button {
  @extend y-icon;
  &:before {
    mask-image: url( https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/magnifying-glass.png);
    @media #{$dp2} {
      mask-image: url( https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/magnifying-glass@2x.png);
    }
  }  
}
y-menu-button {
  @extend y-icon;
  &:before {
    mask-image: url( https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/menu.png);
    @media #{$dp2} {
      mask-image: url( https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/menu@2x.png);
    }
  }  
}

y-list {
  display: flex; 
  flex-wrap: wrap;
  align-items: stretch;
}

y-list-item {
  display: flex;
  border-bottom: 1px solid #DEDAD1;
  border-right: 1px solid #DEDAD1;
  width: 320px;
  flex: 1 1 320px;
  position: relative;
  &:active {
    background-color: #EEEAE1;
  }
}
y-list-actions {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background-color: #CECAC1;
  * {
    margin: auto 0.5rem;
  }
}
y-list-contents {
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
  margin: auto 0;
  padding: 1rem;
  background-color: white;
  width: 100%;
  * {
    flex: 0 0 auto;
  }
}

y-indicator {
  @extend y-icon;
  width: 1rem; height: 1rem;
  margin: auto 0;
  padding: 0;
  &:before {
    padding: 0;
    top: -0.5rem;
    mask-image: url(https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/chevron-right-thick.png);
    background-color: #EA1;
    @media #{$dp2} {
      mask-image: url(https://raw.githubusercontent.com/photokandyStudios/YASMF-Next/0.5/resources/ai-export/images/chevron-right-thick@2x.png);
    }
  }
}