Quasar Themes #9792
-
|
Is there any documentation, tutorials or examples of how to build a complete Quasar theme, and not simply changing the colours as in the official documentation? How do you go about changing, spacing, padding and more using SCSS? Plain CSS I can of course do. I want to know what the standards are to build a Quasar theme that plays nice with components, extensions and is future proof. I've searched, but have not found anything yet. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 14 replies
-
|
Painful subject. No there's not much documentation about 'really' customizing the looks of you Quasar app. That's why all Quasar app's are looking like clones of each other(My opinion). Here's the best example of a customized Quasar component, it's broken now but you get the idea.( you could fix it , the quasar umd js/css files are not found anymore because of Qv2 becoming the default Quasar version) https://codepen.io/Hawkeye64/pen/WNNdKJV And there's Danny's Youtube video's ( IOS theming) : |
Beta Was this translation helpful? Give feedback.
-
|
Now I am going to have to go through all my CodePens and adjust :( |
Beta Was this translation helpful? Give feedback.
-
Many thanks Jeff! |
Beta Was this translation helpful? Give feedback.
-
|
@hawkeye64 do you guys have any sort of documentation on changing the size, padding and positioning for the themes? i have not familiarized myself with SCSS yet, being a web development dinosaur from the Web 2.0 days when JQuery ruled and now is playing catch up with current technologies. I'm writing what will eventually be a desktop app and offer a web interface version of it. So the big fat friendly layout of the standard Quasar theme is using a good deal of real estate that could be available for data dense applications. I want to style a theme that is more sleek and targeted for large screen devices, rather than mobile. How heavily are SCSS variables used throughout the standard Quasar theme? Or is most of it structured with bog standard CSS? |
Beta Was this translation helpful? Give feedback.
-
|
@ontwikkelfabriek thank you very much for the information!
I would have to agree on that point about clones. Perhaps if there was documentation and examples, for deep customisation of Quasar themes, it might make the framework more popular. I initially chose Quasar for its multi-platform targets, but the apparent lack of customization dampens the party. |
Beta Was this translation helpful? Give feedback.
-
|
Just use CSS to customize your app. Quasar is using the BEM notation to make it really easy. Don't be afraid to dig into the css and make adjustments. It's part of what web developers do after all :) It's what is expected out of any framework - to offer a base "design" upon which devs can customize to fit their exact needs. For any designers reading this thread: there is a real opportunity to create (and sell) ready made themes for Quasar. |
Beta Was this translation helpful? Give feedback.
-
|
Just use CSS to customize your app. Quasar is using the BEM notation to make it really easy. Don't be afraid to dig into the css and make the adjustments that you need. It's part of what web developers do after all :) It's what is expected out of any framework - to offer a base "design" upon which devs can customize to fit their exact needs. For any designers reading this thread: there is a real opportunity to create (and sell) ready made themes for Quasar. |
Beta Was this translation helpful? Give feedback.
-
|
Please refer to my post comment below for why this is not an optimal solution and what would be more useful. |
Beta Was this translation helpful? Give feedback.
-
|
Why does the Quasar website not offer a live preview, an example "app" demonstrating all of the UI features from the Quasar website like this? https://quasar-admin-demo.netlify.app/ It would help sell the framework much better. When I look at Bootstrap, Vuetify, or CoreUI, a demonstration such as this is prominently offered. What is offered under "Tools" does not go far enough and "hidden" out of the way. An example app like the one above makes a great hackable starting point for a new project, especially those who have little or no experience with Quasar. This should be offered front and centre on the Quasar website. I had to search on "quasar ui bootstrap demo" to find this. I also discovered this video series mentioned in the Quasar forum. It or something like it should also be front and centre on the Quasar website. https://www.youtube.com/watch?v=fN2-1V2YARQ&list=PLAl8os33KyOXvyPhuO1gHr6YVlTZXzKiS&index=4 After reading many posts now, it appears that the greatest frustration people have with Quasar is an "apparent lack" of documentation and examples for customization. Perhaps this is the reason Quasar's popularity is stalling and starting to loose out. |
Beta Was this translation helpful? Give feedback.
-
The quasar docs site itself is a live preview. All the components are demonstrated with all their features. It's all Quasar. 😄 Scott |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I think what the original author is saying, is that it would be nice to see examples of all the components put together into sample pages/projects, aside from the live standalone previews per component. Each having their benefits to see and interact with. |
Beta Was this translation helpful? Give feedback.
-
|
We probably should make it more accessible, but if you download the Quasar monorepo and go Not interactive IIRC, but it's a start |
Beta Was this translation helpful? Give feedback.
-
YES !!! All of the other frameworks seem to offer this. It would help "sell" the framework much better. One of these demonstration projects, which include all of the UI components in their variations, with a selection of themes (even just two would do) to show what is possible. I can at least speak for myself and suspect that I am not alone. I evaluate a library, framework, whatever by fully functioning examples first, THEN, I hack the examples, and THEN go and read the documentation to get it work the way I want. The idea of frameworks is supposed to be to save people time, so why force people to write a basic app / project UI from scratch? I believe why the other frameworks beat Quasar in popularity is that they provide a sample app / project UI with all of the features, which can then be stripped back to what is required and then built upon as desired. This makes for far quicker start. Those who do not want to follow a "formula" can of course, start from scratch as one currently has to with Quasar. The Quasar developers could make it very easy on themselves (and for the Quasar users) by featuring the above example I posted. It would also demonstrate an active Quasar community. |
Beta Was this translation helpful? Give feedback.
Just use CSS to customize your app. Quasar is using the BEM notation to make it really easy. Don't be afraid to dig into the css and make the adjustments that you need. It's part of what web developers do after all :) It's what is expected out of any framework - to offer a base "design" upon which devs can customize to fit their exact needs.
For any designers reading this thread: there is a real opportunity to create (and sell) ready made themes for Quasar.