"What does Hydrogen do for me?"
Hydrogen is a design and development tool that helps you quickly build web projects that are mobile-ready, consistent, and accessible.
Known in Hydrogen as "properties", the system includes over a dozen media query enabled data-attribute utilities that can be used to style individual elements. Leveraging custom
data-h2 attributes, you can style anything from background colors to font sizes.
Theming via Sass
When you import Hydrogen into your Sass-enabled project, you can customize over 90 theme variables to ensure that your components and properties match your brand's guidelines. There are even a handful of pre-built themes on the way that you can use out of the box.
"Why is Hydrogen different?"
Hydrogen attempts to remain bias-free and technology agnostic while offering powerful control for any project.
"What's next for Hydrogen?"
Learn more about how Hydrogen will be improved.
A great tool needs great docs!
The most important next step for Hydrogen is the completion of the technical documentation. Documentation includes information on how to install the system, how to use components, how to use properties, how to theme the system, and how to contribute to the project.
🚀 Project Boilerplate
Get a Hydrogen project up and running in seconds.
The project boilerplate will be a ready-to-use package with Hydrogen pre-installed and working. It will contain a basic static web page, Sass compiler set up, Twig templating, and instructions on how to get started.
🌿 Twig Component Support
Import and customize components without touching any markup.
Hydrogen aims to support a variety of frameworks one day. To get things started, components will (one-by-one) become accessible through Twig's templating engine. You'll be able to import the component right from the Hydrogen NPM package and customize its data and select styles.
⚙️ New Components
Check out what components might be coming to Hydrogen next.
New components are always on the to-do list. These are a few that you might see in the future:
- Table of Contents
- Code Blocks
- Toggle Inputs
- Progress Bars
- Data Tables