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
  26 ## Getting Started
  27
  28 Compiling SASS files locally requires [node.js](http://nodejs.org) and [npm](https://www.npmjs.com/).
  29
  30 1. **Setup your local development environment** as described in [CONTRIBUTING.md](../CONTRIBUTING.md)
  31
  32 - If running on a local machine, run `npm install` from the root directory.
  33 - If running in docker: `docker exec -it [your_container_id] /bin/sh` then cd into `openemr`
  34
  35 From here you can either:
  36 * `npm run dev` - just compiles the local `.scss` files and recompiles them whenever they are changed.
  37 * `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)
  38     * [See video of `dev-sync` in action](https://imgur.com/a/C0dVnfq)
  39
  40 ## TODOs
  41 - [ ] Incorporate tabs_style_compact.css and tabs_style_full.css (and associated RTL) into scss
  42 - [x] Don't require 2 build runs to build the rtl themes
  43 - [ ] Add a lot of documentation on current component usage (starting with theme-only components)
  44 - [ ] Migrate style dependencies in the php code to use the components from the `interface` directory
  45 - [ ] Migrate component css still left in the `/themes` directory into scss