this is a touch keyboard that i designed for use in a PICO-8 Android app. i discussed the keyboard in this forum post.
because PICO-8 is not open-source i don't know how the
PICO-8 fantasy console and the touch keyboard could best fit together,
but i think it's reasonably easy because i
did my best to keep the code clean.
i made this touch keyboard in HTML5 & CSS3 with BEM
— i really could not do this without BEM.
if you change the code, please — for your own sanity — keep BEM
because BEM is the main reason this code is clean.
i used Inkscape for the vector pictures that the keyboard uses.
these documents © 2023 by Sosasees are licensed under CC BY 4.0:
- stylesheets in the styles folder:
- pictures in the surfaces folder:
- keycap.svg
- keycap--19dp-wide.svg
- keycap--19dp-wide--pressed.svg
- keycap--26dp-wide.svg
- keycap--extra-wide
- keycap--extra-wide--pressed.svg
- keycap--pressed.svg
- tab-button--controller--active.svg
- tab-button--controller--inactive
- tab-button--keyboard--active.svg
- tab-button--keyboard--inactive
- in the controller subfolder:
- pictures in the symbol-colors folder:
- pictures in the symbols folder:
- 0_and_bracket-right.svg
- 1_and_exclaimation.svg
- 2_and_at.svg
- 3_and_hash.svg
- 4_and_dollar.svg
- 5_and_percent.svg
- 6_and_circumflex.svg
- 7_and_and.svg
- 8_and_asterisk.svg
- 9_and_bracket-left.svg
- a.svg
- angle-bracket-left_and_curly-bracket-left.svg
- angle-bracket-right_and_curly-bracket-right.svg
- a--puny.svg
- arrow_down.svg
- arrow_left.svg
- arrow_right.svg
- arrow_up.svg
- b.svg
- backslash_and_vertical-bar.svg
- backspace.svg
- ball.svg
- birds.svg
- b--puny.svg
- button_cicrle.svg
- button_cross.svg
- button_down.svg
- button_left.svg
- button_right.svg
- button_up.svg
- c.svg
- caps.svg
- cat.svg
- checkerboard.svg
- comma_and_lesser-than.svg
- control.svg
- controller__circle.svg
- controller__cross.svg
- c--puny.svg
- d.svg
- diamond.svg
- dot-pattern.svg
- d--puny.svg
- e.svg
- ellipsis.svg
- enter.svg
- e--puny.svg
- escape.svg
- eye.svg
- f.svg
- face.svg
- f--puny.svg
- g.svg
- g--puny.svg
- grave-accent_and_tilde.svg
- h.svg
- heart.svg
- hourglass.svg
- house.svg
- h--puny.svg
- humanoid.svg
- i.svg
- i--puny.svg
- j.svg
- j--puny.svg
- k.svg
- k--puny.svg
- l.svg
- lines_horizontal.svg
- lines_vertical.svg
- l--puny.svg
- m.svg
- minus_and_underscore.svg
- m--puny.svg
- music-note.svg
- n.svg
- n--puny.svg
- o.svg
- o--puny.svg
- p.svg
- period_and_greater-than.svg
- plus_and_equals.svg
- p--puny.svg
- q.svg
- q--puny.svg
- quote_and_quotes.svg
- r.svg
- rectangle.svg
- r--puny.svg
- s.svg
- sawtooth.svg
- semicolon_and_colon.svg
- shift.svg
- slash_and_question.svg
- space.svg
- s--puny.svg
- star.svg
- t.svg
- tab.svg
- throwing-star.svg
- t--puny.svg
- u.svg
- u--puny.svg
- v.svg
- v--puny.svg
- w.svg
- w--puny.svg
- x.svg
- x--puny.svg
- y.svg
- y--puny.svg
- z.svg
- z--puny.svg
