Tailwind CSS with OpenMage

[addison74]

Until this year I used in Magento Bootstrap 3 and 4 Frameworks and I was very happy with the results. Mainly the responsive grid then the other components such as cards, buttons. In February I started evaluating Tailwind CSS and I can say that using it every day I got to appreciate it more and more. Tailwind is used in the class attribute of an html element. Also it gives you the ability to create more custom styles. It's absolutely fantastic. The Magento styles.css file is entirely removed.

It would be an interesting project if we could clean all the RWD and Base phtml files from inline styles and classes, Then add Tailwind to the html elements. At the end with Purgecss the final css file will be dramaticaly reduced to only the classes used in phtml files. What I really like is that I no longer have to create in the style file media sections for each screen size, also in the class of an element I can define the behavior for each resolution. Who is interested in playing with Tailwind can do so online here: https://play.tailwindcss.com/.

Bootstrap is still a popular framework, but not as flexible as Tailwind. Bootstrap themes tend to be similar. I don't dispute its advantages, the speed with which I can create visual elements in a page, but things are evolving and I think Tailwind is a winner. The debate is only about how you see the classes of an html element. Either you do it in a file as before, or inline. Then how easy can you make the changes. My personal opinion so far is that changes are much faster with Tailwind

[Flyingmana]

From a maintainer perspective I wonder, what could we do, to make maintaining such themes easier.
Getting rid of all the inline styles in not so much of an issue. But using css-framework specific class basically means, such a theme needs to overwrite nearly all of the templates.
For itself, this sounds not like a big issue, but we already had cases, where we needed to change/fix things in template files. And this usually would need to be applied to all themes, which did overwrite the same files.
It sounds wrong to need to overwrite the whole template for just adding class elements.
So I wonder, is there maybe an alternative we could establish for such themes?

Would it be sufficient, to allow enriching templates/blocks with class elements?
Do we need something more abstract, which allows to add classes or even more by html manipulation on block level?
(like add class "grid" to "div>div" of block "list.phtml")

[aterjung]

Hi, I guess everybody has already noticed the hyvä M2 theme where tailwind is used. From my point of view, the way they did it is the only way to take profit out of it. Adding tailwind classes on to of the existing will add complexity, but it does not remove any. The m1 html is even More outdated than luma - I can’t imagine how that should bring any benefit. Personally, i would like to see a new template total build from scratch with tailwind - and probably alpine JS just like hyvä for OpenMage. But that’s a hard pice of work to do, and nobody will use this in existing installations, cause it will break nearly every extension available. In M2 there is some potential that extension devs will adapt there work if hyvä growth bigger, for OpenMage i am not to sure this could happen. From a bigger view, if OpenMage derives to a more future proof code base, get rid of Zend1 for example, a theme like this without prototype and a small and modern html base could be very attractive for smaller customers. A lot of work. Diplom Wirtschaftsinformatiker (FH)

…

Am 21.09.2021 um 00:53 schrieb Daniel Fahlke ***@***.***>:  From a maintainer perspective I wonder, what could we do, to make maintaining such themes easier. Getting rid of all the inline styles in not so much of an issue. But using css-framework specific class basically means, such a theme needs to overwrite nearly all of the templates. For itself, this sounds not like a big issue, but we already had cases, where we needed to change/fix things in template files. And this usually would need to be applied to all themes, which did overwrite the same files. It sounds wrong to need to overwrite the whole template for just adding class elements. So I wonder, is there maybe an alternative we could establish for such themes? Would it be sufficient, to allow enriching templates/blocks with class elements? Do we need something more abstract, which allows to add classes or even more by html manipulation on block level? (like add class "grid" to "div>div" of block "list.phtml") — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[addison74]

Through the OpenMage project we try to take Magento 1 further, to be compatible with the new variants of PHP, MySQL, but we have never discussed about themes that are aging and require replacements.

