Apply css framework

  • I have many problem with CSS when use quasar. It is difficult to layout, the flex box is only have 5 cell, it is not flexibility. The component is not the same height such as select and input component. The component don’t have multi size as large, big, medium, small size. The prefix, suffix icon as placeholder inline the input/select component is missing. Especially, the css for form layout is missing. I suggest we should use a popular css framework to design component, ex: bootstrap…

  • I don’t know what you find difficult. The layout it’s pretty standard. If you want row or column just use the class you want in your container. For nested elements use auto or 1 between 5. I read somewhere that 12 columns will be implemented in the future. You want more spacing between columns? Change the gutter.
    Neither bootstrap has sizes for all its components.
    And using a framework like bootstrap it would take the fun of the iOS/Material styling. For example prefix/suffix icons in form elements it’s not part of the material design and I think nor the iOS style. But you can always nest it in two columns with 0 gutter and use some icon before or after the input…

  • Admin


    I’m going to give a high-level overview of why it’s best for Quasar to have its own CSS framework.

    1. Control of quality & timely fixes. Quasar’s CSS framework is done with performance in mind. Most of the external CSS frameworks have their own JS library that must be loaded. You can’t expect everything to fit in the most efficient way. Also see #2.
    2. Quasar has multiple themes (currently Material and iOS with more to come). Quasar components must work with multiple themes. Each CSS framework requires its own markup. MDL for example does not have all the components built in Quasar. Some other framework might have feature X but not feature Y. Quasar is the most complete framework out there. It would be a mess trying to integrate different frameworks. Performance & efficiency would be out of the question.
    3. Writing a framework with which you can simultaneously write a desktop responsive website & mobile apps is something that currently doesn’t exist at the moment (this was one of the reasons I started working on Quasar). Electron wrapper coming soon. These capabilities raise a lot of issues and require special CSS classes, like make a <div> visible only on Mobile but not on desktop etc etc etc. All external CSS frameworks are nowhere tweaked as Quasar’s to handle these many environments.
    4. Since every external CSS framework has its own markup, how would you be able to write same code to generate UIs that look native for Android and iOS simultaneously?

    I won’t get started to talk about the low level implementation cause the list would go on forever really 🙂 The reasons above just scratch the surface on why it’s better for Quasar to have its own CSS framework.

    Also, forms are going to be redesigned. Releasing new Quasar version later this week. You’ll be able to do a lot more with your forms (including some of the things you mentioned). A lot of the overhead in your app will be lifted.

Log in to reply