As a developer, I'd like to know which frontend libraries and coding conventions to use

[tuokait]

E.g which solutions for writing styles we want to use

• plain css?
• sass?
• styled-components?
• tailwind.css?
• something else?

and which component library we want to use as a base for our UI, if any (previously #291)

• Bootstrap?
• Material UI?
• Zendesk Garden?
• etc.

but also other libraries / conventions / solutions can be discussed in the comments.

288

[pallost]

The HSL style guide can be found from here: https://tyyliopas.hsl.fi/

[pallost]

There also seems to be an existing HSL component library but it's for mobile devices and was abandoned 4 years ago: https://github.com/HSLdevcom/shared-components

[pallost]

As I can see from the HSL style guide, there aren't many components whose style are actually defined: https://tyyliopas.hsl.fi/d/h8JR9dHeqfgd/digitaaliset-palvelut#/elementit-ja-maeaerittelyt/komponentit This would allow us to use basically any component library if we wish...

Personally, I don't want to use Material UI, because its coding style is very restricting. You cannot easily overwrite its CSS with the style or class attribute, you have to use its build-in CSS definition system. It's a steep learning curve to learn what all DOM nodes you need to create for a more complex design (e.g. look just here: https://material-ui.com/components/cards/). It's not very customizable either...

Personally, I would choose bootstrap because it feels light and easily customizable for most components.

[pallost]

For the CSS usage, I don't want to use plain .css files, because we'll almost certainly hit a wall at some point where we want to implement something that is not possible / annoying / very hard with plain css.

I've had some bad experience with SASS, because it needs a whole massive compiler toolchain with it (even gcc if I remember correctly). But I'm not against it either...

Tailwind is weird concept, but I liked it in the end in the previous project...

I would be interested in trying React's build-in CSS-in-JS system: https://reactjs.org/docs/dom-elements.html#classname

I haven't used styled-components, so I cannot form an opinion about it. It certainly looks like a horrible syntax to me but that's something I could live with :)

[haphut]

I expect you two have more experience on this topic. I'll share my two cents, anyway.

Agree with @pallost on not using Material UI due to its inflexibility. I've seen Bootstrap used for delivering satisfactory results quickly with reactstrap.

I've understood that the trend is toward unstyled component libraries like Base Web or Headless UI. Might be easier than overriding existing styles. Base Web uses its own styling solution, Styletron. Headless UI uses Tailwind CSS.

If ELY-keskus and others will use Jore4 codebase, they will require support for styling the UI according to their own brand.

[haphut]

Here's an example of quite specific guidelines from HSL: https://tyyliopas.hsl.fi/d/h8JR9dHeqfgd/braendi#/muotokieli/muotokieli-ja-sommittelu

"Yhtenäisen tyylin luomiseksi käytetään yksinkertaisia sääntöjä kulmien pyöristyksen koon määrittämiseksi. Pyöristetyt elementit eivät ole toistensa sisällä vaan sisäkkäisissä yhdistelmissä käytetään teräväkulmaisia elementtejä yhdessä pyöreäkulmaisten elementtien kanssa. -- Kulmapyöristyksen säde on enintään 1/5 suorakulmion lyhimmästä sivusta."

Yes, that link is not for the digital services. Those guidelines have been created after the brand styling. But could be something to think about when browsing the component libraries. Considering that we are building an UI that is not for consumers, I'm personally not fussy about the margins.

[pallost]

This Base Web and Headless UI is actually a pretty smart approach, I like that

[tuokait]

Characteristics of good CSS/styling solution

These are my opinions. Someone else might have different opinions.

Located close to the place where they are used

• Easier to see if styles are used or not
• Harder to forget unused styles to codebase

Scoped to one file

• Styling won't leak to other places and cause surprises

Enforce consistency

• Enforces using consistent margins, colors, font sizez etc.
• Makes it more difficult to e.g. create new font size

Theming/variable support

• Provides single place for font sizes, colors etc. so that they don't have to be defined in every single component

(Possibility for 1-off hacks if needed)

• If there is need to do to something weird in one place, that should still be possible

Some popular libraries to consider

(not in particular order)

"Styled-components family"

These use styled-components internally or are inspired by it.

• https://styled-components.com/
• https://emotion.sh/docs/introduction
• https://chakra-ui.com/
• https://garden.zendesk.com/

"Tailwind family"

Tailwind + related libraries.

• https://tailwindcss.com/
• https://tailwindui.com/ (Component library for Tailwind. Requires payment! Examples: https://tailwindui.com/#product-application-ui)
• https://tailwindcomponents.com/ (Example components for tailwind, but not bundled into a component library)
• https://headlessui.dev/ "Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS."
• Blog post from author of Tailwind

Other

• https://getbootstrap.com/
• https://linaria.dev/ "Zero-Runtime CSS in JS"
• https://www.w3schools.com/w3css/defaulT.asp# "A Quality Alternative to Bootstrap - W3.CSS is Smaller, Faster and Easier to Use."

[jschummer]

Would storybook be an option for us?

Does it cause too much overhead if we don't want to develop a generalized component library?

[haphut]

Is https://react-styleguidist.js.org/ a relevant alternative to storybook?

[haphut]

A decision was reached in Slack and in the architecture meeting to use Tailwind CSS and Headless UI for styling and components.

[haphut]

As adding Storybook does not block working on the UI right now, I've added a separate idea issue about it in #305 .