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.0.0, 1.1.0, 1.2.0, 1.3.0, 1.3.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.0.0, 1.1.0, 1.2.0, 1.3.0, 1.3.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>/

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.3.1/css/dds-reboot.min.css">
      <link rel="stylesheet" href="https://uicore.dellcdn.com/1.3.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.3.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.3.1/css/dds-reboot.min.css">
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.3.1/css/dds-all-with-fonts.min.css">
		
    <!-- Optional JavaScript -->
    <!-- UI Core JS -->
    <script src="https://uicore.dellcdn.com/1.3.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.3.1/js/dds-all.min.js"></script>

Example Starter Page For Module Based 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.3.1/css/dds-reboot.min.css">
    <link rel="stylesheet" href="https://uicore.dellcdn.com/1.3.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.3.1/js/dds-all.min.js"></script>
  </body>
</html>

Videos

Getting Started

The Dell Design System team conducted a training session with the OSC development team. This training session was recorded and offers a good overview of how Dell developers can integrate with the Dell Design System. This video is available to Dell employees only. If you have questions and would like the UI Core team to provide a overview for your team, feel free to reach out!

Dell Design System Developer Training Screenshot

Using Angular 7 with Node Module

The Dell Design System team demonstrates how to use the node module with Angular 7.

Dell Design System Developer Training Screenshot

UI Kits

Adobe XD

An Adobe XD UI-Kit is available for designers. Please email Josh Baron (josh_baron@dell.com) for access to the XD UI-Kit for now. Eventually it will get 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:

Webflow

A Webflow template is also available for designers. To use the template, navigate to the desired Webflow project folder and then select the "+ New Project" button in the upper right corner of the page. Then select the "DDS Project Template" from the available templates. Please email Vasken Sayre (vasken_sayre@dell.com) with questions or requests.