interface/README.md

   1 # OpenEMR-interface
   2
   3 The OpenEMR UI is built with [SASS](https://sass-lang.com/) on top of a bootstrap base (compiled with [gulp](https://gulpjs.com/)).
   4
   5 ### Themes
   6
   7 Different `themes` share a common `core` and have their own overrides to customize the appearance of OpenEMR.
   8
   9 There are three different types of themes:
  10 * The `light` theme is the default modern theme
  11 * The `manila` theme is a combination of OpenEMR's legacy themes (which have all been removed) with some modern elements.
  12 * The other themes (called `colors`) are the same `color_base` theme with different color palettes.
  13
  14 `rtl_` prefixed themes are built by appending the `rtl.css` file to every theme automatically. These overrides provide right to left adjustments for all `style*.css` files
  15
  16 Files specific to different themes are named with the following conventions:
  17 * `themes/core` contain shared styles that all themes import toward the top of their files
  18 * `themes/colors` contain all changes specific to the color theme work (led by [zbig01](https://github.com/zbig01))
  19 * `themes/[component_name]` (e.g. `buttons` or `navigation-slide`) contain files named after each theme variant.
  20     * See TODOs on how we might be able to manage component-level styles in the future
  21
  22 ### Special Classes
  23
  24 * `position-override` gives a hook for style to change placement of buttons. In light/manila style this is ignored and buttons go to left positioned under data entry field. Whereas in the other styles this is used to center the buttons.
  25 * `oe-opt-btn-group-pinch` gives a hook for style to pinch the buttons (i think make them more rounded). Not used in light/manila, but used in other styles.
  26 * `oe-opt-btn-separate-left` gives a hook to place a space between the buttons. Not used in light/manila, but used in other styles.
  27 * `oe-text-to-right` does as it says (and then does the opposite for RTL languages).
  28 * `oe-text-to-left` does as it says (and then does the opposite for RTL languages).
  29
  30 ## Getting Started
  31
  32 Compiling SASS files locally requires [node.js](http://nodejs.org) and [npm](https://www.npmjs.com/).
  33
  34 1. **Setup your local development environment** as described in [CONTRIBUTING.md](../CONTRIBUTING.md)
  35
  36 - If running on a local machine, run `npm install` from the root directory.
  37 - If running in docker: `docker exec -it [your_container_id] /bin/sh` then cd into `openemr`
  38
  39 From here you can either:
  40 * `npm run dev` - just compiles the local `.scss` files and recompiles them whenever they are changed.
  41 * `npm run dev-sync` (EXPERIMENTAL*) - loads your local OpenEMR instance using BrowserSync (port 3000) in front of 80 (feel free to edit the package.json to change the port)
  42     * [See video of `dev-sync` in action](https://imgur.com/a/C0dVnfq)
  43
  44 ## TODOs
  45 - [ ] Incorporate tabs_style_compact.css and tabs_style_full.css (and associated RTL) into scss
  46 - [x] Don't require 2 build runs to build the rtl themes
  47 - [ ] Add a lot of documentation on current component usage (starting with theme-only components)
  48 - [ ] Migrate style dependencies in the php code to use the components from the `interface` directory
  49 - [ ] Migrate component css still left in the `/themes` directory into scss