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.
Directories and Files
Developers seeking to use DCF can find assets to work with in the
There will be no SASS compilation of
.scss files in DCF Core. SASS files are provided as is. Sass compilation is
done on the theme layer to allow additional theme
.scss files to be compiled alongside core
.scss files. This also
allows theme layer scss
files to make use of includes and mixins defined in DCF core. There should be three "main/index" scss files in the
main.scss- brings together all the core and theme layer sass partials for compilation
print.scss- brings together all the core and theme layer print-related partials from the print folder for compilation
mustard.scss- brings together partials from the mustard folder for fallback styles that will be used in the 'cutting the mustard' approach
Use a SASS glob plugin for your task runner to pull in the partials from DCF core in your entry files. See the example folder on how to structure the imports using SASS globs.
Bearing in mind the different build tools and processes out there, we have decided to provide files with minimal modifications (e.g. concatenated/minified) to allow users to easily incorporate them into their build environment.
- There will be three folders under
vendor: Contains third-party vendor JS files that are required by DCF, since vendor files do not change frequently, outputting a separate vendor file helps with browser caching.
mustard: We encourage users to utilize polyfill.io to provide fallbacks for older browsers. The mustard folder contains unminified polyfills that are not supported in polyfill.io for features that DCF widgets will be using at the users convenience. We also encourage you to implement cutting-the-mustard method by feature-testing before bringing in the needed polyfills.
app: Custom written JS modules that includes common distributed and optional files.
common: Minified and transpiled, JS modules/widgets that are part of DCF and should be implemented
optional: Minified and transpiled, Optional JS modules/widgets that can be required when additional functionality is wanted.
preBabel: Unminified. Custom and Optional modules in ES6
postBabel: Unminified and transpiled. Custom and Optional modules.
DCF Core uses SASS. The CSS folder is mainly used for vendor associated CSS files which can later be concatenated to your compiled CSS file and then minified.
Installing the project
npm install to install the required node modules.
You are good to go!