dnb-product-styles

Global product styles and components. D&NB custom fork of Bootstrap 3.3.5

Usage no npm install needed!

<script type="module">
  import dnbProductStyles from 'https://cdn.skypack.dev/dnb-product-styles';
</script>

README

D&B Product Design Guide

The D&B Product Design Guide created to make your job easier! It includes everything you need to quickly recreate any of the examples found on the Product Design Guide website.

Current Version: 0.0.18

These components are a customization of Bootstrap and the items provided here are intended to be used in lieu of Bootstrap. You can follow the guidlines set by Bootstrap to create the elements and layouts you need. Any nuances added by the D&B UXD team are noted on the Product Design Guide Documentation page with sample code snippets.

New components are being added regularly, so make sure you have the latest version. If you need something that has not yet been added, please contact Cassie Sharp and we will try to get it added as quickly as possible.

Download

There are a few ways to get started:

Precompiled Code

Preompiled and minified CSS, JavaScript, and global images. No docs or original source files are included. Link up the files of your choice in your <head> and you're good to go.

Source Code

Source Less, JavaScript, and basic images, along with our docs. Requires a Less compiler. Setup after download will depend on how you plan on using it.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Precompiled Code

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Product Design Guide. You'll see something like this:

dnb-product-styles/
  ├── css/
  │   ├── dnb-product-styles.css
  │   ├── dnb-product-styles.css.map
  │   └── dnb-product-styles.min.css
  ├── img/
  │   └── General D&B Images
  └── js/
         ├── dnb-product-styles.js
         └── dnb-product-styles.min.js

We provide compiled CSS and JS (dnb-product-styles.*), as well as compiled and minified CSS and JS (dnb-product-styles.min.*). CSS source maps (dnb-product-styles.*.map) are available for use with certain browsers' developer tools. We also provide the source code for LESS and javascript, in case you need to customize something for your specific app and to give you access to the LESS variables.

Custom icon fonts are imported into the CSS and do not require anything to set up.

Source Code

The D&B Product Design Guide source code download includes the precompiled CSS, JavaScript, and image assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:

dnb-product-styles/
  ├── less/
  ├── js/
  ├── dist/
  │   ├── css/
  │   ├── js/
  │   └── img/
  └── documentation/
      └── demo/

The less/ and js/ are the source code for our CSS and JS (respectively). The dist/ folder includes everything listed in the precompiled download section above. The documentation/ folder includes the source code for our documentation, and demo/ includes a few examples of D&B Product Design Guide usage. Beyond that, any other included file provides support for packages, license information, and development.

Custom icon fonts are imported into the CSS and do not require anything to set up.

Documentation

D&B Product Design Guide documentation, included in this repo in the root directory, is publicly hosted at http://uxd-staging.com/product-style-guide/documentation/. The docs may also be run locally.

Designed, coded, and maintained (with love) by the D&B UXD Team. For questions or additional help, contact Haidy Francis.