Getting Started

Whether you are a designer or a developer, we can help you get onboard with the Dell Design System.

About the UI Core Assets

UI Core components are prefixed with dds__ (eg. dds__alert).

Component behaviors are written using vanilla Javascript and do not rely on any third party libraries such as jQuery, Lodash and Popper.

All of our components are Dell brand approved and WCAG accessible.

A complete list of helper classes may be found here:View helper classes

Using UI Core:

There are 2 ways to work with the UI Core assets: Through the UI Core CDN (run time), which is hosted through Akamai, and through node modules (compile time) which is hosted in Dell’s Artifactory.

Note: The CDN only supports the dds-all JS and CSS, which contains the JS and CSS for all components (and with the dds-all-with-fonts includes UI-Core fonts).

Node Modules

Recent versions: 1.4.0, 1.5.0, 1.5.1, 1.5.2, 1.6.0, 1.6.1

To install the DDS node module from the DCS Artifactory use:

npm i -D @dds-uicore/all@<version> --registry=http://dcsartifacts.dell.com/artifactory/api/npm/npm/

The node module contains all files for each component, including all JS, CSS, and HTML files for lightweight usage examples. To use a specific component, just include the following in your .js or .ts file:

Import { <component> } from "@dds-uicore/all";

Example Projects

Here is an example of using the node module with an Angular 7 project ...

https://gitlab.dell.com/dao/dell-digital-design/design-language-system/examples/angular

Here is an example of using the node module with a React project ...

https://gitlab.dell.com/dao/dell-digital-design/design-language-system/examples/react

Note: For both projects, the following Node type declarations package must be installed to translate our JS from ES5 to TypeScript:

npm install @types/node

CDN

Recent versions: 1.4.0, 1.5.0, 1.5.1, 1.5.2, 1.6.0, 1.6.1

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:

https://uicore.dellcdn.com/<version>/</version>

CSS

To load our CSS, place these stylesheet <link>s into your <head> before all other stylesheets:</head>


      <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-reboot.min.css">
      <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-all-with-fonts.min.css">

JS Initialization

We have no dependencies on third-party libraries and favor pure Javascript.

Place the following <script></script> into your <head>:</head>

<script src="https://uicore.dellcdn.com/1.6.1/js/index.min.js"></script>

If using typescript to pull in the JS from our CDN, you have to add declare var UIC: any; in order for the imported UIC library to be understood by your script. For example:

import { Component, ElementRef, AfterViewInit } from '@angular/core';
declare var UIC: any;

Example Starter Page for JS Initialization

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- UI Core CSS -->
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-reboot.min.css">
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-all-with-fonts.min.css">
		
    <!-- Optional JavaScript -->
    <!-- UI Core JS -->
    <script src="https://uicore.dellcdn.com/1.6.1/js/index.min.js"></script>
    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Module Based Initialization

Place the following <script></script> near the end of your pages, right before the closing tag.

<script src="https://uicore.dellcdn.com/1.6.1/js/dds-all.min.js"></script>

Example Starter Page For Module Based Initialization

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- UI Core CSS -->
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-reboot.min.css">
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.6.1/css/dds-all-with-fonts.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- UI Core JS -->
    <script src="https://uicore.dellcdn.com/1.6.1/js/dds-all.min.js"></script>
  </body>
</html>

UI Kits

Adobe XD

An Adobe XD UI-Kit is available for designers. Please email delldesignsystem@dell.com for access to the XD UI-Kit. Eventually, the kit will be posted as a download link on this page. Below is a training video demonstrating how to use the Dell Design System Adobe XD UI-Kit:

Figma

A Figma UI Kit is also available for designers. Please email delldesignsystem@dell.com for access to the Figma UI-Kit.

Wondering how to use the UI-Kit within Figma after gaining access to it? Try these instructions (746KB PDF)

Below is a training video demonstrating how to use the Figma UI-Kit:

Webflow

A Webflow template is also available for designers who belong to the Dell Digital Design team. Once you are a member of this team, you can use the template by selecting the "+ New Project" button in the upper right corner of the page, and then selecting the "DDS Project Template" from the available templates. Please email delldesignsystem@dell.com with questions or requests.

View the published DDS Project Template