UNPKG

@hydrogen-design-system/system

Version:

Hydrogen's full design system and component library.

hydrogen.design

hydrogen-design-system/system

87 lines (75 loc) • 2.75 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# Hydrogen An open-source, modular component library and CSS utility. <a href="https://www.npmjs.com/package/@hydrogen-design-system/system" title="Visit this package on NPM." target="_blank" rel="noreferrer"> <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/system?color=9864e8&label=release"> </a> ## 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](https://github.com/hydrogen-design-system/component-accordion) - [alerts](https://github.com/hydrogen-design-system/component-alert) - [blockquotes](https://github.com/hydrogen-design-system/component-blockquote) - [breadcrumbs](https://github.com/hydrogen-design-system/component-breadcrumb) - [buttons](https://github.com/hydrogen-design-system/component-button) - [cards](https://github.com/hydrogen-design-system/component-card) - [dialogs](https://github.com/hydrogen-design-system/component-dialog) - [form inputs](https://github.com/hydrogen-design-system/component-forms) - checkboxes - dates - email - fieldsets - numbers - passwords - radio groups - select inputs - telephone - text inputs - textareas - urls - [horizontal rules](https://github.com/hydrogen-design-system/component-horizontal-rule) - [iframes](https://github.com/hydrogen-design-system/component-iframe) - [menus](https://github.com/hydrogen-design-system/component-menu) - [overlays](https://github.com/hydrogen-design-system/component-overlay) - [pullquotes](https://github.com/hydrogen-design-system/component-pullquote) - [skip-to-content links](https://github.com/hydrogen-design-system/component-skip-to-content) - [tables](https://github.com/hydrogen-design-system/component-table) - [tags](https://github.com/hydrogen-design-system/component-tag) ## 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