open-index/open-npm huggingface dataset:
npm package: @hydrogen-design-system/component-table
Description: Hydrogen's table component.
Author: Josh Beveridge
Latest version: 0.0.7

# Hydrogen's table component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-table" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-table?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-table --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-tag
Description: Hydrogen's tag component.
Author: Josh Beveridge
Latest version: 0.0.10

# Hydrogen's tag component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-tag" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-tag?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-tag --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/properties
Description: Hydrogen's property utility tool.
Author: Josh Beveridge
Latest version: 0.0.42

# Hydrogen's property utility

<a href="https://www.npmjs.com/package/@hydrogen-design-system/properties" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/properties?color=9864e8&label=release">
</a>

## Installation

You can install this tool as a standalone package using `npm install @hydrogen-design-system/properties --save-dev`

This tool can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This utility contains the following in the `dist` folder:
- the code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the tool that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

The core code for this component can be found in:
- `src/scripts/`
- `src/styles/properties/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the properties and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the properties
- `npm publish`
  - builds the properties
  - publishes it to the public package repository
npm package: @hydrogen-design-system/system
Description: Hydrogen's full design system and component library.
Author: Josh Beveridge
Latest version: 0.0.42

# 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