cdg-core v0.7.1
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 |