Layout and spacing

Learn more about Responsive Design on the documentation of Tailwind CSS

It is essential to understand responsive design and the available breakpoints as the variations that can be used to control content. Knowing the breakpoints of your layout will help you understand the grid better. The grid is reactive to these breakpoints, which will allow you to adjust columns according to the breakpoints.

Since the dawn of smartphones, creating websites that can adapt to the screen size of a device has become a key factor in the design and development of websites.

It was as early as 1994 when the concept of media queries was first proposed. In the year 2000, W3C started work on media queries and also on another scheme for supporting various devices. [read more]. But it was the breakthrough in the use of smartphones and touch-based devices that accelerated the addition of media queries and in 2012, it was finally introduced as part of CSS.

Today, we cannot imagine building a website without media queries that react to device size. In 2020, Google announced that mobile-first indexing would be the primary way for Google Search to index websites for search results.

Why is this important?

When designing websites, the approach to mobile and device width is a very important factor. The UAE design system takes the approach of a mobile-first approach in its CSS setup. This means that when you design and program the frontend of your website, you must first consider the layout for a mobile device and gradually add elemental changes to how it will adapt to larger screen sizes.

The grid system has been part of website design and development for a very long time. Using a grid provides designers and developers with the ability to align content vertically and horizontally.

However, it continues to evolve with the changes and trends in design.

The design system adopts the Tailwind width approach. In this sense, it does not:

• Use a fixed width per column but rather calculates width dynamically in percentage.
• Emphasis the use of a gap (i.e. space or gutter) between columns

The following is a visualisations of the grid system applied using all the possible classes available in the design system, adapted from TailwindCSS that allows you to control the columns of your grid.

In essence, spacing isn't just about putting space between elements; it's a tool that can be used strategically to create clearer, more intuitive interfaces. As with any rule in design, understanding the rationale behind it is crucial because there will always be exceptions based on context.

The design system has increments of 2px until the base font size. Hence, up to 16px (1rem). After the base font size, the design system recommends using 4px as the increment up to 48px.

The screen size and the layout you want to design may be open to spacing, and hence we recommend a proportional ratio, so 16 is twice as much spacing as 8 for example.