my.jisc v0.0.1

Front-end foundations (FEF)

Front-end foundations (FEF) is added as a git submodule within the theme (themes/jisc_fef/front-end-foundations); the dependency is noted in myjisc/.gitmodules (outside of the theme).

Initial set up

1. cd /themes/jisc_fef
2. Add FEF repo as Git submodule: git submodule add git@github.com:janetuk/front-end-foundations.git
3. Initialize the submodule: git submodule update --init --recursive
4. cd front-end-foundations

Set Front-end foundations to use the correct release branch (done each feature)

1. cd /themes/jisc_fef
2. Update FEF submodule: git submodule update --init --recursive
3. cd front-end-foundations
4. Get latset FEF branches: git fetch --all
5. Check status: git status
6. Check what releases are available: git tag
7. Checkout latest release that My Jisc has been updated to work with: git checkout v0.2.1.0-alpha

(S)CSS

• There is a single CSS file used by pages, via css_placeholder: css/all.min.css.
• For debugging purposes css/all.css is also built.
• The CSS architecture is ITCSS.
• CSS is built from scss/all.scss. This includes partials from both FEF and this theme.
• These partials are included together, in alphabetical order by architecture layer; FEF is just used as a storehouse of global variables, global mixins, global CSS styling, global objects and global components.

Font Awesome

Initial set up

• Add the node package: npm install --save-dev @fortawesome/fontawesome-free
  • This updates the theme's package.json (though @zzcgulm had to manually add the file first, with the right dependency).

General

• Font Awesome (FA) is added as a node package; the dependency is noted in package.json.
• We use Font Awesome Free.
• We use the SVG with JavaScript implementation. (TODO @@faisaltaher1)
  • FA SCSS partials are included in all.scss. These are built into our CSS and used in concert with the FA webfonts as a fallback when JS is not available to the browser; font characters are rendered instead of SVG icons.

JavaScript unit tests

JavaScript unit tests are currently run using a Karma and Jasmine framework. Karma enables the running of source code on a specified browser (eg Chrome) by using the command line interface. Our implemention uses a headless Chrome browser to load JavaScript code. We then run our assertions by using Jasmine.

More information about this approach can be found here

Running tests

System requirements:

• Node version >= 8
• NPM

To run the current tests:

• navigate to /themes/jisc_fef
• ensure you have installed the Node packages by running npm install
• run npm test

Adding a new test

Tests are currently located in /themes/jisc_fef/test/. To add a new test, create a file in the test directory, eg /test/example-test.js

The test runner will automatically pick up any test files within this directory.