Getting Started - File Structure | Crossroads Digital Design Kit

Getting Started

File Structure

Since crds-styles is meant to be imported directly into your scss-compatible project, there is no actual build process included to generate compiled CSS output. The build script included in the project simply exists to facilitate the continuous integration environment by which we publish new versions of the package to NPM.


All stylesheets are contained within the assets/stylesheets directory. This convention follows suit with bootstrap-sass and allows for a sensible, framework-agnostic file-path that may be extended to other package management solutions down the road.

In keeping with the modular methodology of OOCSS, we’ve organized the file-structure for all .scss files in crds-styles with a similarly, modular approach. All files are organized within one of the following groups…


Global element rules, included first, that may be inherited by more specific components. Examples include: html, body element defaults, global pseudo classes, reset rules, etc.


Distinct UI components that are styled independent of their context. Examples include: buttons, headings, alerts, form elements, etc.


Global components that comprise the overall page layout of any given template. Examples include: container elements, global header, global footer etc.


Augmentations of certain global rules related to distinct "themes", such as the ‘dark-theme’ visible within the DDK.


Composable helper classes and selectors that aren’t tied to a specific components or layouts belong in the utilities group. Examples include: text-center, bg-success, etc.

For each group above, there is an included _modules.scss file which acts as a manifest for the entire directory. When adding new files to any of these directories, you’ll want to update the manifest to import your new addition.


All included icons are formatted as individual SVG files and saved to the src/assets/svgs directory. When recompiling the SVG sprite, the build command will automatically include any file contained within this directory and generate a new version of the sprite located in assets/svgs.

When creating new icons, please refer to the documentation to ensure consistent display and flexibility across browsers & platforms.