Updated Vue CSS guidelines (draft) (markdown)

CSS-guidelines.md

@@ -0,0 +1,8 @@
+1. As the game was not initially developed with Vue SFC, some of the CSS code is in separate .css files, and some is in the <style> tags in .vue files. New CSS code should go inside .vue files.
+2. Use BEM for CSS class names: https://getbem.com/
+3. In addition to BEM, Use the following namespaces:
+    - o- for the most fundamental objects (like `o-primary-btn` or `o-achievement`)
+    - c- for all other building blocks. Note that these classes contain no layout stuff (width and height are not layout stuff, so put them here)
+    - l- for layouting c- components. The most usual stuff is display, flex-direction, margin, padding
+    - t- for themes (see below)
+4. Theming is implemented via classes instead of loading additional CSS files. Basically, when theme Theme Name is active, a class t-theme-name is added to the body. So, because of that, all theming is now done in the main CSS file near themed component (ex. .t-inverted-metro .c-primary-btn { /* stuff */ }). Secret themes are t-s1 to t-s11.

Vue-CSS-guidelines-(draft).md

@@ -1,18 +0,0 @@
-Vue:
-
-1. Each game tab (like Options, or Last Eternities) is an independent component, so if you want to add a new game tab with subtabs, you need to create a new component for holding these subtabs (for ex. dimensions-tab.js), and a new component for each subtab. In case you want to add a new tab which doesn't consist of subtabs, just create a new component (for ex. options-tab.js)
-2. In subtab component, you need to define all subtabs, their display names, component names, ids and conditions for unlocking. Component name is what you put in `Vue.component('here'`. `id` is needed for communication with non-Vue part of the game - you can see new Subtab("Some id") in tabs.js. While you can edit display names of tabs, their `id` must be unchanged, so stuff doesn't break.
-3. Each game tab is automatically styled as flexbox (column) with content being flex-grow: 1, so footer (which is automatically included in each game tab) is always in the bottom of the tab.
-4. I've decided to abandon binding player object to props (https://github.com/IvarK/HahaSlabWontGetHere/wiki/Reactivity-explained-(draft)), so you almost won't see props in the code. Instead, declare `data` object, and update stuff via game event hooks. `update` method is automatically invoked each game loop. Let's take a look at normal-dim-row.js: we pass tier and floating text array as `props` because we cannot get them from global context; we declare all needed visual stuff in `data`, and then update it in `methods.update` and use it in a `template`.
-5. The most common component is `primary-button` an example of which is Max all button. It automatically includes `c-primary-btn` CSS class, so while adding new classes to it, you should omit the base one, and apply only modifiers. To control this button state (enabled-disabled), use `enabled` prop.
-
-CSS:
-
-1. I've applied BEM naming to all stuff that is under Vue, and I highly recommend doing the same.
-2. In addition to BEM, I'm using the following namespaces:
-    - o- for the most fundamental objects (like `o-primary-btn` or `o-achievement`)
-    - c- for all other building blocks. Note that these classes contain no layout stuff (width and height are not layout stuff, so put them here)
-    - l- for layouting c- components. The most usual stuff is display, flex-direction, margin, padding
-    - t- for themes (see below)
-3. I've implemented theming via classes instead of loading additional CSS files. Basically, when theme Theme Name is active, a class t-theme-name is added to the body. So, because of that, all theming is now done in the main CSS file near themed component (ex. .t-inverted-metro .c-primary-btn { /* stuff */ }). Secret themes are t-s1 to t-s11.
-4. I'm using regions to structure BEM section, so I highly recommend using your editor's folding feature to have a better view over CSS file.