Spectre.css vs Something Else

At the risk of sounding like the cliche "noob with overzealous ideas":

The app loader and interfaces are great for interacting with the watch. I'd like to work on making them better, even if it was rejected it'd be a good learning exercise.

They use "spectre.css", so I figured I'd learn it. But Spectre appears to be abandoned, with a few struggling attempts to fork it.

Would it make sense to switch to something more widely used like Bootstrap? Especially before many interfaces are made that rely on it?

• Learning bootstrap is probably more useful use of brain space.
  
  • It might be something people already know.
    
• It'd keep things pretty and uniform-ish.
  
• It'd probably outlive spectre and be updated as html/css gets updated.
  
• It can switch to dark mode pretty easily.
  
  

Bootstrap is just an example, but basically interfaces made by programmers tend to look and feel terrible, so a guide/crutch is good. And the fewer frameworks I have to remember the better.

I can totally see the appeal of an easy switch to Dark mode, but what else do you think switching to Bootstrap would really improve?

The idea of using Spectre was really to have something very minimal that didn't need learning and to use the plain CSS and JS browser APIs where possible. From that point of view the fact Spectre.css hasn't changed over most of the 5 years the App Loader has been around hasn't been a big deal - it didn't really need to.

I feel like there's not really a lot to learn - there's 200 lines of HTML in https://github.com/espruino/BangleApps/blob/master/index.html and a few more in the JS at https://github.com/espruino/EspruinoAppLoaderCore/blob/364b2c1b00de17ffbbee87fb1d91e79b513b9127/js/index.js#L425-L483 that might reference some Spectre CSS, but it's all very straightforward

But other than that, that's pretty much it - it's just standard JS DOM APIs working with HTML.

I'm not entirely against using Bootstrap, but I'm not really sure what it adds in this case?

There's also the fact it's not just the Bangle.js App Loader, but other app loaders like https://espruino.github.io/EspruinoApps/ and https://jeffmer.github.io/WatchApps/ use it, plus all the apps that have a custom.html or interface.html file would need changing (and testing) too so it's potentially a decent chunk of work with a high likelihood of breakage.

I was mostly thinking it'd help with mobile, increasing control sizes. And then concerned that as new controls are added to html, it wouldn't be updated to match.

I just tested button size though, and Bootstrap actually made it a bit worse.

Then with Spectre, switching to a "btn-group" increased the button sizes... touché Spectre. It might be easier to work with than I thought.

(Screenshot of sleeplog's buttons, top is with btn-group. The 2x2 grid ends up being the size of my fingertip.)

1 Attachment

I think the chances of us needing to cope with new HTML controls are reasonably slim for the moment - we need to be able to run on Safari for iOS which probably won't support anything remotely new anyway :)

Usability tweaks for mobile would be great - at least being able to dump it on GitHub pages makes it pretty easy for others to test and report back.

Realistically what we do is pretty basic, so I imagine even if Spectre doesn't do stuff quite right it'd be pretty easy to fix it up with a few lines of CSS.

I had an "oh, duh" moment and remembered I could set the meta viewport tag to allow user-scalable=1 and bump the max to 10. Now I can just zoom as needed, even in gadgetbridge. 👍

(No idea what side effects it may have though, so only doing it to my own GitHub.)