Whether you are a designer or a developer, we can help you get onboard with the Dell Design System.
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.
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.
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, 0.1.9, 0.2.1
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:
or through the command line:
To install the node module, in your project’s command line, run:
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:
UI Core has an example on using the node module with an Angular 7 project available here:
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:
Versions available: 0.1.1, 0.1.3, 0.1.5, 0.1.6, 0.1.7, 0.1.8, 0.1.9, 0.2.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>/
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
Place the following <script>s near the end of your pages, right before the closing </body> tag.
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:
For any questions or concerns, please feel free to reach out to the team via our Slack channel @uicore-public, or through our email email@example.com
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!
An Adobe XD UI-Kit is available for designers. Please email Josh Baron (firstname.lastname@example.org) 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:
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 (email@example.com) with questions or requests.