CDS Design Guide Core & Base Modules

The foundation of the Coud Data Services Design Guide is the CDG Core and Base modules.

The Core module represents our foundational design elements. This includes our color and type system and will in the future contain any globally usable variables or concepts.

The Base module contains our default and standard interface elements.

Usage

The preferred model of consumption for CDG-Core is through our packaged NPM module. To install, run this command in your project directory:

npm install --save-dev cdg-core

In order to use the entire Module in your stylesheets, simply inport the _index.scss file from the module root directory in your Sass stylesheet:

@import '{{PATH_TO_NODE_MODULES}}/cdg-core/index';

To import only the Core or the Base modules, simply bypass the global index and use one the submodule indices like so:

// Just the core module
@import '{{PATH_TO_NODE_MODULES}}/cdg-core/core/index';

// Just the base module
@import '{{PATH_TO_NODE_MODULES}}/cdg-core/base/index';

Beta Modules

By default, the index of each directory will only access the dev-ready submodules. If you require access to the submodules in beta development in addition to the dev ready modules, simply add the -beta to the end of your imports.

@import '{{PATH_TO_NODE_MODULES}}/cdg-core/index-beta';

Modules and Status

Core

Module | Status | Description -------- | ---------- | ----------- Colors | Dev Ready | Our color system and color() function. Type | Dev Ready | Our type system and font() mixin. Units | Do Not Use | Standardized spacing and measuring units.

Base Elements

Module | Status | Description ----------- | ---------- | ----------- Root | Dev Ready | Root elements resets and defaults Buttons | Beta | Buttons Forms | Beta | Forms Links | Do Not Use | Links and Calls to Action Lists | Do Not Use | Lists Media | Do Not Use | Media Tables | Beta | Tables Block Text | Do Not Use | Block-level text elements Inline Text | Do Not Use | Inline-level text elements Utility | Beta | Utility classes and functions