Responsive web design

Learning objectives

Knows the term responsive design.

Responsive web design is an approach to creating web user interfaces that automatically adjust to match the properties of the device. Most commonly, this includes adjusting to the screen size (width, height) and potentially also pixel density. The notion is discussed in more detail in the course Device-Agnostic Design, which looks into building applications that work on multiple devices.

For our present purposes, it is sufficient to know that Tailwind comes with responsive design capabilities, including a set of breakpoints that can be used to adjust the behavior of the application. The breakpoints are used to create an effect that is enabled at a certain breakpoint. By default, Tailwind has five breakpoints, sm, md, lg, xl, and 2xl, which correspond to minimum screen widths 640px, 768px, 1024px, 1280px, and 1536px.

The breakpoints are used with Tailwind utility classes by prefixing the classes with a breakpoint. As an example, if we would wish that a utility class grid-cols-3 would be applied only when the screen width is at least 768px, we would use the md breakpoint with the utility class, i.e. md:grid-cols-3. This would lead to a situation where the grid would have three columns when the screen width would be over 768 pixels, and a single column otherwise.

---
import TopBar from "../components/TopBar.svelte";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello world!</title>
  </head>
  <body>
    <TopBar />
    <div class="container mx-auto grid md:grid-cols-3 gap-2">
      <div class="bg-red-300">left side 1</div>
      <div class="bg-green-200">main 2 </div>
      <div class="bg-red-300">right side 3</div>
      <div class="bg-red-300">left side 4</div>
      <div class="bg-green-200">main 5</div>
      <div class="bg-red-300">right side 6</div>
    </div>
  </body>
</html>

When we consider the above code, the user interface would look similar to the one shown in Figure 1 when the width of the screen is less than 768 pixels.

Figure 1 -- When the width of the screen is less than 768 pixels, the grid-cols-3 utility class is not applied and the elements are shown in a single column.

At the same time, when the width of the screen is adjusted to larger than or equal to 768 pixels, the utility class grid-cols-3 is applied, and the grid has three columns, as shown in Figure 2.

Figure 2 -- When the width of the screen is larger or equal to 768 pixels, the grid-cols-3 utility class is applied and the elements are shown in three columns.

It is also possible to include multiple breakpoints into the style definition. As an example, we could state that at 768 pixels we want to have 2 columns, and at 1024 pixels we want to have 3 columns. For this, we would use the breakpoints md and lg, combined with grid-cols-2 and grid-cols-3, as follows.

---
import TopBar from "../components/TopBar.svelte";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello world!</title>
  </head>
  <body>
    <TopBar />
    <div class="container mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-2">
      <div class="bg-red-300">left side 1</div>
      <div class="bg-green-200">main 2 </div>
      <div class="bg-red-300">right side 3</div>
      <div class="bg-red-300">left side 4</div>
      <div class="bg-green-200">main 5</div>
      <div class="bg-red-300">right side 6</div>
    </div>
  </body>
</html>

Now, the application would use a single column when the width of the page is smaller than 768 pixels, two columns when the width is between 768 and 1024 pixels, and three columns when the width of the screen is larger or equal to 1024 pixels. The Figure 3 shows what the above application would look like when the width of the screen is between 768 and 1024 pixels.