@hydrogen-design-system/system NPM

Hydrogen

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

Installation

Install Hydrogen npm install @hydrogen-design-system/system --save-dev

Import Hydrogen into your Sass

@use "../node_modules/@hydrogen-design-system/system/dist/import/latest/core/styles/defaults" with (
    // Put custom variables here.
);
@use "../node_modules/@hydrogen-design-system/system/dist/import/latest/system.scss";

Load Hydrogen's JavaScript

https://cdn.jsdelivr.net/gh/hydrogen-design-system/system/dist/compiled/latest/system.min.js

Add the activation attribute to your page

<body data-h2-system>

</body>

Available Components

accordions
alerts
blockquotes
breadcrumbs
buttons
cards
dialogs
form inputs
- checkboxes
- dates
- email
- fieldsets
- numbers
- passwords
- radio groups
- select inputs
- telephone
- text inputs
- textareas
- urls
horizontal rules
iframes
menus
overlays
pullquotes
skip-to-content links
tables
tags

Available Property Attributes

alignment
background colors
borders
containers
display values
grid & grid items
fonts
- font color
- font families
- font sizes
- font styles
- font weights
- headings
hover effects
- hover background colors
- hover font colors
margins
padding
positioning
radius
visibilities