The unofficial Joplin Styleguide project

Apps
1

The (unofficial) Joplin Styleguide Project

(Not technically an #app as such unless you count HTML and CSS as a programming language but this category is probably the closest fit I can think of with the intention of this little project)

So this is a small project I've been working on mostly for selfish reasons:

  1. To practice and play with HTML, CSS and SASS
  2. To help with my own research into Joplin theming
  3. Because...

This is a very, very, very basic and early iteration that only shows basic colours. There are plans to add other areas, the iconography + typography areas in particular as well as reusable UI elements.

The raw files contain comments with more data like the root theme elements that match as well as examples of each element in use within the application.

More information is in my GitHub where I'm storing this stuff.

Let me know what you think? Worth continuing and adding the occasional update here? I'll probably add to it in the background either way for my own purposes.

Below are a couple of small snips of it, but it is definitely not exhaustive or finished (the repo has a todo list of the endless things that I would still need to / want to add).

image
image1001×958 79.2 KB

image
image1001×903 65.9 KB

10 Likes
2

Glad to see that even though you have only achieved one of your objectives so far, it is probably the most important one when tackling something like this ... :slight_smile:

3 Likes
3

So I've updated it a bit since the initial version. Originally I was trying to identify different uses of things in the application but that just led to a huge mess of names and I couldn't work out where to go next.
So I've redone the classification entirely and based it off the default joplin style code instead with the idea to try and classify it in a more "atomic" way so that the later components can be identified using those base classes.

I've also added a font section which needs an awful lot of work still. Just in the default application (without taking into account all the font sizes (other than the plain/default) within the actual notes themselves) I have identified 15 unique font styles (combinations of font-family, font-size, font-weight and font-style) but I'm yet to fully work out which fonts are inherited on different systems over others.
Those combinations don't take into account the colour - not even within the light theme which is the only one I'm targetting for the moment with the dark theme to come once I can figure just one out.
If you are interested in what is used where I have listed examples in comments in the html file against each of the divs for the font lines.

An example of what I've added:

image
image528×632 47.3 KB

3 Likes
4

15 different font styles?? I guess it's time to clean this up a bit.

Rather than a general "Joplin styleguide" (which could be understood as brand guidelines), your project seems to be specific to the desktop app at this point, is that correct?

5

Indeed, this is part of what I'm trying to find because at first view you might not notice some of them but what I would like to get to is a point where certain uses can be identified for unification under a single font variable rather than them being defined separately but I'm a long, long way from that yet.

Nope, I'm somewhat masochistically going to attempt the whole shebang, its just that so far all I've managed to document are desktop base colours (and I don't even have some of the custom ones not defined on root for those yet) as well as the fonts. This is actually why it has a section container of "Joplin Desktop" precisely so I can go on and reuse the CSS + HTML for mobile + website.

The guide itself uses the montserrat font as a nod to tie in with the Joplin website maybe as its unifying font style, its identity. Same thing goes with the Welcome screen I made, using the website as a baseline for the brand identity and trying to base things on that. (The rest of the guide doesn't follow this yet as I just wanted some basic containers, prettying up can come much later).

1 Like
6

For information, the 16px font has now been removed, and replaced with 13px, which should make the font sizes a bit more consistent.

By the way did you keep track of where you saw these fonts? I guess some are very common, like the 13px one, but others perhaps only appear once or twice, in which case we could try to change them to something more standard.

7

Cool, I'll have a look and adjust where appropriate.

I haven't had a chance to continue with this in a while due to time commitments and some other things getting in the way but I do plan to continue.

I did take stock of example places of those fonts, yes. I stored them in html comments on the main html source:

        <div class="desktop-font-1"> Desktop font 1 - Roboto(?system dependant?), 13px, bold </div> <!--Example: Notebook list title-->
        <div class="desktop-font-2"> Desktop font 2 - Roboto(?system dependant?), 13px, normal </div> <!--Example: Notebook list items-->
        <div class="desktop-font-3"> Desktop font 3 - Roboto(?system dependant?), 12px, normal </div> <!--Example: Note list items, search box-->
        <div class="desktop-font-4"> Desktop font 4 - Arial(?), 18px, bold </div> <!--Example: Note title - why is this arial?-->
        <div class="desktop-font-5"> Desktop font 5 - Avenir(?), 15px, normal </div> <!--Example: MD editor plain text - font not free so many will default to Arial as a fallback-->
        <div class="desktop-font-6"> Desktop font 6 - Ubuntu(?system dependant), 13.3333px, normal </div> <!--Example: button text. Assume this is based on a system heirachy too -->
        <div class="desktop-font-7"> Desktop font 7 - Roboto(?system dependant?), 13px, 500 </div> <!--Example: Settings page headers-->
        <div class="desktop-font-8"> Desktop font 8 - Roboto(?system dependant?), 12px, italic </div> <!--Example: Settings page comments-->
        <div class="desktop-font-9"> Desktop font 9 - Roboto(?system dependant?), 14px, 500 </div> <!--Example: Settings sections-->
        <div class="desktop-font-10"> Desktop font 10 - Roboto(?system dependant?), 15.6px, bold </div> <!--Example: Sync status items-->
        <div class="desktop-font-11"> Desktop font 11 - Roboto(?system dependant?), 18px, bold </div> <!--Example: Sync wizard header-->
        <div class="desktop-font-12"> Desktop font 12 - Roboto(?system dependant?), 27.2px, bold </div> <!--Example: Sync wizard titles-->
        <div class="desktop-font-13"> Desktop font 13 - Roboto(?system dependant?), 16px, normal </div> <!--Example: Sync wizard text-->
        <div class="desktop-font-14"> Desktop font 14 - Roboto(?system dependant?), 16px, italic </div> <!--Example: Sync wizard text2-->
        <div class="desktop-font-15"> Desktop font 15 - Roboto(?system dependant?), 11px, normal </div> <!--Example: Notelist Sync messages-->
1 Like
8

Great, thanks. The note title being Arial indeed seems inconsistent. I wonder if we could make a mini project for GSoC with this, to basically make the UI fonts more consistent.

1 Like
9

I can think of worse ideas but is there enough "meat" there for a project? (bear in mind this project has mostly come from dev tool element inspection rather than digging through the source code so I don't have a good grasp of the extent of this.

Eventually I'd like to get to a point with this where this could start to be reduced to the point where one could define an actual design system/pattern library/design languague (whatever the actual technically correct term is) with modular and reusable elements (i.e. modal dialogs have x font, y buttons in z layout) which would have the benefit of making life easier (and more consistent) for all kinds of things - new ui features, plugins, "third party" apps & tools, theming support etc.

10

Yes that would be too little for a full project, but I meant a mini project, so more like a first pull request so that the student can get used to the code base. I guess we could simply create an issue with the "Good first issue" label for it.

That would definitely be useful, and would also inform future design updates because a designer could start from that document to get an overall view of the design system.

1 Like