Pylon

Declarative layout primitives for CSS & HTML

Pylon encapsulates Flexbox logic into a set of declarative and expressive tags and attributes which, when combined, form robust user interfaces.

Easily configurable Pure CSS – no JavaScript Less than 2kb minified

A thing by @almonk

Westminster 0.5 miles
Richmond 2.5 miles
Hampstead 4.2 miles
Balham 6.0 miles
Wapping 10.5 miles 
<list spacing=s>
  <hstack spacing=s>
    <div class="icon"></div>
    <text>Westminster</text>
    <spacer></spacer>
    <text>0.5 miles</text>
  </hstack>
  ...
Installation

Pylon can be used via CDN: 

<link rel="stylesheet" href="https://unpkg.com/pyloncss@latest/css/pylon.css"/>

or via npm: 

npm install pyloncss

Or, customise and build the code yourself from github.com/almonk/pylon

Contents
Elements
Stacks Lists Dividers Spacers Helpers
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>
Lists

Lists are similar to a vstack but have some built in conveniences. The List element will assume its immediate children are row elements and draw borders between them while omitting the last row.

List 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
Red Green Blue 
<list spacing=xs>
  <text>Red</text>
  <text>Green</text>
  <text>Blue</text>
</list>
Due today
 
<list spacing="s">
  <hstack spacing=xs>
    <input type="checkbox" />
    <label>Do laundry</label>
    <spacer></spacer>
    <div>Due today</div>
  </hstack>
  <hstack spacing=xs>
    <input type="checkbox" />
    <label>Buy milk</label>
  </hstack>
</list>
Dividers

Dividers are used to visually divide items in a stack. 

<hstack spacing=xs>
  <input stretch type="text" placeholder="Add a todo">
  <button>Add</button>
  <divider></divider>
  <button>View all</button>
</hstack>
Spacers

Spacers stretch to fill available space. 

<hstack>
  <button>Cancel</button>
  <spacer></spacer>
  <button>Submit</button>
</hstack>
Helpers

Generic attributes which can be applied to any element.

debug
Outlines all child elements to visually see boundaries
stretch
Instructs the element to fill available space 
<hstack debug>
  <button>Cancel</button>
  <spacer></spacer>
  <button>Submit</button>
</hstack>
<hstack debug>
  <button>Cancel</button>
  <button stretch>Submit</button>
</hstack>