forked from almonk/pylon
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
387 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,375 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <title>Pylon</title> | ||
| <link rel="stylesheet" href="./pylon/pylon.css" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/github.min.css" | ||
| /> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <style> | ||
| html, | ||
| body { | ||
| font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", | ||
| Roboto, "Helvetica Neue", Arial, sans-serif; | ||
| } | ||
|
|
||
| code { | ||
| font-family: "Source Code Pro", monospace; | ||
| } | ||
|
|
||
| .icon { | ||
| width: 32px; | ||
| height: 32px; | ||
| border-radius: 100%; | ||
| } | ||
|
|
||
| [debug] * { | ||
| outline: 1px solid #357edd !important; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="sans-serif"> | ||
| <div class="mw8 center pa4 flex"> | ||
| <div class="w-third mr4 mt5"> | ||
| <h1 class="ma0 mb2">Pylon</h1> | ||
| <h2 class="ma0 mb2 fw4 lh-title"> | ||
| Declarative layout primitives for CSS & HTML | ||
| </h2> | ||
| <p class="ma0 lh-copy gray"> | ||
| Pylon encapsulates Flexbox logic into a set of simple tags and | ||
| attributes which, when combined, can form robust user interfaces using | ||
| a declarative and expressive API. | ||
| </p> | ||
| <p class="ma0 mt2 lh-copy gray"> | ||
| A thing by <a href="https://alasdairmonk.com" class="blue link">@almonk</a> | ||
| </p> | ||
| </div> | ||
| <div class="w-two-thirds relative pt4 blue"> | ||
| <list debug class="o-60"> | ||
| <hstack spacing="s"> | ||
| <div class="icon"></div> | ||
| <text>Westminster</text> | ||
| <spacer></spacer> | ||
| <text>0.5 miles</text> | ||
| </hstack> | ||
| <hstack spacing="s"> | ||
| <div class="icon"></div> | ||
| <text>Richmond</text> | ||
| <spacer></spacer> | ||
| <text>2.5 miles</text> | ||
| </hstack> | ||
| <hstack spacing="s"> | ||
| <div class="icon"></div> | ||
| <text>Hampstead</text> | ||
| <spacer></spacer> | ||
| <text>4.2 miles</text> | ||
| </hstack> | ||
| <hstack spacing="s"> | ||
| <div class="icon"></div> | ||
| <text>Balham</text> | ||
| <spacer></spacer> | ||
| <text>6.0</text> | ||
| </hstack> | ||
| </list> | ||
| <pre | ||
| class="bg-white blue br3 absolute right-2 overflow-hidden shadow-3 f4" | ||
| style="bottom:-50px;" | ||
| ><code class="html pa2"><list debug> | ||
| <hstack spacing=s> | ||
| <div class="icon"></div> | ||
| <text>Westminster</text> | ||
| <spacer></spacer> | ||
| <text>0.5 miles</text> | ||
| </hstack> | ||
| ...</code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="mt4 mw8 center pa4 flex mb4"> | ||
| <div class="w-third mr4 mt2"> | ||
| <div class="f4 fw6 mb2">Stacks</div> | ||
| <p class="ma0 lh-copy gray"> | ||
| Pylon brings iOS-like Stacks to the web, wrapping Flexbox with a | ||
| simple syntax. There are two types of stack: | ||
| </p> | ||
|
|
||
| <p class="ma0 lh-copy near-black mt2"> | ||
| <code>hstack</code> — Horizontal stacks | ||
| </p> | ||
| <p class="ma0 lh-copy near-black mt2"> | ||
| <code>vstack</code> — Vertical stacks | ||
| </p> | ||
|
|
||
| <p class="ma0 lh-copy near-black mt3 f6 fw5">Stack Attributes</p> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">spacing=</code> | ||
| <hstack spacing="xxs"> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xxs</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xs</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">s</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">m</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">l</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xl</code> | ||
| </hstack> | ||
| <div class="gray">Spacing between children within a Stack</div> | ||
| </vstack> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">alignment=</code> | ||
| <hstack spacing="xxs"> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">leading</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">center</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">trailing</code> | ||
| </hstack> | ||
| <div class="gray">Aligns items along the axis</div> | ||
| </vstack> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">justify=</code> | ||
| <hstack spacing="xxs"> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">leading</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">center</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">trailing</code> | ||
| </hstack> | ||
| <div class="gray">Aligns items along the cross-axis</div> | ||
| </vstack> | ||
| </div> | ||
| <div class="w-two-thirds"> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3"> | ||
| <hstack spacing="s"> | ||
| <input type="text" placeholder="Your name" /> | ||
| <input type="email" placeholder="Your email" /> | ||
| <button>Submit</button> | ||
| </hstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><hstack spacing=s> | ||
| <input type="text" placeholder="Your name" /> | ||
| <input type="email" placeholder="Your email" /> | ||
| <button>Submit</button> | ||
| </hstack></code></pre> | ||
|
|
||
| <div class="mt3 ba br--top b--light-gray br3 bg-white pa3"> | ||
| <vstack spacing="s"> | ||
| <input type="text" placeholder="Your name" /> | ||
| <input type="email" placeholder="Your email" /> | ||
| <button>Submit</button> | ||
| </vstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><vstack spacing=s> | ||
| <input type="text" placeholder="Your name" /> | ||
| <input type="email" placeholder="Your email" /> | ||
| <button>Submit</button> | ||
| </vstack></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mw8 center pa4 flex mt0 mb4"> | ||
| <div class="w-third mr4 mt2"> | ||
| <div class="f4 fw6 mb2">Lists</div> | ||
| <p class="ma0 lh-copy gray"> | ||
| Lists are similar to a <code>vstack</code> 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. | ||
| </p> | ||
| <p class="ma0 lh-copy near-black mt3 f6 fw5">List Attributes</p> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">spacing=</code> | ||
| <hstack spacing="xxs"> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xxs</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xs</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">s</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">m</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">l</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">xl</code> | ||
| </hstack> | ||
| <div class="gray">Spacing between children within a Stack</div> | ||
| </vstack> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">alignment=</code> | ||
| <hstack spacing="xxs"> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">leading</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">center</code> | ||
| <code class="bg-white ba b--light-gray br2 pa1 gray">trailing</code> | ||
| </hstack> | ||
| <div class="gray">Aligns items along the axis</div> | ||
| </vstack> | ||
| </div> | ||
| <div class="w-two-thirds"> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3"> | ||
| <list> | ||
| <text>Red</text> | ||
| <text>Yellow</text> | ||
| <text>Green</text> | ||
| <text>Pink</text> | ||
| <text>Blue</text> | ||
| </list> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><list> | ||
| <text>Red</text> | ||
| <text>Yellow</text> | ||
| <text>Green</text> | ||
| <text>Pink</text> | ||
| <text>Blue</text> | ||
| </list></code></pre> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3 mt3"> | ||
| <list spacing="s"> | ||
| <hstack> | ||
| <label> | ||
| <input type="checkbox" /> | ||
| Buy milk | ||
| </label> | ||
| <spacer></spacer> | ||
| <div>Due today</div> | ||
| </hstack> | ||
| <hstack> | ||
| <label> | ||
| <input type="checkbox" /> | ||
| Pick up laundry | ||
| </label> | ||
| </hstack> | ||
| </list> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><list spacing=s> | ||
| <hstack> | ||
| <label> | ||
| <input type="checkbox"> | ||
| Buy milk | ||
| </label> | ||
| <spacer></spacer> | ||
| <div>Due today</div> | ||
| </hstack> | ||
| <hstack> | ||
| <label> | ||
| <input type="checkbox"> | ||
| Pick up laundry | ||
| </label> | ||
| </hstack> | ||
| </list></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mw8 center pa4 flex mt0 mb4"> | ||
| <div class="w-third mr4 mt2"> | ||
| <div class="f4 fw6 mb2">Dividers</div> | ||
| <p class="ma0 lh-copy gray"> | ||
| Dividers are used to visually divide items in a stack. | ||
| </p> | ||
| </div> | ||
| <div class="w-two-thirds"> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3"> | ||
| <hstack spacing="xs"> | ||
| <input stretch type="text" placeholder="Add a todo" /> | ||
| <button>Add</button> | ||
| <divider></divider> | ||
| <button>View all</button> | ||
| </hstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><hstack spacing=xs> | ||
| <input stretch type="text" placeholder="Add a todo"> | ||
| <button>Add</button> | ||
| <divider></divider> | ||
| <button>View all</button> | ||
| </hstack></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mw8 center pa4 flex mt0 mb4"> | ||
| <div class="w-third mr4 mt2"> | ||
| <div class="f4 fw6 mb2">Spacers</div> | ||
| <p class="ma0 lh-copy gray"> | ||
| Spacers stretch to fill available space. | ||
| </p> | ||
| </div> | ||
| <div class="w-two-thirds"> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3"> | ||
| <hstack> | ||
| <button>Cancel</button> | ||
| <spacer></spacer> | ||
| <button>Submit</button> | ||
| </hstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><hstack> | ||
| <button>Cancel</button> | ||
| <spacer></spacer> | ||
| <button>Submit</button> | ||
| </hstack></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mw8 center pa4 flex mt0 mb4"> | ||
| <div class="w-third mr4 mt2"> | ||
| <div class="f4 fw6 mb2">Helpers</div> | ||
| <p class="ma0 lh-copy gray"> | ||
| Generic attributes which can be applied to any element. | ||
| </p> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">debug</code> | ||
| <div class="gray lh-copy"> | ||
| Outlines all child elements to visually see boundaries | ||
| </div> | ||
| </vstack> | ||
| <vstack spacing="xxs" alignment="leading" class="f6 mt2 mb3"> | ||
| <code class="bg-light-gray br2 pa1">stretch</code> | ||
| <div class="gray lh-copy"> | ||
| Instructs the element to fill available space | ||
| </div> | ||
| </vstack> | ||
| </div> | ||
| <div class="w-two-thirds"> | ||
| <div class="ba br--top b--light-gray br3 bg-white pa3"> | ||
| <hstack debug> | ||
| <button>Cancel</button> | ||
| <spacer></spacer> | ||
| <button>Submit</button> | ||
| </hstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><hstack debug> | ||
| <button>Cancel</button> | ||
| <spacer></spacer> | ||
| <button>Submit</button> | ||
| </hstack></code></pre> | ||
| <div class="mt3 ba br--top b--light-gray br3 bg-white pa3"> | ||
| <hstack debug spacing=s> | ||
| <button>Cancel</button> | ||
| <button stretch>Submit</button> | ||
| </hstack> | ||
| </div> | ||
| <pre | ||
| class="ma0 br3 br--bottom bg-white overflow-hidden" | ||
| ><code class="html"><hstack debug> | ||
| <button>Cancel</button> | ||
| <button stretch>Submit</button> | ||
| </hstack></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| hljs.initHighlightingOnLoad(); | ||
| </script> | ||
| </body> | ||
| </html> |
File renamed without changes.
Binary file not shown.
Oops, something went wrong.