Screens
Jux provides a flexible system for creating responsive designs through the use of customizable screen breakpoints. This feature allows you to easily apply styles conditionally based on screen sizes or other media queries.
Defining screens
You can define your custom screen breakpoints in the jux.config
file. The screens property allows you to set up various breakpoints and media queries that you can then use throughout your styling.
Custom screen names
You can use any name for your screens, and they don’t have to follow the xs
, sm
, md
, lg
convention. You can define as many screens as you need, and they can be named anything you like.
Using screens in your styles
Once you’ve defined your screens, you can use them in your css
and styled
function calls to apply responsive styles.
Will generate the following CSS:
Advanced configuration
By default, Jux uses the min-width
media query for screen definitions. However, if you’re looking for more control over your media queries, you can use the min
, max
or raw
properties to define custom media queries.