A chrome extension that switches from to the dev version of the King's Online Design System CSS on any KEATS page.
The King's Online Design System is constantly being refined with new features and enhancements lined up for the next release. A Chrome extension has been developed in order to help users visualise how a live page will look upon the next release by displaying the page with the development stylesheets.
The extension is a small software program which can only be used on Chrome. Ensure that you have the browser available and continue with the following steps.
Clicking the Code button activates a dropdown menu. Select Download ZIP to save the files locally.
Navigate to the zipped folder using the File explorer and select Extract all... to unzip the files to a chosen location on your device.
- Return to the browser and open the settings page (or copy chrome://settings/ to the address bar), selecting Extensions
- Toggle on Developer mode in the top right of the toolbar
- Select the Load unpacked button from the button group
- Locate the folder saved in Step 2 and Select folder and dev-it-up extension will now appear in its own card within the extensions panel.
- To the right of the address bar, selecting the Extentions puzzle piece icon will allow you to pin the dev-it-up extension
Upon successful installation of the extension, the dev-it-up icon will appear to the right of the address bar. Click the icon to toggle the extension on and off.
The icon will display as grey when inactive and red when the extension is running.
The extension has access to all KEATS pages. If the page you wish to view was already loaded prior to the installation of the extension, you may need to perform a hard refresh before activating the extension. In Windows, the shortcut for this is Control + F5 and on a Mac, the shortcut is Command + Shift + R. If the extension is already active when opening a KEATS page, you may need to toggle the extension off and on again to see the effects.
The extension works by switching CSS files only. The development JS files will not be introduced and any visual changes or interatcions that rely on JS updates will not be available.