Media Queries

<div layout="p:1" layout500px="p:2">...</div>

Media queries have been added as a last-resort option for specific behaviors that cannot be achieved using LayoutCSS components alone.

When using them, remember that LayoutCSS is designed to be inherently responsive, meaning that most of the common breakpoints needed for a website are already handled by our components.

In short : use them sparingly. If you find yourself relying on them too often, it might be worth revisiting the documentation to explore better solutions!

Now that we’ve clarified that, let’s dive into media queries and learn how to use them effectively.

With utilities

First, define the default behavior of your component in the layout attribute.

Then, specify how the component should behave on smaller screens (e.g., below 500px) using the layout500px attribute.

For example if you want to apply a p:1 to an element and p:3 only when the screen is smaller than 500px, you can do :

As you can see, LayoutCSS use a Desktop first approach instead of a mobile first approach.

With components

When applying media queries to components, you need to redefine each component attribute within the breakpoint layout attribute, because all component attributes are reset.

For instance, in this example, below 500px, the center element will lose its max-width because the breakpoint is empty.

As a result, its size will be determined solely by the content it contains.

All component attributes are reset, while all utilities remain unchanged. That’s why the padding is preserved.

Multiple breakpoints

You can use multiple breakpoints just like that :