Digital Campus Framework
DCF contains core scripts and styles which are used as 'plumbing' and a foundation to build a theme. It is created to be brand agnostic. The core scripts and styles help create a more consistent user experience, incorporate the best possible web accessibility accordance, and allow for ease of development across themes, while individual themes built upon it allows for customizations and brand identity.
TBD
TBD
TBD
Note: gulp-scss-lint (https://www.npmjs.com/package/gulp-scss-lint) requires Ruby and the Ruby Gem scss_lint. For consistency, use version 2.6.x of Ruby.
Run npm install to install the required node modules.
When being implemented in a theme, DCF expects the Modular Scale package to be available and for an number of SASS variables to be defined.
Ensure the modularscale-sass package is installed at the theme layer. It is necessary for compiling the SASS provided by DCF.
Depending on the SASS compilation tools used, it may be necessary to include the path for modularscale-sass. For example, use includePaths for Gulp and for Grunt.
A Gulp example is provided below:
.pipe(sass({
includePaths: [ 'node_modules/modularscale-sass/stylesheets' ]
}))
The theme needs to define a number of variables for DCF:
- Border radius
$roundrect
- Background colors
$color-body-bg
- Text colors
$color-body$color-heading
- Links
$color-link$color-link-visited$color-link-hover$color-link-active
- Inverse
$color-inverse-link$color-inverse-link-visited$color-inverse-link-hover$color-inverse-link-active
- Buttons
$color-button-hover
- Borders
$color-border
- Marks (highlights) background color
$color-mark
- Badges
$color-badge
- Captions
$color-caption
- Tables
$color-table-stripe
If any of these variables is not available, then SASS compilation will fail.
See /example/dcf/variables/_variables.borders.scss and /example/dcf/variables/_variables.colors.scss for examples.