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