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
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!
data-h2-container="base(alignment, size, inline-padding)"
The container 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 container property accepts the following comma-separated arguments:
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
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
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
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,
1of2would tell the element to span half the available space, because it is occupying 1 of 2 equal sized columns. Similarly,
3of7would occupy 42.8% of the available space, with 4 remaining equally sized columns left to be filled.
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.
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:
line-height: accepts standard CSS line-height values
This property provides an easy shortcut for combining
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
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
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
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.
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