Are there any plans to include alternatives to Bootstrap like Materialize, Bulma, and Tailwind (did see a thread or two on here about Tailwind)? We are seeing more and more applications built with these frameworks and a lot of Vue and React on the JavaScript side. Currently Wappler seems very reliant upon Bootstrap and would like to know what plans there are for accommodating the great alternatives out there? Also the possibility of a road-map for implementation so we can begin to prepare as we all know you good folks at Wappler don’t sit about on your hands! 
5 Likes
Tailwind would be cool as it doesn’t impose design rules.
I think it could be a good fit for Wappler.
3 Likes
Tailwind looks really nice indeed
2 Likes
We’re using CSS Grid and Flexbox a lot these days but Tailwind has caught our attention more and more in recent months.
The thing with Tailwind is that you have to add a bunch of classes to your HTML elements, to make it look as you want.
For example a simple blue button in BS4 will look like:
<button class="btn btn-primary">
Button
</button>
While to make it look similar in Tailwind you need:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
It’s a bit like using inline CSS to all elements.
Then you need to apply these classes on all the buttons across your pages … so instead of using a single class you apply/click/select all the options everywhere.
3 Likes
You can extract components and create reusable classes.
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-600;
}
</style>
With that in mind it would be awesome if we could design our own components using a WYSIWYG interface using mouse and controls(color, background, borders, etc).
Wappler would just need to translate our selections into component style using tailwinds classes.
And if you figure a way to link those user created components with App connect. Bam!
2 Likes
I know hardly anything about Tailwind, but after a very quick look, one thing that strikes me is that it is huge (initial size: 784kb, compared to Bootstrap: 188kb). I appreciate the idea is that you remove most of the CSS in production (which you could to with BS in the same way - but it’s not a trivial matter in any case). However, creating any sort of UI for so much code would be something of a challenge.
As @Teodor points out, it produces some pretty verbose code - and as Tailwind docs suggest:
Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it .
And it’s difficult not to think that - at least before trying it. I have no doubt I’m missing the point (and haven’t yet tried to grasp it), but I for one would be sad if such a project detracted from all the other features the Wappler team could, and no doubt, will deliver.
1 Like
You could use brotli in your web server or through a CDN and bring down the css size to 23 KB. Or if you need to provide support to IE 11 and older you could fallback to gzip and bring it down to 80 KB.
All in all, the size is quite contained for the power and flexibility it allows.
However the real potential I see here is if Wappler team figures out a way to integrate a WYSIWYG designer, tailwind and app connect so we can create our custom UI Kit or export one (like tailwind UI) and make it work out of the box.
Additionally Wappler could implement a tool like Purge CSS to remove unused CSS and create your production CSS file as small as possible.
Using gzip/brotli and something like Purge CSS you could potentially end up with a single digit KB CSS file size. This is aplicable to any CSS framework. Not just Tailwind.
1 Like
Incorporating a feature to reduce unused CSS, using Gulp etc., was suggested long ago and a feature request was made some time after that - but it only received two votes.
One of the difficulties in removing unused CSS is handling the cases where classes etc. are created dynamically with Javascript, PHP or even from a data source - ie the issue of adding exceptions. I’ve suggested that Wappler would be well placed to deal with this, given it will provide most of the relevant Javascript in many cases. It would be good to see something implemented - whether for Bootstrap and perhaps other frameworks in the future. However there will still be cases where using Purge CSS etc. will break things.
1 Like