@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.

@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

@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.

@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, 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.

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.

@s-molinari another $0.02:

please take a look at this library:

https://github.com/Vivify-Ideas/vue-draggable

I think something similar to this could be embedded in quasar. This library is little different from others, because it is based on DOM elements but supports models via events with datasets. It’s surprisingly powerful, because in effect you have an inverse of control at the dragend level. It allows to implement many interesting drag’n’drop scenarios where you could drag for example user items and drop them on group containers and drag those and drop on security containers. This library uses o concept of datasets - take a look - quite nice.

Unfortunately, just using this library is VERY hard in quasar, because you do not have enough control at qcomponents level. You can not control for example rendering (h function) of qtab headers or other structural quasar elements, which could be dragged. Of course, you could in many situations use component slots and write your own DOM elements with appropriate directives and maybe this awesome library would work - BUT - it should be embedded into quasar and available ad hoc for everyone. Every quasar component should be draggable (and keyboard ready, too - there’s no concept of “focus” actually - yes, I know about some focus helpers in some components, but it is not a full keyboard navigation support at the framework level).

The capability of “draggable” or “keyboard navigable (?)” should be embedded in quasar components just as it is already embedded functionality of “routable”. It is very similar abstraction.

with git you could use this:

https://git-scm.com/book/en/v2/Git-Tools-Submodules

or with mercurial this:

https://www.mercurial-scm.org/wiki/Subrepository

IMHO private npm/yarn or other module manager doesn’t work in shared code/developer scenario (it works in distribution/production scenarios however).

@s-molinari sure - some thoughts:

1. lack of some kind of extension/enhancement/reverse control support at the (base) component level. One of many good example of frustrated developer who knows what he wants, is this quick find by google:

https://github.com/quasarframework/quasar/pull/2461/files

It means, that if you, as an author of dnd functionality would want to improve quasar, it is as for now impossible, without copying and authoring your own version of components. I’m not saying that his method of extensions is ideal, but quasar needs something similar.

2. some component elements are (IMHO) impossible (currently) to properly implement drag/drop - even, if those component elements could interact with vue models. In example - QTabs and tab headers. As for now, it is better solution to have external draggable qlist with “tabs” than allow to drag’n’drop and reorder those tabs.

3. external libraries should maintain data in vue models which is of course a vue way (which automagically changes visual representation in quasar components). So if you assume, that changes in models (new ordering, new items, items removed) will have a visual representation in quasar components (which is obvious) when you want to have control of behaviour of said quasar components - it is almost impossible. For example, you could sort and reorder elements in table rows, but what if you want to drop dragged row into another quasar component - a qtree and you want to change visual representation of dragged element when it is over a specific tree node?

Without support at library level (quasar) it is VERY hard or impossible to write those scenarios at the application level (wont even mention mobile scenarios). As for now, the application developer is strongly tempted to copy actual quasar source code and build his own components which is… problematic and needs a LOT of work or maintenance. One of the ways to think about drag’n’drop is assumption, that every visual element which is a representation of the state could be dragged. For example, in qtable it could be a content in cell, whole row, or whole column - or - even whole table. In editor, it should be possible to drag’n’drop images into text or from other editors. And nobody expects to implement image drag’n’drop in qeditor by quasar authors - BUT - external library developers should have API and quasar library support to do so if they want to create such an extension or their own component.

I hope I expressed it clearly - quasar IS great and DND support would be just a next step in evolution to total quasar awesomness!

Drag and drop in quasar with vue reactivity would be a KILLER feature.

As for now, It is not possible, or VERY hard, to embed drag and drop in quasar application without quasar support.

In example someone would like to drag and drop tree items, or other elements and mix them with lists or even other vuex objects. If you are using external library (vue-dragula is in my opinion useful somehow) then there are situations, where you just can not do some things because quasar does not let you or actively prevents you from doing this.

So, I just patiently wait for drag and drop support in quasar. (Also for a support for keyboard navigation).