feature: style sheets/customizable UI

[jim-obrien-orig]

As someone who volunteer teaches CS, the UI is difficult to see, the menu elements are too small and hard to click on, for both the students, and when I'm helping them. The black background is not good. The block chooser menu is way too small. I'm also a developer - and not sure why style sheets are not separated from the display logic. It would be good to allow importing or overriding of styles. To me, this is not a minor issue. I recommended switching to scratch because of this, but it would have been difficult to change the curriculum in the middle of the year.

Proposal; stylesheets external to gui.js (sass to css). The ability to import a style sheet. The ability to reset to default style sheet.

[brianharvey]

You are pulling at the end of a long thread. Snap!'s widgets are not DOM widgets; they are generated by Morphic, a widget manager that originated in Smalltalk but now runs in JavaScript. So what you're suggesting would entail a complete rewrite.

[jmoenig]

two issues here: (1) how to customize Snap! so (a) things are larger and (b) the background isn't dark, and (2) how to write right software, separating views from style.

Not gonna respond to (2) because I dunno :-)

But hey, you can totally solve (1) yourself:

There are 2 ways to make things larger in Snap!.

My favorite one is to just use your browser's "zoom in" feature. Initially the pixel resolution will stay the same as the elements become bigger, making them slightly blurry. But once you reload the Snap! page everything gets rendered in the optimial - higher - resolution. You only have to do this once. Next time you open Snap in the same browser the chosen zoom level will automatically reappear.

You can also just zoom the blocks in Snap's settings menu. This feature is meant for teachers who would like to print out high-resolution posters of scripts to hang on their classroom walls. But it also increases the drop-down menus.

Finally, if you don't like the dark background and the 3D-ish (slightly skeuomorphic) blocks you can chosse "flat design" in the settings menu, and things will look more "modern". This setting will also be remembered by the browser, so next time you open Snap you'll again have it.

[jmoenig]

@jim-obrien-orig In the past years did you ever change style sheets in the Flash-based version of Scratch 2? Does Scratch 3 allow you to edit style sheets? Are you finding Scratch 3's block labels easier to read than Snap's?

[jim-obrien-orig]

@brianharvey Point well taken. Maybe stylesheet isn't the best approach - possibly a yaml config that specifies some customizable options? @jmoenig The zoom - I didn't think worked because shft-CMD-+ seemed disabled, but in chrome, view->zoom does work. That is helpful. To your second point, I haven't been using scratch - I have looked at it for example projects. I'm not sure if it was customizable in the flash version and i believe the current version allows enlargement or shrinking only, but I do find the UI easier to navigate. The blocks are bigger by default. They display better on a projector. The block menu with the left choices (which are bigger) is easier to read. The whitish and light gray backgrounds make the blocks easier to see and in general the color scheme is more inviting I think. My students have tiny chromebooks with mousepads, so even they have difficult with the smallness, but .trying to see and instruct while standing up for me is nearly impossible even with double my normal reading glasses. I was thinking of forking the project and setting up a server that starts up larger. I don't have control over the chromebooks because I'm a volunteer. Thanks for all your help.

[jguille2]

Hi @jim-obrien-orig ,

Only an extra info...

You can use the zoom shortcut keys ([Ctrl]+[+] and [Ctrl]+[-]) when you change the focus outside the canvas. So, if you click on the url bar (as if you wanted to change the url), you can change the zoom using those shortcut keys.