Boy do I have something to show you! Lately I have completely rewritten the CSS structure of Micro, and I have created 7 new “skins”, hopefully making everybody satisfied. Below is a screenshot of how your desktop will look like with the “Air” skin.
When you login to Phosphorus Five for the first time, then click the “settings” button (the one with the “cog” symbol), and select your favourite skin, and all apps in Phosphorus Five will use your selected skin. Below you can see how Camphora Five looks like with the “Aztec” skin.
The structure of Micro CSS have been completely rewritten, and with only ~3KB of CSS (minified and GZip’ed), it allows for some pretty stunning effects, due to intelligent use of some cutting edge CSS technologies. In fact, the entire core CSS is the exact same file for all skins, and to create a new skin, completely changing the entire look and feel of the website – Simply requires creating a tiny CSS file, overriding a handful of CSS variables. You could probably create a new skin from scratch with 5 lines of code if you wanted to!
Below you can see how “Magic Forrest” looks like when you edit your settings in Sephia Five. Notice how even the checkbox is styled.
This implies that if you’re not satisfied with any of the skins that comes out of the box, you can probably create a new one in minutes yourself, by using one of the pre-defined skins as a “template”. Below is a screenshot of Sulphur Five using the “Blues” skin.
This allows you to “rebrand” Phosphorus Five in its entirety, according to your needs, and apply your own colour scheme for it, literally in minutes. In addition, I have also fixed dozens of “CSS bugs” with Micro, such as for instance preventing scrolling on the body when a modal window is open, eliminated the need for custom inline styling when combining buttons with shaded divs, etc. Arguably, Micro CSS is now a completely new CSS framework. Needless to say probably, but obviously it builds upon the “flexbox CSS grid model”.
There are a lot of (I think) intelligent design decisions in the core of Micro now, such as the fact of that (almost) everything is relative in size to the font size of your skin. This allows you to change a single pixel value in your CSS skin file, and everything else simply “adjusts automagically”. This makes it very easy to for instance create skins for people who needs larger text, etc – In addition to that it makes the skin system highly flexible, yet still easily reused, in all widgets. TabControl, Modal Window, Buttons, etc – They all modify their rendering according to the main font-size of your skin – Except the TreeView, which has static font size (unfortunately), since it relies upon images to render its folder lines. However, even the last point is something I believe I will have a solution for in the future.
Below you can see my favourite skin, and my favourite application; Hyper IDE with the “Air” skin.
Phosphorus Five is hence, as of now, a complete web operating system, and a web application development platform, with an integrated webmail client, file sharing system, web based IDE, and many more apps – And it is easily skinned, allowing for you to easily apply your own colour themes, to fit your existing company profile.
10 years ago, I wrote a business plan called “Gaia Toolbox, the ‘mother of all’ toolboxes for creating web apps” – Nobody can call me a quitter … 😉
Phosphorus Five is Open Source, and you can download it from here …