Skip to navigation Skip to navigation Skip to content

Hydrogen

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

npm install @hydrogen-css/hydrogen --save

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.

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
☼ Hydrogen - v2.1.0 - Starting the build...
☼ Hydrogen - v2.1.0 - CSS file written (186ms)
  Message  > The Hydrogen build completed successfully.

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 @rules

Configure media queries, container queries, and more and then call them directly in attributes.

Manage states

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

Target selectors

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

Style descendants

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

Automated dark mode

Define sibling tokens for dark mode and activate them instantly with a single value.

Create themes

Style entire themes for your project and apply them app-wide by swapping a single string.

Easy typography

Generate a type scale, vertical rhythm, and whitespace tokens that can adapt to media queries.

Open-source code

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


Get started #

Get up and running in 6 steps. #

Step 1:

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.

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

Step 2:

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

1
npx h2-init

Step 3:

Add the data-h2 attribute to your html element to apply Hydrogen project-wide. You can also add it to select elements instead.

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

Step 4:

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

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

Step 5:

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

1
<p data-h2-color="base(primary)">Hello!</p>

Step 6:

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

1
npx h2-build

Jump right in #

Installation


Configuration


Styling


Properties