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 based off of Bootstrap 4.1.3 [see official Bootstrap documentation at https://getbootstrap.com/docs/4.0/getting-started/introduction/], and can be used similarly to the Bootstrap 4 components. To prevent styles and behavior conflicts by existing Bootstrap components, UI Core components must be prefixed with dds__ (eg. dds__alert) to use.

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.

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). There are no modularized components when using the CDN method.

Node Modules

Versions available: 0.1.1, 0.1.2, 0.1.3, 0.1.4, 0.1.5, 0.1.6, 0.1.7, 0.1.8
Requirements: This requires the registry set to be set to Dell’s Artifactory (dcsartifacts). This can either be set through your .npmrc file by adding this line:

registry=http://dcsartifacts.dell.com/artifactory/api/npm/npm-local/

or through the command line:

npm config set registry http://dcsartifacts.dell.com/artifactory/api/npm/npm-local/

To install the node module, in your project’s command line, run:

npm install --save-dev @dds-uicore/all@0.1.8

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:

UI Core has an example on using the node module with an Angular 7 project available here:
https://gitlab.dell.com/koa/ui-core/Examples/uicore-angular

Note: For Angular projects, there is a Node type declarations package you need to install to be able to translate our JS from ES5 to TypeScript: npm install @types/node

UI Core has an example on using the node module with a React project available here:
https://gitlab.dell.com/koa/ui-core/Examples/uicore-react

CDN

Versions available: 0.1.1, 0.1.3, 0.1.5, 0.1.6, 0.1.7, 0.1.8
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

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.


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

JS

We do not have any dependencies on third-party libraries. Although we are based on Bootstrap 4, we have removed jQuery and popper.js dependencies in favor of pure Javascript.

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

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

Example Starter Page

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/0.1.8/css/dds-reboot.min.css">
    <link rel="stylesheet" href="https://uicore.dellcdn.com/0.1.8/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/0.1.8/js/dds-all.min.js"></script>
  </body>
</html>

Communication

For any questions or concerns, please feel free to reach out to the team via our Slack channel @uicore-public, or through our email koa-uicore@dell.com

Getting Started Video

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

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.