Reading/Web/Desktop Improvements/Nicks Hack Results

Summary
The Reader's Web team had a hack week on the week of Aug 12, 2019 in an effort to compare development of a collapsible sidebar using a fork of the vector skin and a collapsible sidebar using the minerva skin (containing the same links as the vector sidebar) in preparation for our Desktop Improvements project. Having very limited experience working with the Vector skin (or more precisely a fork of the Vector skin), I was curious to investigate what that experience was like. Therefore, from the span of Aug 13 (the day our team started the experiment) - Aug 15 (I was out of town the last two days of the hack week) I focused on making a fork of the Vector skin have a collapsible sidebar and be a bit more like what our team has envisioned the UI of the project to look like.

Here are the steps I followed:


 * 1) Literally copied the vector directory and named it "Epidermis"
 * 2) Replaced all references of "vector" with "epidermis"
 * 3) Adjusted some of the structure of the html (e.g. moving logo from sidebar to header), added a bit of js for toggling the sidebar, but mostly added styles

Results
Here is a link to the project:

https://github.com/nicholasray/Epidermis

Screenshots can be viewed at https://github.com/nicholasray/Epidermis/tree/master/screenshots

Conclusion

 * I was surprised how far ~200 lines of CSS styles and minimal changes to the structure of Vector could get to the UI of the desired mock. Furthermore, because the Minerva skin doesn't currently have all of the links that Vector's sidebar menu has, I am confident that I would not be able to achieve the same result as quickly (and definitely not with mostly CSS styles) had I done this experiment in Minerva.
 * For the sake of time, I used CSS such as flexbox to style this skin. However, this may or may not (probably not) be compatible with our desired device support. Not using these styles would probably take considerably longer FWIW.
 * I wish I had some more time exploring vector's PHP side (particularly in core). It has been said from members of our team that much of Vector's code is actually in core and that it relies heavily on Vector's HTML structure. I would like to explore this more.
 * Part of the reason I named this skin "Epidermis" is that I knew I would really only be scratching the surface of mediawiki skin development with this project (and because I wanted to see a file named SkinEpidermis.php in the MW codebase). Although I was pleasantly surprised at how far CSS styles can go with the Vector skin, I realize that there is a lot of untested stuff that could change this opinion (e.g. compatibility with gadgets and other extensions).