A new theme and UI kit for EasyAdmin

[javiereguiluz]

During the past months I've been working a lot on several backends made with EasyAdmin. Some were simple whereas others were highly customizable:

• The good news is that I haven't found many rough edges or blockers. Yes, there are lots of things to fix and improve, but I didn't face awful or very bad features/behaviors.
• The bad news is that creating custom actions/pages took lot of time and it wasn't easy to reuse design elements between them. I ended up with lots of repeated HTML and CSS contents.

I was thinking about ways to improve things ... and I think our biggest problem is our current template. In previous versions we used AdminLTE ... which we abandoned for EA3 because it looked dated and abandoned. Then we created a custom template based on Stripe, the most beautiful backend that I know of. The next step would be to create an "UI kit" based on that, to have a series of design components to design custom things. However:

• I won't ever have time for this.
• I don't think I'm skilled enough to design this.
• Even if we do this, it will still be a custom-made UI kit, which we'll have to fix/maintain/improve forever.

So, instead of doing that, I started looking for "UI kits" that are open source and beautiful templates. There aren't many, but I found one that I liked a lot: Tabler

• See demo preview
• See source code.

A few months ago it looked "abandoned", but it's regaining a lot of development activity and it's fully based on Bootstrap (they are aiming at the still unreleased Bootstrap 5). So, I think it's the perfect candidate to solve our problem.

I've started the migration of EasyAdmin to Tabler. It's far from finished, but it's progressing nicely. In addition to visual/design changes, I'm also making UX/UI improvements too. For example, in #4010 we were asked about adding a better paginator. Well, this is how the new paginator looks in my EasyAdmin+Tabler proof of concept:

Apart from this, having a "UI kit" like Tabler will allow us to create lots of design components so you can design your own backend actions/pages. My idea is to create Twig functions like this:

ea_theme_*(...arguments)

For example:

ea_theme_page_title(string $content, array $attr = [])
ea_theme_paginator(EntityPaginator $paginator, array $attr = [])
ea_theme_table(array $headers, array $rows, array $attr = [])
ea_theme_metric(string $value, string $label, string $subLabel = '', string $help = '', string $icon = '', array $attr = [])

And you can use those in your template like this:

{# attr is a list of HTML attributes applied to the parent HTML element of the component #}
{{ ea_theme_page_title('List of users of XXX', ['class' => 'text-large']) }}

Some of these functions will have lots and lots of arguments because the components are complex and very configurable. But, I don't think this is a problem thanks to Twig named params:

ea_theme_metric(value = num_users, label = 'New users', icon = 'fas fa-user')

The HTML of all these components would be defined as blocks in a single Twig template and the Twig function would render the appropriate block only. Like a Symfony form them but custom made.

So, what do you think of this proposal?

[recchia]

Hi, I'd like something made in tailwindcss, but if the requirement is bootstrap tabler seems ok

[javiereguiluz]

@recchia yes, I also prefer Tailwind CSS. The problem is that there are no open source "UI kits" for Tailwind CSS. There's https://tailwindui.com/ but it's proprietary.

In any case, Bootstrap 5 will include lots of utility classes like Tailwind CSS and I'm planning to add others for some things that I'll show later. Thanks!

[freepius]

Hi,

It's not easy for me to evaluate this big change, because I don't use EA enough to see all the blocking cases that you had (about creating custom actions/pages). I stayed in the EA classic using cases.
In my little experience, I was able to change enough the things (overriding templates, overwriting twig blocks, writing custom css, using the customization functions of EA...)

I see that it will be not easy to upgrade my previous projects to this new UI kit... It's my only (big) negative point. 👎

But Taber looks very nice. And I personalty prefer a lot bootstrap than Tailwind CSS (much to verbose for me, I prefer to write css instead). 👍

I'm curious to see how the ea_theme_* twig functions could be used (because right now it's not obvious for me).

Finally I think more reusability and a nice ui kit are never bad :-) 👍

So let's go! (if you need some help for that, be welcome)

NB: And other question is: how many time do you think a such migration can take for you?
Because I suppose that the others EA developments must continue too.

[creiner]

I am a little ambivalent...
on the one side tabler looks very good and appealing and easyadmin would definitly benefit from the change.
But on the other side I think there are some features I would give more priority to (for example PR #3543 ).

The macro way looks good and very helpfull, but sometimes I find using the twig embed (https://twig.symfony.com/doc/2.x/tags/embed.html) possibility more clearer and better to read (when using complex content).

Edit: one more thing: I would propose that this would be a change for a 4.x version.

[parijke]

I like the idea, altough the clean interface (bit boring now) suits me well. I noticed one thing though. Instead of creating special theme functions, can't we use the natvice twig symtax like:
{% include 'template.html' with {'foo': 'bar'} %}
to pass vars to ui components? That is how atomic design systems like PatternLab are doing it as well? It prevent making another dependency?

I am not a specialist in any way, so maybe I am wrong on this

Also, I am expecting something like Laravel Livewie in the near future. Your closer to the source than I am, but if these rumours are true, maybe wait a little bit?

[skianter]

Hope this is not a blasphemy... but have you ever considered react too?

[mahono]

I also think this is something for 4.0 together with Symfony UX and updated layout template(s).

At this time I think it's more important to focus on adding missing features like batch actions, file upload and improvements of association/embedded and even documentation of the various fields.

[Schyzophrenic]

Whilst I think it's great for the future, I'd be keen to have a more stable v3 with features such as Batches, File uploads and translations added as well as an enhanced documentation.

[tarjei]

One thing that I find mildly problematic about doing this in the 3.x branch is that it changes styling of admins that are in production. A good upgrade path is important if you choose to go this route.

[cmmata]

I like the idea! Didn't know Tabler, looks like an interesting option. I personally liked the change to EasyAdmin 3 because of the conversion to PHP files instead of yaml, but I disliked the UI. I think losing the responsive UI was a step backward, so I think this would be a very nice improvement.

[aleksblendwerk]

At this time I think it's more important to focus on adding missing features like batch actions, file upload and improvements of association/embedded and even documentation of the various fields.

I thought the same when reading this issue but was hesitant to write anything because I don't want to rain on anyone's parade... I can understand it's always tempting to revamp the layout - but I think EasyAdmin looks really nice as it is and not dated at all. At my day job, we recently presented a nearly uncustomized default-look EasyAdmin backend to a customer and they were completely amazed that they got a pleasant admin backend along with their website.

I would like to see comfortable and nice-looking ways of adding related entities - this has been demanded since 2.x, proposed for 3.x but never ended up in the final product. I really wish this would be added this time around. I think the team and community should concentrate on features that make EasyAdmin more powerful and easier to extend for now.

The other issue proposing more usage of Symfony UX seems enough for me to add some more spice and convenience to the UX for now.