rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply suggestions from code review of branch css-docs

Browse source 
Co-authored-by: Beth Probert <beth_probert@outlook.com>
This commit is contained in:
Julian Stirling 2026-07-07 18:03:26 +00:00
parent 7fbf56eca3
commit 37cba4d074
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apidocs/dev/webapp.md
View file

@ -58,11 +58,11 @@ To enforce code style we and quality we use ESLint and Prettier. Both can be run
## CSS: Workflow ## 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 ```css
.ofm-opaque-element{ .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. For linting CSS we use Stylelint.