Challenges of Reactive Design

In today’s digital age, it is imperative to understand modern technologies, especially as a developer. In one realm most developers struggle with is in UX/UI, a.k.a User Experience/User Interface. Developers learn to code and not many learn to style. Having a pleasant experience while using a website is a difficult task to accomplish and here is a website if you think otherwise: https://userinyerface.com/

Because of the many different screen sizes and orientations a device can have, developers need to start learning how to make their websites “Reactive”. Meaning, the positioning and styling of the site can change to the needs to the device. This allows a developer to write their site ONCE. Instead of needing a different site for every device like how Reddit use to do.

Flexbox is a great place to start. To start, you need a container full of items. In this code snippet, you can see we have our container ‘flex-container’, and the items, the divs holding an image. When we apply the property ‘display: flex’ on the flex-container, only the children items to the container will be considered flex items.

 <div class="flex-container">
    <div><img src="box.png" alt=""></div>
    <div><img src="box.png" alt=""></div>
    <div><img src="box.png" alt=""></div>
    <div><img src="box.png" alt=""></div>
    <div><img src="box.png" alt=""></div>
    <div><img src="box.png" alt=""></div>
  </div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width:100%;
  height: 400px;
  justify-content: space-evenly;
  align-items: center;
  background-color: lightblue;
  border-radius: 10px;
  border: 1 solid blue;
}

div div img {
  height: 120px;
  width: 100px;
  background-color: blue;
  border-radius: 10px;
}

In the CSS file, we applied the flex property onto the container, along with a few other flex properties, flex-wrap, justify-content, and align-items. When we shrink the container to a size that does not fit our items, flex-wrap allow those contents to spill over into a new row. Justify-content and align-items are used to position our items inside the container. Here, I am using spaced-evenly for the justify-content value to give my items some breathing room and space them horizontally, also known as the main-axis. I am also using align-items to make sure the items are centered vertically, also known as the cross-axis.

Side note: Here we are working with the default flex-direction of ‘row’. There are a few other flex-directions, but we will talk about those in another article. These terms of justify-content and align-items can get confusing because they flip-flop when working with column, row-reverse, and column-reverse, so just focus on the default row for now. Below is a gif demonstration of changing the screen size with the above HTML/CSS. As you can see, flex-wrap:wrap is taking it’s effect when we shrink the screen, and justify-content:space-evenly is keeping our items an equal distance apart from each other.

Flexbox is a great tool to use for One-Dimentional design, meaning content that needs only one row or one column. One great example is a Navbar. When the screen has a desktop display with a screen size of greater than 599px, but less than 1200px, we can use flexbox to keep our Nav horizontal with a Reactive implementation. But once, we get below 600px we can hide our Navbar and add the classic 3 line mobile hamburger button. Once clicked, we can show our Navbar in a vertical display for mobile versions of the site.