At first I rejected Tailwind CSS which seemed complicated and I didn't like loading the html elements with classes but the few tutorials on YouTube made me curious to dig deeper and realize that this option is worth taking account. The intention of the discussion was not to change the current functionality of OpenMage but to assess whether Tailwind CSS could be added to OpenMage as a separate theme for Frontend/Backend in the near future.

There are some people who have asked for the implementation of Bootstrap for Backend, but as one who has used this framework and many others like Foundation intensely for a long time, I can say that it is not a very good idea. There are notable differences between Bootstrap and Tailwind CSS, which are very well explained if you search the Internet. The way Tailwind CSS was conceived as a first utility offers flexibility check its documentation here https://tailwindcss.com/docs/utility-first,

Such a tool in the hands of an advanced UI/UX developer will lead to noticeable visual improvements in a new theme. I am at the evaluation stage for using it with OpenMage because a client asked me for a solution to replace the actual theme and there are very few updated themes on the market. Many of them have already remained anchored at the level of 2014 - 2017.

Anyone with experience in creating new themes using modern technologies can express an opinion here.

[woutersamaey]

@addison74 I am considering building this since quite some time, but would also like to do a few more breaking changes at the same time. So far, OpenMage has kept me back on the things I wanna do and I was thinking of forking OpenMage.
If OpenMage wants to be a drop-in replacement, that is fine, but now that Magento/Adobe let go of it, we can do amazing things and fix the shortcomings not even fixable in M2.

I have 3 pages worth of ideas for the future of OpenMage, but am still looking for funding/livelyhood.

[addison74]

Honestly, once Adobe made the announcement, many did not think that there was an alternative to Magento 1. Some were even forced to migrate spending a lot of money. I like Magento 2 but it still has a lot of issues and the team has a way of analyzing them not at all friendly.

We have this Discussion section where you can post all your ideas. In turn I released the Issue section of ideas and new features that I posted them in the Discussion section. I don't know how long this project will last but it's worth a try.

The problem I see is the abandonment of some important developers to provide extensions and support for Magento 1. Otherwise, the code can be updated periodically according to PHP/MySQL changes. A skeleton for a theme can be made and from which new themes will result. Unfortunately we still have many issues and PR's open for a long time, some even important to be introduced in the code.

[aterjung]

Is there any reason to not start a new theme as a separate repo? An integration into OpenMage would be easy if it can be shown that this is possible and a great improvement, as log this will not break the legacy theme. I would really like to be part of a development like this.

[aterjung]

@addison74 if you mean as long as the goal is to be BC to the rest of the M1 Universe, then i would agree.

If cutting the roots is acceptable, then i think it can be done. It might hurt hard, but it's possible. Here is a startingpoint: https://blog.vianetz.com/2021/magento-remove-prototype/

If we are going to rebuild a themes HTML from scratch, thats not too strange ;-)

[addison74]

I can't agree with the removal of Prototype because there are many extensions that depend on this library. I recently installed one and it was extremely complex. Ideally we should remove it and be able to migrate these extensions but I am afraid that there is no more enthusiasm for such a thing. Look we are left with up to 20 people who are still interested in this project.

[aterjung]

yes, that is what i mean with backward compatibility. I would guess that 98% of all OM users use it as a replacement for M1 on legacy projects. There is no need for a OM version that breaks with everything. It is hard to imagine that anyone is willing to drop of all the extensions they are using.
This would lead to a new Shop System no longer compatible with Magento 1.

[woutersamaey]

A new shop system sounds good to me honestly. M2 is too heavy for most and M1 has a lot of stuff available. Sure, some adjustments and refreshing may be needed, but as a dev, I don’t mind.

[addison74]

If everyone has heard of React, Vue or Angular, it seems that some have seen the issues that each brings. There is more and more talk about Svelte these days. I didn't know about Alpine JS, but I quickly viewed some presentation on YouTube. Thanks for the tip. The creator who is a young full stack developer realized that something much easier was needed.

A combination of Tailwind CSS and Alpine JS is interesting. It is fabulous not touching the css/javascript files and to do everything quickly directly in html. A lot of time was wasted moving around. We can make some drafts for clients extremely quickly without the need to use the traditional frameworks.