Merge branch 'css-docs' into 'v3'

CSS dev docs

Closes #804

See merge request openflexure/openflexure-microscope-server!645

apidocs/dev/webapp.md

@@ -49,10 +49,35 @@ If your microscope hostname is not `microscope`, you can use local environment f
 
 **Note:** If you have performance issues with lag, this can be caused by mDNS speed for your setup. To avoid mDNS, overload `VITE_MICROSCOPE_HOST` with the IP address of your microscope, rather than the host name.
 
-# Javascript: Formatting and linting
+## Javascript: Formatting and linting
 
 To enforce code style we and quality we use ESLint and Prettier. Both can be run together with the same command.
 
 - To check the for errors and warnings run `npm run lint`
 - To automatically fix errors and warnings run `npm run lint:fix`
 
+## CSS: Workflow
+
+Our global CSS, and the CSS of some webapp components is written using the [LESS (Leaner Style Sheets) language extension](https://lesscss.org/). The LESS is then pre-processed into pure CSS.
+
+We use [UIKit](https://getuikit.com/docs/introduction) for most of the CSS. Where possible we use UIKit CSS classes for styling. Some of the UIKit classes have some global modifications in the `webapp/src/assets/less` directory.
+
+For styling in dark mode and light mode we make use of the UIKit `.hook_inverse()` function. Note that this function is not available in components. To create a style which needs to change in dark mode, the class (and its inverse) should be defined in `webapp/src/assets/less/variable.less`. For example:
+
+```css
+.ofm-opaque-element{
+    background: #f5f5f5;
+}
+.hook-inverse() {
+    .ofm-opaque-element{
+        background: #282626;
+    }
+}
+```
+
+Defining colours and their inverse globally allows for considering the reasoning for the colour and defining a name based on what the colouring is achieving. This helps colouring to be consistent across the application.
+
+For linting CSS we use Stylelint.
+
+- To check the for errors and warnings run `npm run lint:style`
+- To automatically fix errors and warnings run `npm run lint:style:fix`