Setting up this frontend locally in your machine requires you to look at the GitLab repo for this project. PPUM Patient Monitor Repo.
The codebase development of this project is entirely build using Bootstrap 4.X. In order for you to tweak and harness its full capability, you have to thoroughly read its original documentation.
Its theming in the other hand - that have been done to get its custom look is also based on top of Bootstrap CSS class convention. Future development should follow this similar practice to ensure code maintainability.
FYI, there are no alterations on the original Bootstrap codebase. All new classes and markups are written with the "modifier-classes practice" in mind.
We will talk more about it in this documentation as it progresses.
Bootstrap encourages every new element to be nested by
.container-fluid. In line with that recomendation,
there are few additional custom containers created in this codebase to accomodate its design. The naming convention of the classes in CSS are self-explanatory.
These containers modify the styling for every UI element in the homepage. The containers are (and not limited to);
This container modifies the styling in all Settings UI. The containers are (and not limited to);
This container modifies the styling in all Documentation UI. The containers are (and not limited to);
These containers modify the styling in all Menu Dock UI. The containers are (and not limited to);
This container modifies the styling in all Button Position in Settings UI. The containers are (and not limited to);
There are four (4) main modules that are paramount to this codebase namely; Buttons, Forms, Keyboard and Modals. Each of this module classes will modify Bootstrap's original styling. Therefore, it must be used together with Bootstrap method of calling any UI element in the markup.
These containers modify the styling for all Buttons UI. The classes are (and not limited to);
Any usage of Bootstrap modal must be called together with these classes to enable full modified UI.
Any usage of Bootstrap forms must be called together with these classes to enable full modified UI.
In order to cater dark room ambience as well as to limit eye strains. This UI comprises of seven (7) colours altogether.
Calling this colours into the UI require the SCSS to call for specific variables, i.e
border-color: $ppum-darker-pink;. The colours selection is as shown;