Get optimal performance using the following optimizations.
Cherry Picking
Cherry picking can be done from the CDN or your local installation. This approach will load only the components you need upfront while limiting the number of files the browser has to download. The disadvantage is that you need to import each component.
Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the directory Quartz is in:
<link rel="stylesheet" href="/path/to/quartzds/core/styles/core.css" />
<link
rel="stylesheet"
href="/path/to/quartzds/open-design-tokens/dist/platform/desktop.css"
onload="document.documentElement.classList.add('qds-platform-desktop');"
/>
<link
rel="stylesheet"
href="/path/to/quartzds/open-design-tokens/dist/theme/light.css"
onload="document.documentElement.classList.add('qds-theme-light');"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap"
/>
<script type="module">
import { defineCustomElement } from '@quartzds/core/components/qds-button.js'
defineCustomElement()
// <qds-button> is ready to use!
</script>
Bundling
Quartz is distributed as a collection of standard ES modules that all modern browsers can understand. However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
Components
To use Quartz components with a bundler, first, install Quartz along with your bundler of choice:
npm install @quartzds/core@next @quartzds/{brand}-tokens-core@next
Now it's time to configure your bundler. Configurations vary for each tool and they will be documented here at a later time.
Once your bundler is configured, you'll be able to import Quartz components and utilities:
import '@quartzds/core/styles/core.css'
import '@quartzds/{brand}-tokens-core/platform/desktop.css'
import '@quartzds/{brand}-tokens-core/theme/light.css'
import {
defineCustomElementQdsButton,
defineCustomElementQdsInput,
defineCustomElementQdsTitle,
setPlatform,
setTheme,
} from '@quartzds/core'
setPlatform('desktop')
setTheme('light')
defineCustomElementQdsButton()
defineCustomElementQdsInput()
defineCustomElementQdsTitle()
// <qds-button>, <qds-input>, and <qds-title> are ready to use!