search

jwstegemann / fritz2

Easily build reactive web-apps in Kotlin based on flows and coroutines.
https://www.fritz2.dev
MIT License
664 stars 29 forks source link

Easier documentation on CSS import #745

Closed violabs closed 1 year ago

violabs commented 1 year ago

I am having a hard time finding information on where exactly to add css and how to get top level or components to connect with it.

Perhaps there is a simple place to put a Styling example page or, if it exists, have it in the getting started as a link.

ghost commented 1 year ago

As fritz2 is totally agnostic of Styling, there is no generic solution and thus I cannot imagine, how to document this.

For your own CSS classes, you can just add them in the index.html file or a separate CSS-file within src/jsMain/resources folder.

For tailwindcss we offer a dedicated template btw - this should work out of the box.

For embedding bootstrap, just have a look at our examples. Most of those use bootstrap, so it should be easy to integrate into your template html file. Here is the link to the getting started example.

Does this solve your problems?

If not, can you specify your problem?

violabs commented 1 year ago

Hello! Thank you for your response.

All of the documentation was great! I think I started down a rabbit hole of excitement, and started on some tutorial document. Then as I wanted to expand on that I looked at other documentation and tried to add the Tailwind CSS stuff. Adding it separately didn't go as planned, so I just reverted to plain CSS.

It was easy enough to add to the index (great suggestion), and I figured putting them in resources would work due to past JSP stuff, but I think if I didn't have that knowledge it would be harder to find out.

I think just a general location anywhere that addresses the CSS agnostic stance, but the "known" solutions to adding css.

I was trying to add clarity UI, but it requires javascript to work full and I gave up since I want to actually learn the framework over configuration. This is an aside, but that was what led me to try to figure out how exactly gradle compiles external css and js.

ghost commented 1 year ago

Have you tried to use the tailwind-template project? You simply wont have anything to set up within the build configuration but you can start right away with tailwind and fritz2 :-)

Are there any question open in this issue? Or can we close it?

violabs commented 1 year ago

After a bit of trial and error I was able to get the tailwind css to work. Works great so far (still a bit of a learning curve but sure beats css direct).

On a separate note, I couldn't get multiplatform to play nice with fritz2 + springboot. I kept having gradle issues and other import problems with IntelliJ. I ended up just doing separate projects (non multiplatform for now since that took 2 days to troubleshoot).

You can close it if you want - still would be nice to have a dedicated spot about css and where the entry points are (even if it just points back to kotlin JS). It could also have entry point info on additional js file (I haven't started to look how and don't need to yet).

ghost commented 1 year ago

After a bit of trial and error I was able to get the tailwind css to work. Works great so far (still a bit of a learning curve but sure beats css direct).

So you needed additional work to run our template? Details would be nice, since this should not be needed though. Every time I have used the template, I had no issues with TW - it just worked.

On a separate note, I couldn't get multiplatform to play nice with fritz2 + springboot. I kept having gradle issues and other import problems with IntelliJ. I ended up just doing separate projects (non multiplatform for now since that took 2 days to troubleshoot).

Have you looked into our example projects? Iirc the Todo-Mvc-Demo offers also one variant based upon Spring for the backend. This could offer a hint for you, how to structure such a project. Iirc we used a multi module approach.

You can close it if you want - still would be nice to have a dedicated spot about css and where the entry points are (even if it just points back to kotlin JS). It could also have entry point info on additional js file (I haven't started to look how and don't need to yet).

Ok, I will discuss this with my team mates. A rather short, but dedicated section might make sense in the documentation.

If you are motivated and want a fast solution, feel free by yourself to create a pull request for this topic :-) I think this section would either fit directly a the Getting Started page or at the end of the overview section.

violabs commented 1 year ago

So you needed additional work to run our template? Details would be nice, since this should not be needed though. Every time I have used the template, I had no issues with TW - it just worked.

I think it was a mixture of importing the information into a Multiplatform project, as well as some of the weirdness in structure. Works great on its own.

Have you looked into our example projects? Iirc the Todo-Mvc-Demo offers also one variant based upon Spring for the backend. This could offer a hint for you, how to structure such a project. Iirc we used a multi module approach.

I will give that a shot - I looked but must have missed it. I am wondering if it is an IntelliJ issue or my own since I have tried the multiproject with spring 3 or 4 times in separate restarts and no avail. The modules weren't getting picked up and couldn't import/index correct.

Sounds great. I may do that after a bit more experience with it. Thanks for you response!!