diff --git a/apidocs/dev/webapp.md b/apidocs/dev/webapp.md index 2a4c7430..900ac121 100644 --- a/apidocs/dev/webapp.md +++ b/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`