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.


Stylesheets

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…

Base

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.

Components

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

Layouts

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

Themes

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

Utilities

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.


SVGs

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.