Recommendations & suggestions for integrating (CSS) frameworks

[dekaSW]

Hey guys, 👋

I recently found FlyntWP and consider using it for upcoming web projects.
It looks really promising and thoroughly built!
Thank you very much for sharing and maintaining.

I'm still struggling if it would be the right choice given that it does many things differently as it's built upon Timber.
Similar to other projects (ie. sage theme) this might come with it's downsides as the overall theme structure is heavily extended/modded compared to WP theme defaults.

Anyway, one step that would further boost productivity is the integration of additional frameworks or projects that help in a more rapid and consistent development.

What's your experience or opinion on extending it with frameworks like current versions of TailwindCSS, Twitter Bootstrap or even Shoelace web components just to name a few?
Is it even a good idea?
Or does it bring its own downsides and does it create new problems that first need to be solved.
Unfortunately, I haven't much information about this topic yet.

Looking forward to your experiences and point of view. 🙏

[xyeres]

Hi Deka,

I am not a contributor nor maintainer of flynt, this is more of a 'hey flynt is awesome, give it a try'-- my agency recently 'tested' flynt in a client project and it was such an amazing experience we decided to adopt it for all projects (of course there can be exceptions) moving forward (And we've tried a LOT of starter projects). We have quickly become very fond of flynt and its architecture. It's incredibly well organized and easy to extend. I would say learning Twig / Timber is a massive productivity boost-- not only is it faster to write, separating the view from the logic has creates a codebase that is much easier to read, write and maintain. One could say it's enjoyable.

As for the CSS frameworks, I personally see no reason why you shouldn't try integrating Tailwind or similar. It would be an easy enough setup.

Integrating another component library may have some challenges to it but I have not attempted that with flynt. I would build a couple components the flynt way and see how it feels. You'll start to see how other tools and libraries can work together with flynt.

[dekaSW]

Hey, thank you very much for taking the time and sharing your experience with flynt!
Overall it looks very well coded and structured and I'll have some (more) tests and see how it goes.

At first I was a bit unsure if registering all acf fields programmatically but on the other hand, this yields a consistent and documented data structure even though it might be less intuitive that using ACF's own UI.

Regarding additional frameworks or libraries, it should be doable most of the times depending on the config/setup steps that are involved. Tested a little with shoelace.style web components and that worked.

I'll take your advice and will see how it goes building upon this fine starter theme. :)

[johnquest]

Can you explain how you develop locally with Flynt? I can't get the vite liveload to work both from DDEV docker and in an ordinary LEMP stack. Are there additional instructions for configuring nginx to work as a reverse proxy to the development url on port 3000?

[mattneal-stafflink]

This. I'm ready to ditch UnderStrap, but not quite ready to dive into Radicle by Roots.io, and Flynt looks amazing. It would be absolutely incredible if it came with BootStrap or Tailwind out of the box, though.

[steffenbew]

Hey there 👋 Our very early versions of Flynt were built with Twitter Bootstrap. Later, we switched to custom CSS to reduce the tech stack and CSS overhead / overwrites. But it's a continuing challenge to keep the core CSS minimal and easy to understand, while adding all the features we think are helpful for a head start in website projects.

As @xyeres said, you could just integrate other CSS frameworks. If I were to do it, I would probably remove all CSS in the styles/ directory and also all CSS in components/**/ and start rebuilding it from there.

Let us know when you succeeded! We would be especially curious to see a Tailwind version.

[purchasingtoolpak]

I have integrated Flynt with Bulma. However I do it on a component basis. For example, I added Bulma columns as an import to the main.scss. I am also using the Bulma Navigation for the drop down menu. I don't use any of the Bulma colors - I just replace them with the colors in the _variables.scss file.

Hope this helps.