Skip to navigation Skip to navigation Skip to content

Configuring media queries

Understand how to create and use media query values with Hydrogen.

Understanding queries #

As outlined in the syntax section, media queries are an integral piece of writing Hydrogen attributes. They are used by combing a media query key with parentheses that contain the options available to the property you're trying to use.

1
media(options)

Query keys can can also be combined with mode and state modifiers to create complex style selectors that suit every situation.

1
2
3
media:hover(options)
media:dark(options)
media:dark:focus(options)

The base query #

The foundation for Hydrogen's media queries is built on the base() query. This query is what you'll use to define basic styles on any element that apply to all media queries. Generally speaking, the base() query is the query you'll use the most, and will almost always appear on an element unless your needs only apply to a specific media query.

The base query's key can be configured to a different word in your media configuration.

1
<p data-h2-color="base(yellow)">

Custom queries #

Hydrogen allows you to configure any number of media queries to suit your project needs. Queries are defined in full inside your configuration file along with a key value that is used to reference them inside of attributes. It's important to note that the order of your media query configurations is important. Queries will appear in the cascade in the same order they are defined, so order them using a mobile first approach to avoid unexpected specificity problems.

Hydrogen comes equipped with a handful of custom queries that are ready to use, but once you've settled on a series of queries, you can start accessing them inside of attributes using their key value, followed by brackets containing the attributes options.

Custom queries can be chained to alter an element as many times as you need. Unlike the configuration file, query order doesn't matter when used inside of an attribute, though it is beneficial to order them in a way that makes sense for code legibility.

1
2
3
4
5
6
<p data-h2-color="
  base(yellow)
  customQuery(pink)
  customQuery:dark(green)
  customQuery:hover(blue)
">

Query settings #

You can configure media queries in the media section of the configuration file.

The base_key setting allows you to change the word used to access the base query.

The queries object accepts any number of custom queries, which require a key value and a query CSS media query.

As mentioned above, ensure that your queries are in a logical order, starting with mobile and increasing down the list.

hydrogen.config.json

1
2
3
4
5
6
7
8
9
10
"media": {
  "base_key": "base",
  "queries": [
    {
      "key": "print",
      "query": "print"
    },
    ...
  ]
}