conversion from bootstrap themes/templates



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


Log in to reply