Responsive Design

Using Quantum to implement responsive design is a great approach to create consistent and user-friendly applications. There are several ways to effectively implement responsive design. We recommendate using Tailwind CSS with Quantum for implementing responsive design in your projects. It provides a highly flexible and efficient way to create responsive web interfaces. Read more about Responsiveness with Tailwind

Viewport and Media Queries

Media queries are a fundamental part of responsive design, allowing you to apply CSS styles based on screen size and resolution. They enable your web pages to adapt to different devices and screen sizes.

@media media_type and (media_feature) {
  /* CSS styles to apply when the conditions are met */
}

You can combine multiple media features in a single media query to create more specific conditions. For instance:

@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* Styles for screens between 600px and 1024px wide */
}

When you use Tailwind CSS, it is straightforward since Tailwind provides utility classes for responsive design. Quantum provides six breakpoints for your convinience. On top of that, you can define custom breakpoints in your Tailwind configuration file.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        'sm-md': '640px', // Custom breakpoint
        'md-lg': '768px', // Another custom breakpoint
      },
    },
  },
  variants: {},
  plugins: [],
};

Then, you can use these custom breakpoints in your responsive classes:

<div class="text-blue-500 sm:text-red-500 md:text-green-500 md-lg:text-purple-500">
  Text color changes with custom breakpoints.
</div>

Mobile First

We suggest our users to adopt the Mobile-First approach. It means starting with the styles for smaller screens and use media queries to add styles for larger screens. This approach ensures a base level of functionality for all devices and then enhances it for larger screens.

By default, Quantum uses a Mobile-First approach.

The quick brown fox jumped over the lazy dog.

<!-- font size changes only take effect when the sceensize is medium and above. -->
<p class="text-scale-6 medium:text-scale-1 ...">
  The quick brown fox jumped over the lazy dog.
</p>

Breakpoints provided by Quantum

Breakpoints are specific screen widths at which the layout and design of a website or web application are adjusted to provide an optimal user experience. There are six breakpoints in Quantum, inspired by common device resolutions:

• Breakpoint prefix
  Minimum width
  CSS
• xxsmall
  0px
  @media (min-width: 0px { ... }
• xsmall
  360px
  @media (min-width: 360px { ... }
• small
  640px
  @media (min-width: 640px { ... }
• medium
  768px
  @media (min-width: 768px { ... }
• large
  992px
  @media (min-width: 992px { ... }
• xlarge
  1280px
  @media (min-width: 1280px { ... }

Making component responsive

Quantum components are designed to work seamlessly in various screen size. To make a component responsive to brekpoint of your choice, prefix the utility with the breakpoint name, followed by the : character. Same logic can be applied to a non-Quantum component

<!-- by default, background color of this button is bg-primary-500, bg-lightblue-500 on medium screens and bg-purple-500 on large screen and above. -->
<button class="bg-primary-500 medium:bg-lightblue-500 large:bg-purple-500 ...">
  Button
</button>