Styled-Components & Super-Query: Responsiveness and Device control made easy

We all know that Media Query is a very important part of the web application, with that we can set any kind of responsiveness and device control.

Most of the developers only use simple media feature as part of the media query syntax, and for that simple use case, there’s a bunch of good approach for your styled-component based application.

Media Feature examples: width | min-width | max-width | height | min-height | max-height

But how about control over the screen orientation, aspect-ratio, resolution and tv devices? Or even have a interpolation between?

That’s where SuperQuery comes in!

SuperQuery is a media-query for styled-component, intuitive and easy of use, that provides you a full powerful and simple control over your media query.

Wanna a demonstration?

How about create a media query that handles screen widths between 360px and 1024px ?

Cool, right? But it’s even cooler to use our built-in breakpoints, let's rewrite it!

Of even how about control the screen orientation over mobile devices ?

And also you can create complex query!

Awesome right?! So let’s go to the implementation.

#1 Installation

For YARN users:

yarn add @themgoncalves/super-query

For NPM users:

npm install @themgoncalves/super-query

Note that it should not be in the devDependencies.

#2 How to use

First we need to import the package into our component;

import SuperQuery from '@themgoncalves/super-query';

Then, we are ready to mix it with styled-component:

#3 API Documentation

SuperQuery follows the css3 media query rule, and if you are already aware of its syntax, the only thing you need to do is to declare it as a function written in lower camel case.

Example:

We need to follow the base syntax bellow:

SuperQuery().<expression>()

Then, we would end-up with the following implementation, as seen in the code demos above:

SuperQuery().minWidth('360px').and().maxWidth('1024px').css`...`

The Media Query Syntax

Media queries are case insensitive, and will not work if you write an unknown media types.

Here’s a Pseudo-BNF of its implementation:

media_query: [[only | not]? <media_type> [ and <expression> ]*] |
             <expression> [ and <expression> ]*

expression: ( <media_feature> [: <value>]? )

media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed

media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

API Quick Guide:

BONUS: How to create custom breakpoints?

One of the coolest features we have on SuperQuery is the possibility to overwrite our default breakpoints into your own custom.

Here is how to do:

Then you should be able to use it in the same conditions as the default breakpoints, see:

That’s it for now! If you want to follow SuperQuery, if you check it out in its GitHub Repository.