New docs website has been launched!

[rstoenescu]

Hello All,

We are thrilled to announce the launch of our new documentation website for Quasar Framework! We've been working hard to create a better, more user-friendly experience for our current users as well as for the ones that are just getting started with our framework.

Please note that this is just a first step. We'll continue to iterating over the site to improve it in the coming months.

We hope that you will all enjoy the new interface, with its dark and light themes (from which you can choose your favorite), and the many other UI improvements (like the API cards as one quick example).

We also want to thank everyone who's been contributing to the new website with feedback. It was thrilling to see the passion in some of the comments :)

And last but not least, we would like to thank all of our sponsors and backers for their continued support that allows us to make progress! If you're not one of them and you like what we do, please take a look at our sponsorship page.

Important

You'll get the new docs as soon as your currently installed PWA updates to it. If you don't want to wait, uninstall the current instance of it (optionally also clear the browser cache) and refresh the page.

Donations

Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers.

We've been hit hard because of the recent Github Sponsorship decision to drop Paypal support, so if you are interested in supporting this project, please consider the following:

• Becoming a sponsor on Github
• One-off donation via PayPal

[kurtisas-k]

Kudos on the redesign. It looks amazing.

[barisener]

Looking great 👏🏻

[Cmacu]

Looks awesome. Love the dark theme! Thank you!

[pratik227]

Looks awesome 🚀🚀

[beliven-emanuele-bertoldi]

The released version seems a lot better than initial drafts, however I'll still suggest to improve typography removing a lot of styling that make it more hard to read and more cluttered.

I made an experiment removing most of letter-spacing, reducing the general font-weight to 300 and using Montserrat also for doc headings. This is the result and looks to me a little bit cleaner and "professional":

[BenJackGill]

I agree with this adjustment

[rstoenescu]

This is a BAD idea. Especially to recommend to others. We are continuously tweaking and improving the docs. At some point, any code on top of the docs will get out of date or will interfere to the way that it should be displayed. I reduced the typography size yesterday so if you still have this on top of the docs you maybe won't even notice it. Moreover, the website could show in a much worse way than we intended. But bottom line: you won't even know if something is wrong from our side or yours.

What we recommend is telling us if something seems out of place so we can fix it for all our developers using the docs.

To those reading this thread: don't overwrite the CSS :)

[geminigeek]

hi,

just an observation , i liked the old style , not a fan of new typography and design. looks better at 90% -80% zoom

[robert-hoffmann]

Congrats for the launch

But some small bugs ->
https://quasar.dev/quasar-plugins/dialog

The API part is missing all the documentation on all the options & stuff you can pass to the quasar dialog, like here

  $q.dialog({
    component: CustomComponent,

    // props forwarded to your custom component
    componentProps: {
      text: 'something',
      // ...more..props...
    }
  }).onOk(() => {
    console.log('OK')
  }).onCancel(() => {
    console.log('Cancel')
  }).onDismiss(() => {
    console.log('Called on OK or Cancel')
  })

It doesn't mention anything about: onOk, onCancel, or how you can add buttons, configure them, etc

IIRR this was all present in the old doc :-)

[rstoenescu]

Click on the "plus" buttons.

[robert-hoffmann]

👍

[Dimonka2]

It will be very helpful to have a light version of the site. I'm having a hard time with the website's dark color scheme since I'm used to a lighter background. It's straining my eyes and making it challenging to read.
Additionally, agree with the comment above from @geminigeek about font size.
Otherwise it looks good.

[IlCallo]

Landing and components page are dark-theme only, but you can actually change the docs to light theme with the top right icon

[Dimonka2]

Thank you!

[sluxzer]

I love this new design, thank you for such great work to all team.

by the way, the animation and concept are fantastic, whose idea is it? it makes me wonder how you guys implement it and jump to F11 XD. Do you guys make it with some tools to generate the animation and CSS?

[IlCallo]

Thanks for the kind words :)
Dreamonkey, and especially @NiccoloMenozzi, worked on the concept for the renewed Quasar branding and designed the new landing and components page
We worked side-to-side with the core team to add a bit more "space flavor" to Quasar website 👾 🌟

[IlCallo]

The stars animation is actually 3 CSS animations one over the other, in an infinite loop
Each layer has stars of different size and moves at a different speed

[rstoenescu]

Remember that it's not just the design. The inner workings are also 10 times better ;)

[it-xtech-dev]

Congrats to all team members!

I would also vote on smaller (80-90%) fonts for desktop (my is 23'' 1920 x 1080) an its bit hard to read. For much larger screens it might be fine. Mobile font sizes are ok.

