Here’s my 2 cents on theming (please let me know if you’d prefer I post this in a new thread!):
I went ahead and wireframed out my thoughts on how the “bones” of the layout could be organized at the bottom of this post. As I mentioned, I think the design style is progressing nicely, so I don’t mean for this to be a comment on that. Also, I noticed that the designer has incorporated a lot more of the elements in V2, I made these before I saw that, so these are an iteration of V1.
My thoughts around theming:
Make simple theming easy for most people (a la Slack)
- By standardizing margins / font sizes / where colors are used, we can let people choose basic things like:
- sidebar color(s)
- highlight color
- font colors / styles / sizes
- padding (classic, compact)
We could apply those colors using tints so you could have nicely designed borders and things without having to pick every single color.
- For example, Slack let’s you change 9 basic theme colors + provides a dozen or so preselected color palettes.
Use CSS Grid to make it easy for “advanced” theme-makers to build themes for various purposes (including mobile)
-
If we do the heavy lifting of organizing similar items together (which I realize is easier said than done as a group!), we can use CSS Grid to make it easy for an advanced user to rearrange the layout.
-
For example, by defining:
#notebooks, #notes, #tags #editor-tools, #editor, #rendered, #navigation, #sync, etc, someone who really cares more about tags than notebooks could make tags the most prominent or move it to the right. Someone else could remove the rendered version completely. -
In my experience with mobile web (vs. native app dev), you can use this same idea to reorder the elements for mobile. Not sure how applicable reusing the layout code is in this codebase, but ideally the “simple themes” would work on mobile.
My take on the wireframes:
The buttons at the bottom show/hide the various panels (including a new panel for tabs)
I moved all the note navigation to the bottom (back/forward, breadcrumbs, tags).
Mobile, showing the reuse of layout:
