From 7fbf56eca33b093737e0d55e8a0fbb46698c13fa Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Sat, 4 Jul 2026 23:15:57 +0100 Subject: [PATCH 1/2] A little bit of documentation about CSS and the hook inverse --- apidocs/dev/webapp.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/apidocs/dev/webapp.md b/apidocs/dev/webapp.md index 2a4c7430..9fcd53e2 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 CSS global CSS,a dn the CSS of some webapp components is written using the LESS (Leaner Style Sheets) language extension. The LESS is then preprocessed into pure CSS. + +For CSS we use UIKit for most of the CSS. Where posdible 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 darkmode 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 conisdering 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` From 37cba4d0746fa0e45c21013319b1eaa48a64720e Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Tue, 7 Jul 2026 18:03:26 +0000 Subject: [PATCH 2/2] Apply suggestions from code review of branch css-docs Co-authored-by: Beth Probert --- apidocs/dev/webapp.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apidocs/dev/webapp.md b/apidocs/dev/webapp.md index 9fcd53e2..900ac121 100644 --- a/apidocs/dev/webapp.md +++ b/apidocs/dev/webapp.md @@ -58,11 +58,11 @@ To enforce code style we and quality we use ESLint and Prettier. Both can be run ## CSS: Workflow -Our CSS global CSS,a dn the CSS of some webapp components is written using the LESS (Leaner Style Sheets) language extension. The LESS is then preprocessed into pure CSS. +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. -For CSS we use UIKit for most of the CSS. Where posdible we use UIKit CSS classes for styling. Some of the UIKit classes have some global modifications in the `webapp/src/assets/less` directory. +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 darkmode 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: +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{ @@ -75,7 +75,7 @@ For styling in darkmode and light mode we make use of the UIKit `.hook_inverse() } ``` -Defining colours and their inverse globally allows for conisdering 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. +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.