Intro to Feather

Feather is a Design System which gives Sail developers easy access to a small set of predefined styles.

Feather is implemented as a library of CSS classes, and is bundled with Hawk.

Benefits of opting into Feather's constraints:

Feather uses CSS variables that...
- the user can override
- respect OS light/dark theme
UIs styled with Feather fit in with the style of Hawk
- “birds of a feather flock together”

The `prose` Class

the .prose class adds blog-like spacing, sizing, and readability styling to semantic children such as p li h1 h2 a etc.

This document uses it.

;article.prose

  # cool

  - neat
  - fine

==

Flexbox

fr jb

XXX

fr ja

XXX

fr jc

XXX

fr js

XXX

fr je

XXX

fc ac

XXX

fc as

XXX

fc ae

XXX

fc af

XXX

fr g0

fr g1

fr g2

fr g3

fr g4

fr g5

fr g6

fr g7

fr g8

fc g0

fc g1

fc g2

fc g3

fc g4

fc g5

fc g6

fc g7

fc g8

frw g2

grow

basis-half

basis-full

basis-none

Typography

s-2 s-1 s0 s2 s3 s4 s5 s6

mono bold italic underline strike

Text Alignment

Foreground & Background Colors

f-4 f-3 f-2 f-1 f0 f1 f2 f3 f4

b-4 b-3 b-2 b-1 b0 b1 b2 b3 b4

Padding

p-8

p-7

p-6

p-5

p-4

p-3

p-2

p-1

p-page

Margin

mt1

mt2

mt3

mb1

mb2

mb3

ml1

ml2

ml3

mr1

mr2

mr3

Opacity

o10

Borders

bd0

bd1

bd2

bd3

br0

br1

br2

br3

bd2 bc0

bd2 bc1

bd2 bc2

bd2 bc3

bd2 bc4

bd2 bc-1

bd2 bc-2

bd2 bc-3

bd2 bc-4

Dimensions

wf width: full
wfc width: fit-content
mw-page max-width: page (650px)
hf height: full
hfc height: fit-content

Special

the hidden class hides the element.

Request indicators

loader indicator parent

loading loading state

loaded loaded state

Example

;button.loader
  =onclick  "$(this).toggleClass('htmx-request')"
  ;span.loaded:  toggle load state
  ;span.loading: ...loading
==

Misc

scroll-y
scroll-y: auto

scroll-x
scroll-x: auto

relative
position: relative

sticky
position: sticky

absolute
position: absolute

fixed
postion: fixed

block
display: block

inline
display: inline-block

pre
white-space: pre

pre-line
white-space: pre-line

break
word-break: break-word

action
touch-action: manipulation

Feather Sutra

Order requires constraints.

Primary Constraint

Interfaces must work on a mobile web browser.

Consequent Constraints

no element should need to be wider than 300px (but may expand if there is room)
avoid horizontal scrolling
left-click (tap) is the only mouse event

Locality of Behavior

co-locate actionable elements with the elements on which they act
put styling inline
put javascript inline
don't abstract too early

Mechanical Simplicity

don't fight the browser
animations are optimizations, not features
avoid the client/server distinction by ignoring the existance of the client (use POST forms to change state)
for ephemeral state, prefer text attributes in the DOM over javascript state

UX low-hanging fruit

network requests should always have indicators
prefer autosave to manually saving
be semantic with your tags

Feather Tantra

Life evolves through a vital chaos.

;div.any.class(style "any: css;");

;div
  =class  "any class"
  =style
    """
    any: css;
    that-you: want;
    """
  ;
==

;style
  ;+  ;/  %-  trip
  '''
  .any-css {
    that-you: want;
  }
  '''
==

;script
  ;+  ;/  %-  trip
  '''
  alert('any js you want');
  '''
==

;button
  =onclick  "alert('any js you want')"
  ; do something
==