A mess of styles

[shashkovdanil]

Problem:

Now there are the following challenges:

• many different approaches - global styles, modular styles within components, classes a la tailwindcss (is-flex and etc.), styles in .scss files and styles in components
• use of !important and inline styles, which is bad practice
• mix of css variables and scss variables

This makes all the styles in the project look fragile and a change in one place can break something in another.

Solution:

I suggest choosing one option and sticking strictly to it, my favorite solutions are tailwindcss or css modules

[roiLeo]

• many different approaches - global styles, modular styles within components, classes a la tailwindcss (is-flex and etc.), styles in .scss files and styles in components

Best is: overwrite oruga scss/css component class -> use helper class to change layout -> if helper don't exist then use css/scss

• use of !important and inline styles, which is bad practice

true, we should replace inline and use at least "!important".

• mix of css variables and scss variables

we've had a few problems with this when we setup theme colors, if you find an alternative (maybe using :root selector) I'll be glad to review it.

Solution:

I suggest choosing one option and sticking strictly to it, my favorite solutions are tailwindcss or css modules

The aim is to unify the components in a single library to create a design system that can be accessed via different interfaces. (libs/ui package).
I noticed that we have multiple times same style applied on some components (modal, sidebar etc..) which can be refactor in a single one component (imo more infos "how to" can be found in #1348)

[shashkovdanil]

@roiLeo is there anything I can do to help with the styles? Maybe I can create a css refactoring v2 task and fix some issues like variables, inline styles and remove !important?

[shashkovdanil]

Also I see that keen-slider and vue-tippy are used in the project, I think we can take these components from oruga and remove the unnecessary dependencies

[roiLeo]

feel free to open new issues if necessary, some stuff bothers me like custom css size & scoped style with global class name.
For example: #7957 with custom btn-height class

[roiLeo]

Also I see that keen-slider and vue-tippy are used in the project, I think we can take these components from oruga and remove the unnecessary dependencies

IMO replacement takes longer than you think

[preschian]

tailwindcss

Agree 👍

Actually, I also already raised a similar issue internally: https://github.com/kodadot/ops-internal/issues/1041. But I can't pick up this task yet since this is more about DX. I still have some backlog on the cf-workers side that faces the user side (higher priority). I would be happy if anyone could pick this up.

How to improve

I think the first step is to migrate to tailwindcss in our App. With tailwindcss and this viewer, https://tailwindcss.nuxtjs.org/tailwind/viewer can improve our DX.

Next step, remove/migrate inline CSS, global CSS, etc., that do not follow the guidelines

[roiLeo]

Oh you're right totally forgot that you can use tailwind with oruga, is it maintained? I can't find it on the next version of oruga.
Tailwindcss2 is kinda old now.

[preschian]

Yes, they did not update the demo repo. They only give the example of how to use tailwindcss on Oruga. This is how they use tailwind on oruga https://github.com/oruga-ui/demo-tailwindcss/blob/master/src/assets/oruga-tailwindcss.css

[shashkovdanil]

Wow, so you guys want to migrate styles to tailwindcss? If yes, I would be very happy to help you, I have experience in smoothly transferring large projects to tailwindcss. Would you mind if I start doing it?

[roiLeo]

Wow, so you guys want to migrate styles to tailwindcss? If yes, I would be very happy to help you, I have experience in smoothly transferring large projects to tailwindcss. Would you mind if I start doing it?

Would love to see a PoW, you can try to migrate a simple component (checkbox, radio or button)

[shashkovdanil]

Great! I'll create issue

[shashkovdanil]

Hi @roiLeo @preschian

UI lib migration to tailwindcss is coming to an end. What's next? This is the plan in my head right now:

1. Finish migration to tailwindcss, move NftCard and AudioPlayer to main project
2. Remove bulma and other global css from UI lib
3. Make sure the current components match the design. This will be collaborative work with @exezbcz
4. Add stories for all components, add all states to stories
5. Make the storybook public, so that the designer can open it at any time and look at it (I don't know if the storybook is now deployed on any domain or not).

Btw just question why historie and not storybook?

[roiLeo]

UI lib migration to tailwindcss is coming to an end. What's next? This is the plan in my head right now:

1. Finish migration to tailwindcss, move NftCard and AudioPlayer to main project

2. Remove bulma and other global css from UI lib

3. Make sure the current components match the design. This will be collaborative work with @exezbcz

4. Add stories for all components, add all states to stories

Kodadot is still using Bulma framework on frontend, we need a step to rewrite all Kodadot components to tailwind (remove/replace bulma helpers with tailwind equivalent)

5. Make the storybook public, so that the designer can open it at any time and look at it (I don't know if the storybook is now deployed on any domain or not).

#4464

Btw just question why historie and not storybook?

at the time we begin migration to Nuxt 3, the storybook plugin wasn't ready.
I don't have any issue with histoire package as I find it more easy to dev/review code compared to storybook.

[shashkovdanil]

Kodadot is still using Bulma framework on frontend, we need a step to rewrite all Kodadot components to tailwind (remove/replace bulma helpers with tailwind equivalent)

Okay, got it, I can remove it after removing bulma from UI lib folder. I'll think how I can do it step by step

[shashkovdanil]

Hi guys! Could you merge my PRs with updated components, it blocks me to continue work for this problem

[shashkovdanil]

#8222 first epic task is finished 🎉