Skip to navigation Skip to content

An open-source, inline CSS framework powered by data-attributes.

Hydrogen

What is Hydrogen?

Hydrogen is a CSS framework that combines the power of inline styling with the efficiency of token-style settings to help you create consistent, beautiful experiences.

How does it work?

Hydrogen scans your code for data-h2 attributes, parses their values, and seamlessly creates a production-ready CSS file containing exactly what you've asked for.

Why should I use it?

Hydrogen helps you move beyond the chaos of maintaining CSS. It handles naming methodologies, typography, and enforcing your brand all while being fast, legible, and open-source.

A sticker-style icon of one of Hydrogen's adorable little mascots, Beep. Beep is a robot.

Feature overview #

The CSS you know and love. #

Hydrogen's syntax supports any CSS property you can think of (and a few custom ones) while enhancing them with configurable, inline queries and modifiers. You can write familiar CSS syntax while easily targeting custom themes, dark mode, and interaction states.

background color gap grid flex font-family font-size font-weight margin padding position shadow transform transition z-index

and more...

It works while you work, and keeps up too. #

Rather than compiling a library, Hydrogen generates CSS on the fly by scanning your code and parsing unique data-h2 attributes. Integrate it into your build tools and run it in the background as you develop for on-demand styling.

1
2
3
4
5
6
☼ Hydrogen - System - Starting the build...
  Message  > Hydrogen v1.1.20
☼ Hydrogen - System - 28 files were processed...
☼ Hydrogen - System - Exporting CSS...
☼ Hydrogen - Timers - 0646ms (Total build)
☼ Hydrogen - Success - Exporting CSS

Your brand, your way, in every line. #

Embracing a design-token-style approach, Hydrogen's configuration allows you to centrally define decisions such as color, typography, and shadows. These values then become usable in Hydrogen's attributes, allowing you to update them product-wide in a matter of seconds.

And a whole lot more... #

Inline media queries

Define media queries in your configuration and then call them directly in attributes.

Inline states

Style native HTML interaction states like :hover and :focus right in your markup.

Inline selectors

Using the :selectors modifier, apply styles to a specific ID, class, or attribute.

Inline nested elements

Using the :children modifier, apply styles to nested tags or selectors for bulk styling.

Automated dark mode

Define sibling values for dark mode and apply them instantly using a single value.

Automated theming

Create entire themes for your project and apply them app-wide in an instant.

Automated typography

Automatically generate a type scale, vertical rhythm, and whitespace tokens.

Open-source code

Hydrogen is provided under an MIT license; fork the code and change it to suit your needs.

A sticker-style icon of a race flag.

Quick start #

Get up and running in 6 steps. #

1

Install Hydrogen using NPM

Ensure you have Node installed on your machine. Then navigate to your project in a terminal and run the NPM installation command to install Hydrogen.

terminal 
1
npm install @hydrogen-css/hydrogen --save
2

Create a configuration file

From your project, run the h2-init command to create a configuration file. You'll be asked to specify your input and output directories.

terminal 
1
npx h2-init
3

Add data-h2 to your html element

To apply Hydrogen to your entire project, add the data-h2 attribute to your html element. Hydrogen's styles won't work outside of this attribute, so feel free to apply it elsewhere if you only need to style a subset of your project.

index.html 
1
2
3
4
<!DOCTYPE html>
<html data-h2>
  <body />
</html>
4

Import the Hydrogen CSS file

Like any other CSS file, you'll need to import Hydrogen's CSS into the head of your document.

index.html 
1
2
3
4
<head>
  ...
  <link rel="stylesheet" href="path/to/hydrogen.css">
</head>
5

Use Hydrogen to style an element

Now that the CSS file is ready to be loaded in, you can start going wild with Hydrogen attributes to style your project.

index.html 
1
2
3
<p data-h2-color="base(primary)">
  Hello!
</p>
6

Watch the magic

When you're ready to view your masterpiece, you can run the build (or watch) command to compile your custom built CSS file.

terminal 
1
npx h2-build
A sticker-style icon of a compass.

Jump right in #

Installation

Configuration

Styling

Properties