How to use HTML templates in a Quasar project?
-
There are a lot of really beautiful HTML templates out there for all needs like creating admin panels, landing pages, blogs, ecommerces, etc. For example, Theme Forest sells a lot of them and it’s very cheap compared to having a professional designer.
Is there any way to just “import” such a template in a Quasar project? Or trying to use an external template in a Quasar project would generate a lot of CSS conflict and the right way is to recreate the design from scratch using only the Quasar own components and classes?
In the second option above i’m refering to what this guy is doing in this video: https://www.youtube.com/watch?v=fN2-1V2YARQ&list=PLAl8os33KyOXvyPhuO1gHr6YVlTZXzKiS&index=3
-
@rodrigoroma there was this topic:
Nothing big has changed in this matter IMHO. I also think, that possibility of using Quasar as a new standard of themes would be awesome.
OTOH most of those themes COULD be enhanced with Quasar rather easily in UMD mode. BUT you probably won’t get a “full experience” Quasar, so the question is why should you use Quasar (instead of some other Vue frameworks) in those themes after all? I don’t think that Quasar clearly answers that as for now.
-
First of all, thanks for your answer!
In my case it’s a new project so I want to use Quasar CLI to have the full experience (I’m not considering UMD). As I’ll build a PWA/SSR project so Quasar seens really good for my needs.
I’ve previously seen the topic you mentioned (and all others with the “template” keyword) but it’s a little old and it was not pretty clear that the right way do is to “recreate by hand” the design using the Quasar components and classes. Is this really the right way?
-
One of the big downsides of Quasar is the lack of (commerial) theming options. Can’t have it all I guess…
-
@dobbel said in How to use HTML templates in a Quasar project?:
One of the big downsides
well, depending on the point of view - maybe this lack of templates is in fact an opportunity?
-
@qyloxe I really like quasar from a pure developer side. Having that said I have not seen any app made with Quasar( I take a look at every app posted) that has a pretty (custom) UI design/look and feel. All of them look like clones of each other with different primary and secondary colors. There used to be a IOS skin that really looked different, but that was cut out in V1.
What I am trying to say is that it looks like it’s not very easy to customize the look and feel of Quasar components in a uniform way to make your app look pretty and unique.
-
@dobbel said in How to use HTML templates in a Quasar project?:
Having that said I have not seen any app made with Quasar( I take a look at every app posted) that has a pretty (custom) UI design/look and feel. All of them look like clones of each other with different primary and secondary colors.
I feel you. To prove that, here is another thread with similar rants:
https://forum.quasar-framework.org/topic/3483/fluid-typography-solved?_=1588791433817
What I am trying to say is that it looks like it’s not very easy to customize the look and feel of Quasar components in a uniform way to make your app look pretty and unique.
Well, depending on definition of “easy”. For me, most of that would be “easy”,
but it is a siginficant amount of work, which I’m not convinced to do. All those themes from theme libraries are not perfect, too. What was advocated instead is to join the best of two worlds - let Quasar have some compatibility with the most popular CSS frameworks (for example bootstrap) for initial “conversion” of themes and then, slice those themes into fragments, make Quasar components from them and just generate tons of new and shiny Quasar themes. Unfortunately, this is also much work, and still, as you observed, nobody was so invested in this. Maybe if this would be a group project than yes, but again - there is a need to change some CSS classes in Quasar to be more “friendly” for conversion/evangelisation all those thousands of developers accustomed to their bootstrap and family, tools. -
@qyloxe Thanx for such a comprehensive reply. You are far more knowledgeable than me on this subject and hope you don’t mind if I ask some more questions.
I read the other thread and I am wondering if you know if there has been any kind of development or furture plans on this ‘theming’ matter?
For example in the other thread the chief himself(rstoenescu) is promising themes in V1:
“We are planning to launch a Quasar themes website and also teach people how easy it is to create custom Quasar v1.0 themes.”
My first conclusion from reading the thread and your effort is that the current version of quasar cannot (without much effort) archive this (with style being hard coded ect).
My second conclusion: In it’s current state Quasar is a nice framework for hobby projects and functional apps( that do not have to look good/branded) , but if you need a nice UI you have to look else where.(Vuetify comes in my mind).
It would really be a shame to leave Quasar because of ‘just’ theming. It is the holy grail to me for single-code-base apps for all platforms.
Your thoughts?
-
@dobbel quasar launched layout generator and layout library. I always assumed, that the framework should provide many examples, be it in the form of layouts and snippets, but themes libraries should be a people projects. Why? Themes are artistic, beautiful, free so every single person or group, could like something other. So let they just create their own theme libraries or “forests”
Anyway, we agree, that Quasar is actually “hard” for theming or convincing designers from other frameworks to migrate. Layouts are for apps, themes are for people in other words.
BUT in the overall, theme is only a part of a project. The project lives for several years, it needs to be maintained, upgraded, adjusted to current tech, and in this aspects - I do not know anything better than Quasar. So, yes, you may use vuetify or thousands of other solutions, but still, IMHO there is nothing better when you count all the pros and cons. Quasar is a masterpiece of modern technology, RStoenescu is one of the best architects we may encounter in our lives, so decision about our “projects” is not based only on what he had done yet, but what he is capable in the future.
I’m sure, that more and more people will talk about “themes”, that the public library will happen, that it will be easier with time. I know, that when Quasar will grow, the more people will come and they will have more time to help the public with theming, drag-n-drop, mobile etc.
Oh, and please remember, in Quasar you have not only SPA/PWA modes but also UMD and Vue plugin so you can with small steps, with tiny little change here and there, put Quasar goodies into existing projects. I’ve done many such little projects, where I put some of the Quasar code into existing apps just with UMD. And it always worked perfectly. UMD is often overlooked, but it is a viable migration point in the way to full Quasar project.
Ach, and another point - even if there will be “theming” with Quasar then it will not be a traditional “html blobs of cryptic code” way. It will be a full “componentable” “themable” “integrable” and all the rest of -ables. Why? Because in Quasar you can have a integrated component for blocks, presentation and functionalities, which are currently hard coded as “snippets” in Bootstrap for example. Nothing stops you from building such blocks of themes right now, BUT - for now it will be quite a lot of work. In the future - I’m sure it will be easy. -
@qyloxe said in How to use HTML templates in a Quasar project?:
@dobbel said in How to use HTML templates in a Quasar project?:
One of the big downsides
well, depending on the point of view - maybe this lack of templates is in fact an opportunity?
Peeps, especially “designers” should take heed to this.
