Confidential

Basics

Install

install node if you want to build it locally otherwise just commit things to the git repo

  • code lives at this github repo
  • assets live in this dropbox shared folder

Pages

  • create a .md file to start a page
  • declare options at the top like title: Page Name and center: true
  • write pages in markdown. see commonmark help

fig a markdown page example

Elements

  • headers will generate side nav. single # for a h1 and double ## for h2. example # Section Title and ## SubTitle
  • add css classes by declaring them with curlies {.blue .bold}
  • make a link by [name](https://spatial.io)
  • make assets via dropbox [dbx](example.mp4) or figma [fig](https://www.figma.com/file/89338)

Layouts

Layouts are based on a 12 column grid. If you don't specify anything itll span all 12. If you choose to specify, make sure they eventually add up to 12 together and there shouldnt be a problem.

2nd paragraoph

col-1 col-2 col-3 col-4 col-5 col-6 col-7 col-8 col-9 col-10 col-11 col-12

Full

dbx Full Column If you don't specify anything by default its col-12 aka full width

2 Up

dbx dbx dbx dbx

3 / 4 Up

dbx col-4

dbx col-4

dbx col-4

dbx col-3

dbx col-3

dbx col-3

dbx col-3

Mix Up

dbx col-3

dbx col-9

Centering

dbx

center via max-width and no col. you can do {.max-width-1} or {.max-width-2} or {.max-width-3} {.max-width-4}

Media

Local

this is how to include local images hosted on this site's res folder

this is an image [optional name](/res/spatialLogo_mark_sm.svg)

this is a video [optional name](/res/spatial_identity_gi.mp4)

Dropbox

this is a cool dropbox asset integration that handles images and mp4's just specify [dbx] or [dropbox] in the name field

dbx [dbx](help/hero_noavatar_thumb.png)

dbx [dbx](hero_noavatar.mp4)

Audio and Video Controls

unmute video dbx-audio [dbx-audio](/hero_noavatar.mp4)

show video controls dbx-controls [dbx-controls](/hero_noavatar.mp4)

Figma

this is a cool figma asset integration that handles figma frames with a share link. just specify [fig] or [figma] for a png and [fig-svg] or [figma-svg] for a svg

fig [fig](help/hero_noavatar_thumb.png)

fig-svg [fig-svg](help/hero_noavatar_thumb.png)

Glossary

Header ## Your Title

Subtitle ## Your Subtitle

Paragraph Just write text

Bold and italic be **bold** and be *italic*

Link [link name](http://anyurl.com)

Unordered List

- item 1
- item 2
- item 3

Ordered List

1. item 1
2. item 2
3. item 3

Code `your code inside of backticks`

add an inline css class red this will be **red**{.red}

add a block css class

this will be a block with all the css stuff added to it
{.shadowLarge .bg-black .white .rounded .m4 .p4 .center}