search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.75k stars 3.5k forks source link

[Request] Add support to modern-ui/fluent design theme #1422

Closed zuck closed 6 years ago

zuck commented 6 years ago

Now that Electron integration is going to become a first-class citizen feature of Quasar, it would be nice to have Metro/Modern UI/Fluent Design integrated as an additional theme to the framework.

This would really fulfill the mission of having:

hybrid apps that look native (on Win 10 desktop too)...

REFERENCE:

https://developer.microsoft.com/en-us/windows/apps/design https://docs.microsoft.com/en-us/windows/uwp/design/fluent-design-system/index https://msdn.microsoft.com/en-us/library/windows/desktop/ff728831(v=vs.85).aspx

In such a way related to #556 .

tothed commented 6 years ago

Second that! IMHO, for large screen apps FDS looks awesome and 'less a toy'. Thus Quasar could gain momentum in enterprise/intranet apps space.

Not sure how hard would be adding acrylic (there are CSSs for that on the web), connected animations, parallax, etc ... would it be stopper, or not ?

rstoenescu commented 6 years ago

@tothed

smolinari commented 6 years ago

@rstoenescu - you know I've been out of the Quasar loop for a while now and I sort of don't really have any stock in Quasar anymore. However, this is back to a main topic that I was very interested in, as you also know. I may be wrong in what I am about to say, for lack of knowledge and experience, so do bear with me.

Currently, Quasar allows for the building of an app with two different themes. iOS and Material. This is top of the line and for mobile apps, it will cover 98% of application needs. But what about the rest? Desktop, web, etc?

What needs to be possible is to also allow the dev to "install" their own or third party themes. So, in the CLI, there also needs to be something like....

quasar dev -t my-own-super-duper-special-theme

That would be amazingly powerful. I realize too from working with the code last year, that this kind of flexibility isn't easy at all, from the way things were designed to begin with. However, having this capability would skyrocket Quasar to the top, because it means there is no lock-in to the current two theme design. It would open up a world of capabilities.

Vuetify is working towards this direction, but I think in the wrong way. They are making proprietary themes and trying to make money off of them. But, their general direction I believe shows a theming system is possible. :smile:

Maybe something to think about for 2.0? :smile:

Scott

rstoenescu commented 6 years ago

Hi @smolinari ,

You're mixing some things and hopefully I can clarify them.

  1. The concept of Quasar "theme" applies to how components look. It has nothing to do on what platform they are rendered: mobile or desktop. This is the backbone on which you can build webpage templates (gonna talk about this later on).
  2. Quasar themes are totally customisable through Stylus variables.
  3. A webpage template refers to what is like Bootstrap templates. Like examples of a login page, examples of a showcase page, of a profile page, of a contact us page etc etc with its own design on top of one of the Quasar themes.
  4. I was hoping the community would offer some help and they would build such templates. Quasar is and has been fully equipped to deal with this for a long time. I'm working an inhuman 25 hrs a day and just can't take care of the framework, documentation, Quasar Play (which showcases the components) and on top of that also build such templates or apps, but this is a topic for another discussion.

Bottom line: saying "Material and iOS are mobile only" is a huge misunderstanding of the concept itself. It has nothing to do with desktop or mobile. And it's also highly customisable. Just if you haven't seen some examples of responsive login pages or landing pages or ....fill the blanks... doesn't mean Quasar is not capable of that. It actually excels at this because it has top-notch building block on top of which developers can easily create webpage template. It can successfully replace Bootstrap or Bulma, so this is some food for thought.

You might have been mislead by the concept of themes due to the documentation website. You get Quasar showcase on a mobile frame on the right side. It doesn't mean it only runs on mobile phones, or that you can only build mobile apps, or that Quasar themes are equipped on dealing only with small screens! Currently working on SSR support and once that is done, the doc website is going to get a full revamp, this time using Quasar itself (on SSR). Things will get much more clear. Guess if I don't get any help by the time Quasar reaches v1, I'm gonna have to spend time on doing some webpage templates myself, just to show examples of such capabilities.

PS: would love to have you back in the loop ;)

zuck commented 6 years ago

Sorry @rstoenescu, it seems the discussion went a little bit off-topic.

I totally agree with your replies, in fact my initial suggestion was to add Microsft's design to the game in order to let Quasar to be fully "cross-platform" and NOT to add templates/examples based on Fluent Design, so why closing this issue?

rstoenescu commented 6 years ago

This would be a huge effort, and I'm engaging with the community if it's worth it. If enough people require it, it will get into the official roadmap. Have you seen my slides on Quasar at Vue Contributors Day? https://medium.com/quasar-framework/slides-on-quasar-vue-contributors-day-3af41568a119

smolinari commented 6 years ago

@zuck Hi Emanuele

Sorry @rstoenescu, it seems the discussion went a little bit off-topic.

I hope my comment isn't part of that off-topic apology. I think my thinking is right in line with yours. However, I feel it shouldn't be up to the Quasar devs to build additional themes into Quasar. It should be the community doing it.

@rstoenescu Hi Razvan,

The concept of Quasar "theme" applies to how components look. It has nothing to do on what platform they are rendered: mobile or desktop.

I understood this. And the problem I see is, what if someone wants a Bootstrap look/ theme for their application/ website, mobile app, desktop app, etc.....for example.

Quasar has a "lock-in" here. I've seen code in Quasar that is purposely designed to switch between iOS or Material. I think this is a core design mistake. I just don't have an answer as to how to do it differently. What I'd like to see is the ability for Joe Designer to come up with a new theme and it be "injectable" throughout the framework.

Quasar themes are totally customisable through Stylus variables.

This is good. Though it only allows for the changing of design attributes of the two "fixed" themes.

A webpage template refers to what is like Bootstrap templates. Like examples of a login page, examples of a showcase page, of a profile page, of a contact us page etc etc with its own design on top of one of the Quasar themes.

Yes, Templating is the next step. However, anyone creating these templates would also be stuck with just the two themes to work with. :smile:

I was hoping the community would offer some help and they would build such templates.

This would need marketing, as in starting with some examples and driving the community towards doing more on their own.

"Material and iOS are mobile only"

That isn't quite what I meant to say. The two specifications are built with mobile applications in mind. Surely, it is also possible to do web apps and desktop apps with them too. However, the choice of only two themes is still a hard coded limit.

PS: would love to have you back in the loop ;)

I wish I had much more time to be in the loop. This would be so much more fun that what I am doing now.

Scott