1 | # Molgenis Theme
|
2 |
|
3 | Molgenis-theme is the SCSS/Bootstrap-based Molgenis theming source. Its purpose
|
4 | is to streamline the theming workflow by:
|
5 |
|
6 | * Simplifying the creation of new themes
|
7 | * Making existing themes maintainable & consistent
|
8 | * Providing a better frontend developer styling experience
|
9 | * Establishing and simplifying the publishing & distibution workflow
|
10 |
|
11 | ## Prerequisites
|
12 |
|
13 | * [Docker](https://docs.docker.com/docker-for-mac/install/)
|
14 | * [Docker-compose](https://docs.docker.com/compose/install/)
|
15 | * [Node.js](https://nodejs.org/dist/v14.9.0/node-v14.9.0.pkg) 14+
|
16 | * [Yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable)
|
17 | * [Visual Studio Code](https://code.visualstudio.com/docs/setup/mac)
|
18 |
|
19 | ## Getting started
|
20 |
|
21 | ```bash
|
22 | git clone git@github.com:molgenis/molgenis-theme.git
|
23 | cd molgenis-theme
|
24 | yarn
|
25 | # Set the default config file
|
26 | cp .env.defaults .env
|
27 | # Build the selected theme (MG_THEME in .env)
|
28 | yarn build
|
29 | ```
|
30 |
|
31 | :tada: Congratulations! You just generated the default *molgenis-blue* theme.
|
32 |
|
33 | > CSS files were written to the **dist** directory. Each theme has a Bootstrap 3
|
34 | and a Bootstrap 4 file.
|
35 |
|
36 | ## Configuration
|
37 |
|
38 | The configuration for Docker and the SCSS tool are set from a shared
|
39 | environment file; the **.env** file. It has the following options:
|
40 |
|
41 | ```bash
|
42 | # Docker-specific; just ignore this.
|
43 | COMPOSE_IGNORE_ORPHANS=True
|
44 | COMPOSE_PROJECT_NAME=mg_projects
|
45 |
|
46 | # Remote proxy only; use with 'yarn proxy'
|
47 | MG_PROXY=https://master.dev.molgenis.org
|
48 | # Docker host ip; use with 'yarn proxy-services'
|
49 | # MG_PROXY=http://172.19.0.1:8080
|
50 | # Docker service molgenis host; Use with 'yarn proxy-services-molgenis'
|
51 | # MG_PROXY=http://molgenis:8080
|
52 |
|
53 | # URL to the theme generator service from the NGINX docker container.
|
54 | MG_PROXY_THEMEGEN=http://172.18.0.1:3030
|
55 |
|
56 | # (!) The theme to serve and watch. Please note that
|
57 | # you need to restart both the docker services and
|
58 | # the SCSS tool after changing this variable.
|
59 | MG_THEME=molgenis-blue
|
60 | ```
|
61 |
|
62 | ## Modify a Theme
|
63 |
|
64 | * Serve the theme
|
65 |
|
66 | ```bash
|
67 | # Proxy master.dev.molgenis.org on http://localhost
|
68 | yarn proxy
|
69 | # Start dev-service from another console tab:
|
70 | yarn dev
|
71 | ```
|
72 |
|
73 | * Open [localhost](http://localhost) in Chromium.
|
74 |
|
75 | > This is the public [dev server](https://master.molgenis.org) using the local
|
76 | styling of the *molgenis-blue* theme
|
77 |
|
78 | * Install the Chrome
|
79 | [livereload extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
|
80 | * Switch livereload on
|
81 | * Try changing variable **$mg-color-primary** in **molgenis-blue/_variables.scss**
|
82 |
|
83 | The theme on the webpage should now automatically reflect your changes on save.
|
84 | Browse through the [base theme](/scss/molgenis) to get an idea how a theme
|
85 | is being constructed.
|
86 |
|
87 | ## Conventions
|
88 |
|
89 | Bootstrap 3 & 4 CSS are being used in Molgenis. This creates extra overhead,
|
90 | but is sadly a necessity while Bootstrap 3 is still in use in some apps.
|
91 | When creating a new theme, please try to maintain the following workflow order:
|
92 |
|
93 | * Use existing Bootstrap classes wherever possible
|
94 | * Apply only variables from **/scss/molgenis/_variables.scss** in the theme
|
95 | * Refactor Molgenis variables in scss/molgenis if necessary
|
96 |
|
97 | > (!) Keep in mind that changes to the base theme are applied to **all** themes.
|
98 |
|
99 | <details>
|
100 | <summary><em>Common SCSS locations & their meaning</em></summary>
|
101 |
|
102 | ```markdown
|
103 |
|
104 | * Bootstrap 3 variables are in `./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss`
|
105 | * Bootstrap 4 variables are in `./node_modules/bootstrap-scss/_variables.scss`
|
106 | * `scss/molgenis/theme-3/_theme.scss` is the root of the Molgenis Bootstrap 3 theme
|
107 | * `scss/molgenis/theme-4/_theme.scss` is the root of the Molgenis Bootstrap 4 theme
|
108 | * Bootstrap 3 variables are customized in `./scss/molgenis/theme-3/_variables.scss`
|
109 | * Bootstrap 4 variables are customized in `./scss/molgenis/theme-4/_variables.scss`
|
110 | * `scss/molgenis/_variables.scss` contains themable variables that can be overridden in `./themes/mytheme/_variables.scss`
|
111 | * Theme-agnostic fixes MUST be made in the main theme at `./scss/molgenis`
|
112 | * Theme variables that differ between Bootstrap 3 and 4 start with a `mg-` prefix
|
113 | * Theme variables that are similar in Bootstrap 3 and 4 are used directly without `mg-` prefix
|
114 | * Do NOT use variables in themes that are not already in `scss/molgenis/_variables.scss`
|
115 | * Keep `scss/molgenis/_variables.scss` small and tidy
|
116 |
|
117 | This is mainly legacy. Custom selectors should be removed in the long run,
|
118 | or moved to Vue theme-agnostic component styling:
|
119 |
|
120 | * Generic selectors Bootstrap 3: `scss/molgenis/theme-3/_custom.scss`
|
121 | * Molgenis elements Bootstrap 3: `scss/molgenis/theme-3/modules/_some-page-element.scss`
|
122 | * Molgenis modules Bootstrap 3: `scss/molgenis/theme-3/modules/_some-module.scss`
|
123 |
|
124 | * Generic selectors Bootstrap 4: `scss/molgenis/theme-4/_custom.scss`
|
125 | * Molgenis elements Bootstrap 4: `scss/molgenis/theme-4/modules/_some-page-element.scss`
|
126 | * Molgenis modules Bootstrap 4: `scss/molgenis/theme-4/modules/_some-module.scss`
|
127 |
|
128 | * Generic selectors Bootstrap 3+4: `scss/molgenis/_custom.scss`
|
129 | * Molgenis elements Bootstrap 3+4: `scss/molgenis/elements/_some-page-element.scss`
|
130 | ```
|
131 |
|
132 | </details>
|
133 |
|
134 | ## Distribution
|
135 |
|
136 | The generated theme CSS files are published to [npm](http://npmjs.com/@molgenis-ui/molgenis-theme)
|
137 | as soon as a new fix/feat [commit](https://github.com/molgenis/molgenis-theme/actions?query=workflow%3ACI)
|
138 | is detected on the master branch. [Unpkg](https://unpkg.com/browse/@molgenis-ui/molgenis-theme@latest/)
|
139 | is used to serve the CSS files directly. The default urls for the Molgenis-blue theme are:
|
140 |
|
141 | ```bash
|
142 | /@molgenis-ui/molgenis-theme/dist/themes/mg-molgenis-blue-4.css
|
143 | /@molgenis-ui/molgenis-theme/dist/themes/mg-molgenis-blue-3.css
|
144 | ```
|
145 |
|
146 | A new feature is to serve stylesheets dynamically. We would still have a set of
|
147 | versioned and published themes to choose from, but also the option to generate
|
148 | a theme from the Molgenis UI on-the-fly. This makes it easy for customers to
|
149 | setup their own theme with just a few clicks. This requires a simple theming
|
150 | service backend and a new [theming manager frontend](https://github.com/molgenis/molgenis-frontend/tree/poc/generated-themes).
|
151 |
|
152 | * Start the SCSS service
|
153 |
|
154 | ```bash
|
155 | yarn service
|
156 | ```
|
157 |
|
158 | > The theme-manager posts a request body like this to the [theming service endpoint](http://localhost:3030/theme):
|
159 |
|
160 | ```json
|
161 | {
|
162 | "name": "molgenis-blue",
|
163 | "variables": {
|
164 | "mg-color-primary": "#f00",
|
165 | "mg-color-primary-contrast": "#ff0",
|
166 | "mg-color-secondary": "#00f",
|
167 | "mg-color-secondary-contrast": "#0ff"
|
168 | }
|
169 | }
|
170 | ```
|
171 |
|
172 | The response is:
|
173 |
|
174 | ```json
|
175 | {
|
176 | "name": "molgenis-blue",
|
177 | "urls": [
|
178 | "mg-molgenis-blue-3-1614770277098.css",
|
179 | "mg-molgenis-blue-3-1614770277098.css"
|
180 | ],
|
181 | "timestamp": 1614770277098
|
182 | }
|
183 | ```
|
184 |
|
185 | * Go to the current theme-manager and choose *Use a custom theme*, fill in:
|
186 |
|
187 | ```bash
|
188 | /generated/mg-molgenis-blue-4-1614770277098.css
|
189 | /generated/mg-molgenis-blue-3-1614770277098.css
|
190 | ```
|
191 |
|
192 | :tada: Congratulations! You just generated a dynamic theme.
|
193 |
|
194 | ## FAQ
|
195 | Yarn build breaks on node-sass on MacOS
|
196 |
|
197 | You need to have the xcode-cli installed
|
198 |
|
199 | ```
|
200 | xcode-select --install
|
201 | ```
|