Develop
Develop
A step by step guide on how to install and use the VAN DEER foundation in code.
Install
The VAN DEER Foundation is available as an npm package.
To install it, a .npmrc file needs to be created in the root of the project.
@vandeer:registry=https://artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/
//artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/:_auth=cy1yYm1oLXJlYWRvbmx5LXJiZHM6QVA4bTJXZVNhN2Q5bTZYVUpIcVZmdGtTOGpR
//artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/:always-auth=true
With the correct .npmrc file in place, the VAN DEER Foundation package is ready to be installed.
$ npm install @vandeer/foundation
Font Faces
To display typefaces on the Web, it is required to provide the correct font face declarations. There are two ways to include them in a project
Load Fonts from a CDN
Using with HTML
Declarations are available via the CDN, and can be include to a project by adding the following line to the <head> section of an HTML file:
<!--
Replace x.y.z with the latest version of @vandeer/foundation (e.g. 1.20.0)
-->
<link
href="https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/typefaces/index.css"
rel="stylesheet"
/>Importing with CSS
@import url("https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/typefaces/index.css");Compile Font with your CSS
Alternatively, the font face declarations can be imported from the npm packages to a CSS preprocessor file:
@import "@vandeer/foundation/primitives/typefaces/index.css";
Develop
Primitives of the foundation are available as variables in different formats to be used with different preprocessors like SCSS, Less or plain CSS.
SCSS
@import "@vandeer/foundation/primitives/typefaces/index.css";
@use "@vandeer/foundation/primitives" as *;
.my-container {
background: $vandeer-color-background;
}
.my-title {
color: $vandeer-color-text-neutral-prominent;
font-family: $vandeer-typography-title-typeface;
}LESS
@import (css) "@vandeer/foundation/primitives/typefaces/index.css";
@import "@vandeer/foundation/primitives/index.less";
.my-container {
background: @vandeer-color-background;
}
.my-title {
color: @vandeer-color-text-neutral-prominent;
font-family: @vandeer-typography-title-typeface;
}CSS Custom Properties
<!--
Replace x.y.z with the latest version of @vandeer/foundation (e.g. 1.20.0)
-->
<link rel="stylesheet" href="https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/typefaces/index.css" />
<style>
.my-container {
background: var(--vandeer-color-background);
}
.my-title {
color: var(--vandeer-color-text-neutral-prominent);
font-family: var(--vandeer-typography-title-typeface);
}
</style>