Enforce a styling standard for Views #244

New issue

Open

opened 2026-04-13 07:43:03 +00:00 by a24timsv · 5 comments

a24timsv commented

2026-04-13 07:43:03 +00:00

Collaborator

Soon, after the weekly merge, the HiS color schemes will be implemented and has been tested on Cards. Views also needs to follow a standard so that the frontend doesn't look weird.

a24timsv added the

design

frontEnd

style

labels

2026-04-13 07:43:22 +00:00

b24krila commented

2026-04-14 11:59:03 +00:00

Collaborator

Could you clarify what you mean with the "standard"?
Should there be a fixed mapping of the palette variables?

such as this:

--color1 darkest/strongest fitting for headers?
--color4 lightest /contrast fitting for text?

Or am I completely off target.

Could you clarify what you mean with the "standard"? Should there be a fixed mapping of the palette variables? such as this: --color1 darkest/strongest fitting for headers? --color4 lightest /contrast fitting for text? Or am I completely off target.

a24timsv commented

2026-04-14 16:34:33 +00:00

Author

Collaborator

The standard that I think is need should document how, when creating a new CSS module, it should be made, or at least that it should be included in the review to reject anything that is "out of standard". This is really hard to put into words, but I hope I get my point across.

A very bad example could be our buttons. @b24johka has made a button component that is already styled and can be put anywhere. It uses the color palette that we have and it is all good. But since he is creating that button and CSS from scratch he could technically put any of the 4 colors from the palette. In light mode, he could color the button in the lightest color the palette offers, which would look terrible since the contrast of the colors would be so low that it might look invisible. This is kinda going into #183 as it both has to do with accessibility and the frontend looking good.

That is kinda the summary, a standard for components "looking the same".

As I understand it most cards as of now use the default styling of the Card's CSS module, which will use the standard HiS colors just like we want. But some Views might use special or custom components. I've seen that a custom component in one of the branches is WeatherGraph and has its own CSS module. I haven't really looked at it but such components should follow a standard so that they look like the regular Card, or as "good" as possible. The standard that I think is need should document how, when creating a new CSS module, it should be made, or at least that it should be included in the review to reject anything that is "out of standard". This is really hard to put into words, but I hope I get my point across. A very bad example could be our buttons. @b24johka has made a button component that is already styled and can be put anywhere. It uses the color palette that we have and it is all good. But since he is creating that button and CSS from scratch he could technically put any of the 4 colors from the palette. In light mode, he could color the button in the lightest color the palette offers, which would look terrible since the contrast of the colors would be so low that it might look invisible. This is kinda going into #183 as it both has to do with accessibility and the frontend looking good. That is kinda the summary, a standard for components "looking the same".

a24timsv commented

2026-04-14 16:40:52 +00:00

Author

Collaborator

Also it is important (and maybe a help) to follow the guidelines the University has on its colors.

The webpage should implement a grid layout with rearrangeable and resizeable cards. Cards should be customizable with University colours or pictures.

UI elements should be using the University’s colours, accent colours are allowed where applicable, main body where the cards are located should be white. However if dark themes are implemented the main body should be dark gray to black. On the webpage the University’s logo has to be visible. Here is the link to the University's offical logos in all the different colours of the university colour palette

The University’s colours should always be visible somewhere on the webpage, the chosen colour palette may not be mixed with the other colours only other hues of the same colour.

According to the University’s graphical guidelines the fonts that should be used are AGENDA or TRUMP MEDIAEVAL, AGENDA for headlines and TRUMP MEDIAEVAL for body text. If the fonts are unavailable for any reason ARIAL is a suitable replacement for AGENDA and GEORGIA is a suitable replacement for TRUMP MEDIAEVAL

Also it is important (and maybe a help) to follow the [guidelines](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design) the University has on its colors. >- The webpage should implement a grid layout with rearrangeable and resizeable cards. Cards should be customizable with University colours or pictures. >- UI elements should be using the University’s colours, accent colours are allowed where applicable, main body where the cards are located should be white. However if dark themes are implemented the main body should be dark gray to black. On the webpage the University’s logo has to be visible. Here is the link to the University's offical logos in all the different colours of the university colour palette >- The University’s colours should always be visible somewhere on the webpage, the chosen colour palette may not be mixed with the other colours only other hues of the same colour. >- According to the University’s graphical guidelines the fonts that should be used are AGENDA or TRUMP MEDIAEVAL, AGENDA for headlines and TRUMP MEDIAEVAL for body text. If the fonts are unavailable for any reason ARIAL is a suitable replacement for AGENDA and GEORGIA is a suitable replacement for TRUMP MEDIAEVAL