General Purpose Coding

For general purpose (i.e. not component-related) CSS and JavaScript authoring use the following guidelines.

CSS

General purpose CSS can be found in src\css directory and has the structure as below. In most cases, there shouldn’t be any need to add extra files. If one arises, create a new Sass partial with the name prefixed by underscore and import it in relevant __all.scss file.

  • src/css - general purpose CSS
    • core - styles for foundation areas of the project
      • __all.scss - imports all core partials
      • _body.scss - <body> tag and outer container styles
      • _font.scss - web font definitions
      • _print.scss - styles for print media
      • _typography.scss - style applications for headings and copy
    • cp - styles for the CMS control panel styling
    • helpers - Sass mixins and utility classes
      • mixins - Sass mixins
      • utilities - utility CSS classes
      • __all.scss imports all helpers partials
    • setup - custom resets and CSS for third-party tools
      • __all.scss imports all setup partials
      • vendor - inclusions of third-party CSS

JavaScript

General purpose JavaScript can be found in src/js folder. If the functionality you’re implementing doesn’t fit into the existing structure, create a partial in src/js/modules folder and include it in _all.js file.

  • js - JavaScript code
    • cp - custom functionality for the CMS control panel
    • misc - various helper files
    • modules - scripts for general functionality
    • app.js - collates all the general functionality scripts
    • vendor.js - collates third-party JavaScript libraries