Creating a chat UI with Flexbox

The following is an entry level guide line for those interested in UI designing with Flexbox, one the new properties introduced from CSS3, now a standard method for UI applications on Web.

For the beginners, of the best reference I Flexbox I know can be found on CSS-Tricks: A complete Guide to Flexbox.

 

Approach:

In any design process we usually start from a wholistic view to the details. Counterintuitively, designing with Flexbox requires the opposite: becomes much easier and predictable if we start from the details, working on each of the components at the time.

Flexbox is very powerful but it takes a while to get your head around few concepts like responsiveness, containers, orientation and expansion. Simple applications are relatively easy and fast to create but applications with multiple components can become very hard to debug due to the interdependency of its parts. Due to this, I recommend to work on each of the parts separately and do the integration after we have tested each component.

 

Setup (CSS resets):

Absolutely nothing you do with flexbox will make sense unless you apply some resets to your HTML:

body {
  position: absolute;
  height: 100%;
  min-height: 100%;
  width: 100%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

 

Layout Components:

We will do a simple chat-box with a Heading, Footer and chat-body area. Note the same concept can be apply to any website layout. Because we are working with flex, we need to wrap all these 3 parts inside a container that we will call chat-wrapper.

Our intention is to create 2 fix elements always present in the screen (heading/footer) and one scrollable area (chat-body)

<div class="chat-wrapper">
    <div class="header">header</div>
    <div class="chat-body"></div>
    <div class="chat footer">footer</div>
</div>

 chat-wrapper:

  • declare flex element
  • expand container to full width flex: 1 1 auto;
  • Direction “column” as we do not want the container to be subdivided.
  • Height 100%
.chat-wrapper {
  //TEMP
  border: 10px solid red;
  
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
}

 Header:

  • The important thing here is to declare expansion in “%” amd min/max height to fix the size of the header.

 

.header {
  //TEMP
  border: 1px solid green;
  background: pink;
  
  display: flex;
  flex: 1 1 5%;
  min-height: 3em;
  max-height: 3em;
}

 chat-body:

  • Expansion to 85% and overflow in automatic so when we have multiple elements on the screen we can scroll this container only without loosing visibility of the header and footer
.chat-body {
  //TEMP
  border: 1px solid blue;
  
  display: flex;
  flex: 1 1 85%;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  overflow: auto;
}

 footer:

  • Similar to the header, it’s our second fixed element on the screen.
  • It will locate automatically at the bottom of the chat-wrap container due to the previous element, chat-body, it pushing down 85%. Important that all these expansions are indicated in percentages. This allows responsiveness to any screen size
.chat.footer {
  //TEMP
  border: 1px solid pink;
  background: green;
  
  display: flex;
  flex: 1 1 10%;
  min-height: 3em;
  max-height: 3em;
}

 

Final result.

See the Pen Chat Panel by Sebastian Bourges (@sebastianbourges) on CodePen.0

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.