afknapping / sail-skeleton

A starter kit for html/css people to get into urbit ux/ui building

sail-skeleton

A starter kit for html/css people to get into urbit ux/ui building

Init

given you have the urbit binary installed into a directory ~/urbit/ and have created a fake ship called zod.

       ~ $ cd zod
   ~/zod $ git clone https://github.com/afknapping/sail-skeleton.git

         # or, if you have ssh set up:
         # git clone [e-mail]:afknapping/sail-skeleton.git

   ~/zod $ cd ..
       ~ $ ./urbit zod
~zod:dojo> |merge %sail-skeleton our %webterm
~zod:dojo> |exit
         $ rm -rf zod/sail-skeleton

Work

         $ ./urbit zod
~zod:dojo> |mount %sail-skeleton

• Ppen http://localhost:80/app/sail-skeleton/ in browser
• Open ~/urbit/zod/ in a Finder window (or any other file explorer)
• There should be a folder sail-skeleton/ and a file sail-skeleton/app/index.hoon – edit away and take a look at the Sail guide
  • ⚠️ README.md and app/mine.hoon are missing⚠️
• |commit changes
• reload browser

Gossary

• Commit
• Desk

Further Reading

• Introduction to Hoon

---

Minimum version

• hello world renders in the browser after cloning the repo and copypasting a few commands into terminal and dojo
• sail-containing file can be edited and committed, browser refresh reflects edits

other ideas

• autocommit changes
• use arthyn/gin-tonic: ship sync and sail hot reloading for urbit development
• example mock data in various types
• example ui components as single-file components
• scribble wireframe styles from diskurs-prototype / Houdini Rough boxes
• replit project (WhitesmokeUnnaturalProcess - Replit)
• replit template
• integrate rudder
• dalten-collective/color: A library for various color format conversion, in hoon + desaturation and deluminance functions

Thx

~tinnus-napbus, ~sogrum-savluc