Digital Campus Framework
Clone or download
skoolbus39 Merge pull request #222 from skoolbus39/backgrounds
Add color variables for overlay backgrounds, use in mixins/utilities
Latest commit d2fcd04 Jan 15, 2019

README.md

dcf

Digital Campus Framework

Objective

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.

Usage

Directories and Files

Developers seeking to use DCF can find assets to work with in the assets/dist folder.

Sass Files

/assets/dist/scss/**/*.scss

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 theme layer:

  • 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.

JavaScript Files

/assets/dist/js

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 /assets/dist/js:
    • 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.

CSS Files

/assets/src/css/vendor/**/*.css

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

Run npm install to install the required node modules. You are good to go!