Hedy Website Style Guide

[Felienne]

As @reedspool pointed out in the meeting this week, we very much lack a "style guide" for what things should look like.

An example of similar things looking different.

My programs:

White background, yellow border, table like properties on top:

Profile page:

Yellow or grey background, only title on top:

Some of these decisions might be very sensible (I guess I need more info on "my programs" than someone else might needs on
"public profile" like date last edited) but I am pretty sure these were not made on purpose everywhere.

Here is another example from the teacher backend.

For teachers

Grey border:

Class page

Yellow border:

Add students

No border, larger font

[Felienne]

None of this is really a problem, hundreds of teachers happily use Hedy, but 1) it does not really look professional and 2) it makes the lives of (new) programmers harder since you can't easily know what to default to.

So I guess what we need is:

• Decisions being made about what style to use by default
• Document these somewhere
• Refactor what we have towards that new style

I don't really have strong preferences about style but maybe someone else does (@reedspool? @TiBiBa?)

[reedspool]

I think this is a great idea!

I have two ideas that raise the complexity a bit but will hopefully lead to better consistency:

1. Start refactoring to use jinja include more, turning duplicated HTML into reusable components in their own template files.
2. Make the style guide into an actual page on the website which includes all these components

[Felienne]

I have two ideas that raise the complexity a bit but will hopefully lead to better consistency:

1. Start refactoring to use jinja include more, turning duplicated HTML into reusable components in their own template files.

The way I understand include in jinja is that is renders HTML, what you mean is maybe import (https://ttl255.com/jinja2-tutorial-part-6-include-and-import/)? But yeah the basic concept for sure it what we want!

2. Make the style guide into an actual page on the website which includes all these components

Yes!!

What do you think is a good path forward? Sit and think and make a guide first, or poke around the code and try to centralize a few things first?

[reedspool]

Either include or import will work. Include's easier because you don't have to deal with the macro syntax. But the goal is to actually render both on the original page and the new theoretical style guide page. Though can you give parameters to includes? If not, then imports win.

I think a good starting point would be to recreate the list and words and images that you started this thread with on a live page, like hedy.org/style, without actually duplicating any HTML. this will require moving the existing chunks of HTML into their own templates to be include/imported.

[Felienne]

Either include or import will work. Include's easier because you don't have to deal with the macro syntax. But the goal is to actually render both on the original page and the new theoretical style guide page. Though can you give parameters to includes? If not, then imports win.

Sounds like you already know more than me!

I think a good starting point would be to recreate the list and words and images that you started this thread with on a live page, like hedy.org/style, without actually duplicating any HTML. this will require moving the existing chunks of HTML into their own templates to be include/imported.

ah cool a live guide on the site?! I was thinking a written guide but your idea is even better!