| Table of Contents |
|---|
Visual Studio code
This is the IDE that we all use for development and is a very powerful tool.
If you haven’t already, download and install the latest version of Visual Studio Code
  Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. |
...
Node
This is required for running gulp when we wish to make customizations to the code. Download and install the latest version. (For any version below 2.5, the latest version of node that we can run is version 10.
...
Install Node Packages
This is most easily done through a terminal when running the Visual Studio Code.
...
This will install all of the packages defined in the package.json file that we need for gulp to work.
Gulp
Install gulp globally. This is most easily done through a terminal when running the Visual Studio Code.
...
Gulp is only required if you are modifying SASS files or in need of supporting ie11… if you wish to add some entries into a CSS file, then this will work as well… you will just be a bit more limited in what you can achieve. Once this is done you can run gulp from the terminal window: Leave this running in the terminal and any changes you make will be automatically compiled into the required files that the browser will pick up on a full refresh.
...
Stylesheet customization
In ApliqoUX we use SASS https://sass-lang.com/
Sass is completely compatible with CSS, so you can happily write CSS as you know it in a Sass (scss) file. If however, you are not syntactically correct then the gulp process will show an error message upon saving.
...
Here is a link to the Sass basics which will give you a good starting point Sass: Sass Basics
The 2 main things you will need to use are
...
variables (Sass: Variables) colour functions (Sass: sass:color)
How to find variables or CSS that needs to be modified
For example, if you wish to change the color of the active item in the menu but you don’t know what the sass variable name is you need to inspect the item in chrome.
...