Although using Vega Lite gives you convenient access to a subset of Vega features, we generally discourage its use for the following reasons:
For these reasons, please consider using full Vega for your projects.
If you would like to use the “light” version of Vega, you can use Vega Lite, which is a set of custom-made Tailwind classes which will provide you with what you need to generate the look and feel of Vega, without using the full components package.
To get started using Vega Lite, you will need to set up a meeting with us, so we may generate a custom set of SCSS files which will both save you a large amount of time in constructing your site, but will also make sure that it is future compatible if you wish to make use of the full Vega Design System.
We can also create customized JSON files which can be used for your development processes, and we can work with you regardless of platform. In order to successfully do this we do need to get a set of specifications from the respective team, so that we meet individual needs.
Please reach out to us via the Vega Slack channel or email us at vega@e-hps.com to set up a meeting.
Vega has a set of custom classes which work directly in HTML, making it possible for developers to construct designs which make full use of Vega tokens without needing to construct CSS from scratch.
With Vega Styles, even if you don’t want (or are unable) to make use of Vega Components, you can make sure your designs not only have the look and feel of Vega, but that any changes to Vega will automatically update your site, without requiring any manual changes.
Vega classes can be used directly in HTML.
For instance, let’s say you want to style an H1 element. You can call the Vega classes directly within the class property of your element. The following code will provide the default primary color for the H1 class with a font size for H1. It will also apply the correct Vega font. What’s more, it will also automatically transition to the corresponding inverted colors if the site is being presented in dark mode.
<h1 class="v-text-primary v-font-h1">Hello world!</h1>Note: All Vega classes, when used directly in code and not associated with a component, are prefixed with
v-
You can apply Vega classes to all elements within your application.
Background Color uses the following structure: v-bg-{color design token}.
Border Color uses the following structure: v-borderColor-{color design token}.
Text Color uses the following structure: v-text-{color design token}.
Outline Ring Color uses the following structure: v-ring-{color design token).
In order to use typography presets, use the structure of font-{design token}. For example, v-font-p1-short.
You can control the spacing around elements within Vega using Tailwind classes. You can set padding, margins, and horizontal and vertical spacing.
Padding: control the padding on one side of an element using the v-p{t|r|b|l}-{design token} utilities.
Margin: control the margin on one side of an element using the v-m{t|r|b|l}-{design token} utilities.
Horizontal Space: control the horizontal space between elements using the v-space-x-{amount} utilities.
Vertical Space: control the vertical space between elements using the v-space-y-{amount} utilities.
Example:
<div class="v-pt-size-24 v-pl-size-24"></div>Borders are permissible for various buttons, form input, and sidebar fields for highlighting during various states. These use the structure of v-border-{design token}.
Corner radiuses can be applied to elements using following structure
v-rounded-{token name}
For example:
<div class=’v-rounded-12’>
Sizes are in pixels and include 2, 4, 8,12 16, 24, 32, 48.
Example:
<div class="v-font-p2-short L:v-font-p1-short">
Example:
<div class="v-text-medium-typeset-1 L:v-text-medium-typeset-2"></div>When setting the screen size to less than 2014px (the “L” setting), the font style should be set as v-text-medium-typeset-1, however, if the screen size is equal or larger than L, the font size would be specified as v-text-medium-typeset-2
<div class="v-text-medium-typeset-1 L:v-text-medium-typeset-2"></div>The tokens are set as follows:
| Token | Size |
|---|---|
| S | 375px |
| M | 768px |
| L | 1024px |
| XL | 1440px |