getting-started icon

Getting Started with Web Components

Dell Design System Web Components are custom HTML elements with encapsulated styling that can be used to build your own DOM elements.


What's new

These are the instructions for installing Web Components for the Dell Design System v2. Web Components permit JSON content binding and attribute-based configuration, along with encapsulated styling that will not affect other element styles on the page. Web Components work with all modern browsers, including Internet Explorer (versions 11+). Read more about Web Components at Mozilla Web Docs.

Note that these components cannot be used in combination with components from v1 of the DDS. You can still access the Dell Design System v1 at its new URL

Install

The install uses a lightweight node module with corresponding HTML and JS snippets per component. To install the Dell Design System node module from Dell’s Artifactory, use the following command in your terminal:

npm install --save-dev @dds/web-components --registry=http://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/

Usage

We provide the ability to install a single component by specifying the component name in the path.

import { Button } from @dds/web-components

SASS

Web Components contain CSS, but will need support for fonts and icons. Commands for those are featured below.

Fonts only

Loads the Dell Design System font family. The file contains links for woff, woff2, eot and ttf. All fonts are retrieved from our CDN.

@use "@dds/web-components/src/scss/dds-fonts.scss"

Icons only

Loads the Dell Design System icons as a font family. The file contains links for woff, woff2, eot and ttf. All fonts are retrieved from our CDN.

@use "@dds/web-components/src/scss/dds-icons.scss"

Install with CDN

The runtime CDN, located on Akamai, contains the DDS assets with all the JavaScript and CSS for all the components, including fonts and icons. To utilize UI core assets during run time, just add the following Akamai based URLs to the relevant files. You can browse through the available files here:

Style Sheets

Web Components contain CSS, but not fonts and icons. To load those, place these stylesheets before all other stylesheets in the {stylesheet link} .

<link rel="stylesheet" crossorigin href="https://dds.dell.com/web-components/2.0.1/css/dds-fonts.min.css" />
<link rel="stylesheet" crossorigin href="https://dds.dell.com/web-components/2.0.1/css/dds-icons.min.css" />

CSS

Fonts only

Loads the Dell Design System font family. The file contains links for woff, woff2, eot and ttf. All fonts are retrieved from our CDN.

<link rel="stylesheet" href="https://dds.dell.com/web-components/2.0.1/css/dds-fonts.min.css" />

Icons only

Loads the Dell Design System icons as a font family. The file contains links for woff, woff2, eot and ttf. All fonts are retrieved from our CDN.

<link rel="stylesheet" href="https://dds.dell.com/web-components/2.0.1/css/dds-icons.min.css" />

Initialize JavaScript

We have no dependencies on third-party libraries and favor pure Javascript. The “index” file supplies the ability to instantiate components on the page.

Script

Place the following into your :

<body>
  <!-- application code... -->
  <script src="https://dds.dell.com/web-components/2.0.1/js/index.min.js"></script>
</body>

Typescript Version

If your application is using Typescript to pull in the JavaScript from our CDN, be sure to declare Dell Design System as “any” in your index.js file so that the imported Dell Design System library can be used inside your application.

// Add this to projects index.js
var DDS:any;

Once you’ve declared the Dell Design System library, making it available to your application, you can import components like normal.

import { Button } from '@dds/web-components';

Resources

Storybook

View developer documentation on Dell's Storybook.

Feedback