Documentation
Layout Primitives
Layers

Layers

Elements on top of each other. Layers have a 12 x 7 (7 x 12 in portrait mode) grid, along which child layers can be shifted.

Usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

<div data-unitone-layout="layers">
	<img src="https://placehold.jp/400x300.jpg" alt="" />
 
	<div data-unitone-layout="-align-self:end">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
	</div>
</div>

Props

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.

<div data-unitone-layout="layers -gap:-2">
	...
</div>

HTML --unitone--min-height / JSX minHeigth={value}

Min height.

<div data-unitone-layout="layers" style="--unitone--min-height: 360px">
	...
</div>

HTML -cover / JSX cover

Background image/video is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

<div data-unitone-layout="layers -cover">
	...
</div>

HTML -fill / JSX fill

The background image/video is enlarged according to the amount of content.

<div data-unitone-layout="layers -fill">
	...
</div>

HTML -blur / JSX applyBlur

Blur the background image/video.

<div data-unitone-layout="layers -blur">
	...
</div>

HTML -portrait / JSX portrait

In portrait mode, swaps the height and width of the grid.

<div data-unitone-layout="layers -portrait">
	...
</div>

-mix-blend-mode:{value}

You can specify how the elements should look when stacked.

normal / multiply / screen / overlay / darken / lighten / color-dodge / color-burn / hard-light / soft-light / difference / exclusion / hue / saturation / color / luminosity

<div data-unitone-layout="layers -portrait">
	<img src="https://placehold.jp/400x300.jpg" alt="" />
 
	<div data-unitone-layout="-mix-blend-mode:overlay">
		...
	</div>
</div>

Grid item position

You can set the position of child elements with the associated properties of the CSS grid.

  • align-self: data-unitone-layout="-align-self:end"
  • justify-self: data-unitone-layout="-justify-self:end"
  • grid-column: --unitone--grid-column: 1/-1
  • grid-row: --unitone--grid-row: 1/-1
<div data-unitone-layout="layers -portrait">
	<img src="https://placehold.jp/400x300.jpg" alt="" />
 
	<div data-unitone-layout="-align-self:center -justify-self:center" style={{ '--unitone--grid-column': '2/-2' }}>
		...
	</div>
</div>

HTML --unitone--columns / JSX columns={value}

Number of grid columns.

<div data-unitone-layout="layers" style="--unitone--columns: 20">
	...
</div>

HTML --unitone--rows / JSX rows={value}

Number of grid rows.

<div data-unitone-layout="layers" style="--unitone--rows: 20">
	...
</div>
GuttersReel