conversion from bootstrap themes/templates
-
Weird (?) question - is there an automatic tool or even just a guidelines for conversion from bootstrap css/grid system to quasar?
There are tons of free bootstrap themes/templates (search this on google). Many of them are very attractive, functional and visual appealing. I wonder if it is possible to use them in quasar projects with quasar flex/css system without MUCH of grunt keyboard work.
-
@qyloxe - Building a bootstrap theme into Quasar is currently a manual job. No way around that. There is no automation for installing external themes either…yet. Most of the available Bootstrap themes out in the wild are also based on jQuery for their functionality too. So, that is a no-go right their to integrate them at all.
Sorry for the negative answer. But, that is how it is currently.
Scott
-
hmm, let me elaborate.
As for now, I’m talking only about css classes which have similar functionality in bootstrap and quasar but different names.
for example:
in B4: https://getbootstrap.com/docs/4.3/layout/grid/
there are for example classes:row col col-[1-12] col-sm-[1-12]and in Quasar: https://quasar-framework.org/components/flex-css.html
there are also those classes - 1 to 1.BUT some of them are different for example in B4 it is “align-items-center” and in Quasar it is just “items-center”.
And so on in text utilities: https://getbootstrap.com/docs/4.3/utilities/text/
and in Quasar: https://quasar-framework.org/components/typography.html
where there are some identical classes for example “text-left”, “text-center”.So, in my POV I wonder it there is a list of css classes from B4 and from Quasar, with info which are the same, and which needs to replace names or which ones doesn’t exists in Quasar. With such list one could create simple “builder” for css class names replacement. I think, in many, many situations it would tremendously help with building Quasar specific themes by using existing B4 themes. Even if one would have some crippled/replaced Quasar theme it is an argument for further fiddling with code (and as you said adjust interactive aspects of said theme - jquery, etc) because one have something which looks quite OK in quasar and she already invested some time into it.
As for now Quasar looks only as an app building platform, but with all those flex css and brilliant typography there’s no problem in using Quasar as a framework for any web page - be it a product, business, one page, landing or any other category. Additional argument is of course UMD mode in Quasar, but again, in my opinion, the problem is with easy conversion from thousands of exisitng beautiful B4 themes.
-
I understand now what you are getting at.
Yes, Quasar has its own CSS framework, so to say, and it may seem a bit like Bootstrap, but it isn’t Bootstrap, as you have found out. There isn’t a “we do this, Boostrap does that” guide currently. I do believe designers and frontend devs can pickup Quasar’s CSS “flavor” of styling fairly quickly. And yes, with Quasar, you can build basically any kind of web site or application.
Quasar templates are also possible, so that devs can offer share them with other devs. We’ll be building on this direction in the future for sure.
Scott
-
@s-molinari hey, I found a full list of CSS classes for bootstrap 4:
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
If one had such a list for Quasar, the simple (syntactic) CSS conversion from B4 to Quasar would be (almost) trivial, and it would open a way to promote Quasar as a mainstream frontend.
-
Hmm… listing out all of the CSS classes in Quasar into one single table and writing explanations about them would be good amount of work. Work we most likely won’t be doing anytime soon. We’re always looking for motivated devs to help though!
Scott
-
@s-molinari Sure devs could do such work, but you have a wonderful docs generator for props, methods, slots etc. It works by special marking of some fragments in source code and then the generator automatically creates docs pages with descriptions of said props, methods etc.
I think, that it would be very fruitful to add specifically “css classes” as another special marked fragment in source code, too and maybe generate cross references/index pages with all props, methods, events, functions AND css classes with links to their description in documentation.
Such index pages would be a “poor man’s” search
And it seems doable, because if you can generate one page for component and list its methods, than it is possible to generate one page with all methods/slots/props/css and links to specific components. -
but you have a wonderful docs generator for props, methods, slots etc.
That was a ton of manual labor.
There are now what we call API .json files within all of the component, directives, mixins, etc. in the quasar source code. All of the team at the time took 2 weeks to create the files, whereas Razvan did the monster pile of it. To get the CSS in that same form would mean the same manual work.Scott
-
@s-molinari said in conversion from bootstrap themes/templates:
To get the CSS in that same form would mean the same manual work.
if there could be just an example of such “decorating” CSS classes in documentation, I’m quite sure, the community could help. Well, in case of CSS classes, it doesn’t need to be extracted from source code but from documentation files - just as in Word you just mark some text as reference and the Word could generate indices themself. So, maybe just adding some markup for CSS classes and other useful terms in docs would be great. Well, as I said this is a good investment. Why? Because it is good from marketing POV. Why marketing? Because if you want to convince developers from other technologies, than you need a clear path of transition. In case of bootstrap or any other frontend frameworks, the CSS classes are the most important. Just my $0.02
-
In a component-based framework, the most important thing is the components, not CSS classes. I believe most of it is even abstracted inside components props/slots, so it’s hard to need them
-
@lucasfernog sure, but please read the thread carefully - we’re not talking about components but about thousands of free bootstrap themes, used as a base for frontend sites in business, blogs, landing pages and many other categories of sites.
It is possible to get those momentum in frontend technology because Quasar has a set of compatible with B4 CSS classes which means, that if there would be a clear or relatively easy path of conversion from B4 to Quasar, there is a big chance of putting Quasar mainstream and let the world use it instead of B4. Why? Because B4 has poor components but it’s very easy to start with good looking theme or template but when it comes to really making a site it is very hard. So, as you can see, CSS classes for layout, typography and colors are not a “developer” problem but rather a “marketing” problem. -
We are definitely on that path. I just think we will be ignoring B4 and expecting devs to build out things like this:
https://reverent-volhard-4aed03.netlify.com
Click on one of the links in the middle.
That is just a humble start for “layouting”.
Scott
-
@qyloxe said in conversion from bootstrap themes/templates:
@lucasfernog sure, but please read the thread carefully - we’re not talking about components but about thousands of free bootstrap themes, used as a base for frontend sites in business, blogs, landing pages and many other categories of sites.
It is possible to get those momentum in frontend technology because Quasar has a set of compatible with B4 CSS classes which means, that if there would be a clear or relatively easy path of conversion from B4 to Quasar, there is a big chance of putting Quasar mainstream and let the world use it instead of B4. Why? Because B4 has poor components but it’s very easy to start with good looking theme or template but when it comes to really making a site it is very hard. So, as you can see, CSS classes for layout, typography and colors are not a “developer” problem but rather a “marketing” problem.I’ve just come across this issue converting a project that uses Bootstrap css, which I’m converting into Quasar.
It would have been helpful to have a guide. The point that @qyloxe makes above is very smart business sense as well.
