Hydrogen
ALPHA

An open-source, modular component library and CSS utility.

"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.

Component Library

Hydrogen offers over 25 customizable components that you can use to build your interfaces. Each component is built in HTML, Sass, and JavaScript, and is self contained so that they can be individually used if you don't have the need for the entire system.

Utility Attributes

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.

In the interest of allowing designers and developers to use the technologies that best suit their project and users, Hydrogen is built using the basic building blocks of the web: HTML, CSS (with help from Sass!), and JavaScript. The system can be installed on any project and is namespaced in a way that allows you to install it worry free - it will not affect any of your existing work until you tell it to.

Each piece of Hydrogen's system can be used as a standalone feature. If your project needs accordion components, for example, you can simply install Hydrogen's accordion to avoid bloating your project with unnecessary code. This modularity allows Hydrogen alleviate the ever-present issues that arise with updating to a new major version - if you don't have the resources to bugfix breaking changes, you can install a previous version of a component alongside the most recent update to ensure continuity until you're ready to upgrade.

More information on how this works is on its way.

"What's next for Hydrogen?"

Learn more about how Hydrogen will be improved.

📜 Documentation

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.

An abstract depiction of typical documentation layout using solid boxes of light purple.

🚀 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.

An abstract depiction of a standard website layout using solid boxes of light purple.

🌿 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.

An abstract depiction of three components being imported into one layout using solid boxes of light purple.

⚙️ 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:

Tooltips
Table of Contents
Code Blocks
Toggle Inputs
Progress Bars
Data Tables

An abstract depiction of a series of components, one of which with a plus symbol to indicate that it's new to the group using solid boxes of light purple.

HydrogenALPHA