Responsive Design

---

title: Responsive Design

Responsive design is a web design approach aimed at creating websites that provide an optimal viewing experience across a wide range of devices. As this website should be easily accessible on mobile devices, every page should be responsive.

Basics

To achieve responsiveness on webpages, one can use CSS media queries. Media queries allow us to apply CSS styles based on the characteristics of the device. The benefit is the reduction of duplicated code, since the components often stay the same and only the styling and layout changes based on the screen size.

body {
  background-color: red;
}

@media (min-width: 1024px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 640px) {
  body {
    background-color: green;
  }
}

In the example above, the background color of the body will be red by default. When the screen width is at least 1024px, the background color will change to blue. When the screen width is at most 640px, the background color will change to green.

Tailwind CSS and Responsive Design

As we use Tailwind CSS for styling, we can use the built-in classes to make our website responsive more easily. Therefore, Tailwind CSS provides a set of utility classes that can be used to create responsive designs:

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

Since Tailwind takes the mobile-first approach, the classes work as follows:

• If you use a class without a breakpoint prefix, it will apply to all screen sizes.
• If you use a class with a breakpoint prefix, it will apply to screens of that size and larger.

<div class="bg-green-500 sm:bg-red-500 lg:bg-blue-500"></div>

In the example above, the background color of the div will be green by default, as it does not have any breakpoint prefix.

• When the screen width is at least 640px, indicated by "sm:", the background color will change to red.
• When the screen width is at least 1024px, indicated by "lg:", the background color will change to blue.

This is the same behavior as in the CSS media queries example above, but with Tailwind CSS classes. It could also be written as max-sm:bg-green-500 bg-red-500 lg:bg-blue-500, which directly translates the media queries to Tailwind CSS classes. However, the first example is more readable, easier to understand and coherent with the mobile-first approach.

Examples in this project

To dive deeper into Tailwind CSS and its responsive design capabilities, take a look at the SplitView component in the components folder. This component uses Tailwind CSS classes ("lg:grid lg:h-full lg:grid-cols-2") to create a responsive layout that changes based on the screen size. If the screen hits the lg: breakpoint, the layout will change to a two-column layout. Otherwise, it will be a vertical layout. This will apply to all components that use the SplitView component.

Another example would be the AlgorithmCard component, which hides the image on smaller screens. This is achieved by using "hidden sm:block".

For further information, visit the Tailwind CSS documentation.