Pylon — Declarative layout primitives for CSS & HTML

Stacks

Pylon brings iOS-like Stacks to the web, wrapping Flexbox with a simple syntax. There are two types of stack:

hstack — Horizontal stacks

vstack — Vertical stacks

Stack Attributes

spacing= xxs xs s m l xl

Spacing between children within a Stack

align-x= left center right

Aligns items along the horizontal axis

align-y= top center bottom

Aligns items along the vertical axis

<hstack spacing=s>
  <input type="text" placeholder="Your name" />
  <input type="email" placeholder="Your email" />
  <button>Submit</button>
</hstack>

<vstack spacing=s>
  <input type="text" placeholder="Your name" />
  <input type="email" placeholder="Your email" />
  <button>Submit</button>
</vstack>

Hello world.

<vstack stretch align-x=center align-y=center>
  Hello world.
</vstack>