Hydrogen
An open-source, inline CSS framework powered by data-attributes.
npm install @hydrogen-css/hydrogen --save
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.
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.
and more...
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.
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.
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.
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