Understanding queries #
Query configurations allow you to use CSS @rules to style media, container, and other rules directly in your markup.
As outlined in the syntax section, queries are an integral part of writing Hydrogen attributes. They are used by combining a query key with parentheses that contain the options available to the property you're trying to use.
1
key(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 query system 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 or container 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 @rule 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 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 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 @rule.
As mentioned above, ensure that your queries are in a logical order, starting with mobile and increasing down the list.
1
2
3
4
5
6
7
8
9
10
"media": {
"base_key": "base",
"queries": [
{
"key": "print",
"query": "@media print"
},
...
]
}