Alongside standard CSS properties, Hydrogen offers a handful of helpful custom properties that provide access to common or frustrating styles. This includes things like containers, positioning shortcuts for top, right, bottom, left, and overlays. These properties will always yield to CSS syntax, so should new CSS properties emerge, Hydrogen's custom properties will be modified to fit the situation. New properties are always in the works!

This property has been deprecated in order to avoid conflicts with the native container CSS property. Please see data-h2-wrapper below for the newly supported property.

data-h2-flex-grid="base(alignment, column-gap, row-gap)"

The flexbox grid and item system is unique to Hydrogen and provides instant access to an easy-to-learn layout option. You can learn more about using it in the layout styling section.

The parent grid attribute allows you to customize the grid item alignment, as well as whether or not gap values should be applied to the columns and rows.

• alignment: accepts any valid CSS align-items value
• column-gap: accepts any CSS unit value, as well as Hydrogen space multipliers
• row-gap: accepts any CSS unit value, as well as Hydrogen space multipliers

Note that pairing flex-grid with margin will not work, and flex-grid will always take precedence. This is the due to flex-grid requiring specific margins in order to work as intended. You can get around this by using padding or wrapping the flex-grid element in a div and applying the margin to that instead.

data-h2-flex-item="base(XofY)"

Flexbox grid items allow you to tell the item exactly how much space to span. Unlike CSS grid, this syntax is explicitly applied to the item itself, rather than aligning the items within a parent grid system.

• XofY: accepts two numbers that represent the number of columns to span and the total number of columns in the grid. For example, 1of2 would tell the element to span half the available space, because it is occupying 1 of 2 equal sized columns. Similarly, 3of7 would occupy 42.8% of the available space, with 4 remaining equally sized columns left to be filled.

data-h2-font-size="base(size, line-height)"

You can style font sizes using standard CSS syntax if you prefer, but Hydrogen also automatically generates a configurable typography scale for you. You can access these generated values by specifying a heading level or copy keyword.

The font-size property also supports a second option if you'd like to configure the element's line-height value in the same line.

• size: accepts standard CSS unit values, Hydrogen space multiplier values, as well as the following typography scale keywords: display, h1, h2, h3, h4, h5, h6, copy, caption
• line-height: accepts standard CSS line-height values

data-h2-layer="base(z-index, position)"

This property provides an easy shortcut for combining z-index and position to make layering elements faster.

• z-index: accepts standard CSS z-index numbers
• position: accepts standard CSS position values

data-h2-location="base(top, right, bottom, left)"

This property acts as a shortcut for the top, right, bottom, and left CSS properties. It's provided as an easy way to apply positioning to an element in a single line.

• top: accepts any CSS unit value, as well as Hydrogen space multipliers
• right: accepts any CSS unit value, as well as Hydrogen space multipliers
• bottom: accepts any CSS unit value, as well as Hydrogen space multipliers
• left: accepts any CSS unit value, as well as Hydrogen space multipliers

data-h2-overlay="base(color, opacity)"

This property applies an absolutely positioned pseudo element that occupies the same height and width as its parent, creating a colored overlay effect. You can control both the color and opacity of the overlay.

• color: accepts configured Hydrogen color and gradient keys, as well as standard CSS color values
• opacity: accepts standard CSS opacity numbers

data-h2-visually-hidden="base(visibility)"

This property provides a more complex combination of styles than the standard CSS visibility property that helps apply styles for screen-reader and assistive technologies.

Applying invisible will make an element visually disappear, but it will still show up in the document for assistive tech, while applying hidden will remove the element both visually and programmatically.

• visibility: accepts either visible, invisible, or hidden

data-h2-wrapper="base(alignment, size, inline-padding)"

The wrapper property applies a max-width to an element, aligns it using various left/right margin values, and optionally, does the math to add padding to the left and right sides. The wrapper property accepts the following comma-separated arguments:

• alignment: accepts center, left, and right
• size: accepts configured container settings, any CSS unit value, as well as Hydrogen space multipliers
• inline-padding: accepts any CSS unit value, as well as Hydrogen space multipliers