[mariokresic]

Looks much better!

[sainf]

Some notes.

• Typography (Size too big, and sorry, the font is ugly)
• Add an option to hide the right tab to have more space for api boxes.

I liked the previous one better, but maybe I spent too too long on the previous docs.

[rstoenescu]

I've adjusted the typography level yesterday and redeployed. It should be fine now.

[sainf]

Thanks, It looks a lot better!

Is there any change to make the button to hide the left menu up to 1600px.
In 24" (1920px) it looks fine, but in smallers 19" (1440px and 1600px) the main page it seems to tight.

[Cmacu]

Is there any change to make the button to hide the left menu up to 1600px. In 24" (1920px) it looks fine, but in smallers 19" (1440px and 1600px) the main page it seems to tight.

Vote against this. I use it at half screen as PWA and having the left menu available is valuable. Also I find the site to work/look best at ~75% zoom and this leaves good amount of space for the main content.

[sainf]

This is a promenor between 1300px and 1600px.
It is more readable in API Explorer than on the Component page. I'm not asking to change the logic of the PWA, but an option / button to retract one of the navigation blocks to give more space would be welcome.

[JokerMartini]

I agree the design is nice but the typography is huge and the bold makes it look clunky and out dated.

[JokerMartini]

I find the site looks best when changing the overall zoom level to 70%

[rstoenescu]

I've adjusted the typography level yesterday and redeployed. It should be fine now.

[JokerMartini]

great work @rstoenescu overall it's a nice improvement.

[dinyo]

sorry, i prefer previous version. i think its taking too much space vertically.

[fprijate]

Nice design.
Maybe site should remember (by cookie) decision about dark or light mode.

[IlCallo]

It does

[fogx]

Looks great. I had some troubles with the search though. What's the right place to suggest doc search improvements, just create a regular issue?

[IlCallo]

You can write it here if you wish

[fogx]

Sure. I found documentation on BEX, but didn't know what that is. The page exists, but doesn't rank highly in the docs search (i found it via google).

I saw the doc search uses meilisearch, but couldn't find any public configuration of that.

[IlCallo]

Unluckily I think we don't have that much granular power about the indexing and research of contents, but we'll see if we can fix it in some way

[rstoenescu]

The indexing is as custom as possible, but not granular enough. However, we have tags set for each page. But remember this is not ChatGPT, so searching for "browser extension" or "bex" is better than a natural language request like "what is a bex".
In any way, we'll see how we can further tweak the tags.

[topvis]

1. The link "Electron specific packages" on page https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages is not valid any more.
2. The subject title Developing Mobile Apps (under Quasar CLI (with Vite and Webpack)) : I would suggest to change it to "Developing Cross-platform Apps" since Electron JS can also be used to create Windows desktop apps.

[IlCallo]

The page you linked works for me, can you retry?

[rstoenescu]

Developing Mobile Apps refers to Cordova and Capacitor --- apps on mobile phones/tablets for delivery with App Store / Play Store.

[topvis]

The page you linked works for me, can you retry?

The page https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages is OK. The link on that page is not valid. Please refer to the screenshot below:

[IlCallo]

Ok, that's clearer now, thanks

[rstoenescu]

Fixed it (the electron link)

[BenJackGill]

The typography was tweaked a few days ago, and it looks much better now.

But the code examples still have the old large font.

I suggest reducing them also to match everything else.

I am talking about these parts I highlighted in red:

[rstoenescu]

Tweaked it and redeployed the docs.

[sam-leishman]

The new site looks great! I do have a suggestion about the landing and components pages, though.

I feel like the white cards don't work too well with the dark space background. Seems like too much of a contrast for a page that has a dark mode look/feel. I think it would look better if the cards behaved like they were in dark mode.

[IAdalarI]

I agree

[IlCallo]

Those cards are meant be to high contrast

[enpasos]

Incredibly appealing! Congratulations!

A question about the making of ...

When I open https://quasar.dev/why-donate and scroll down, I see "Ready for more?".

When I naively

git clone https://github.com/quasarframework/quasar.git
cd quasar
cd docs
yarn install
quasar dev

open http://localhost:9090/why-donate and scroll down I don't see "Ready for more?".

What did I miss?

[enpasos]

Oh ... I realised that I was missing at least two things... to weave in the "Ready for more?" nav info

1. I should do a build.
2. I need to find out how to do the build for a SPA.

A hint for 2?

[enpasos]

... and for separation of concerns I think I should leave my congratulations for the really amazing work here and open a new thread for my question ... see #15886