So, I have finally decided to dress up Phosphorus Five. For years people have told me my design is “bad”, to be polite. However, I have just finished making a bunch of skins for Micro, which will definitely make Phosphorus Five apps look WAY more beautiful!
There are 5 different skins in Micro now, making it very easy to create stunningly beautiful web apps. Below is a screenshot of the Forrest Dew skin, with some of the widgets in P5. A couple of radio buttons, checkboxes, text fields, select dropdown lists, etc.
Micro is created such that it is ridiculously easy to skin. The main CSS file ticks in at roughly 10-15KB, and overriding its default values, implies simply adding a couple of CSS variables. The existing skins should easily show you how to do this. Below you can see how the Modal Ajax window will appear like if you choose the Sea Breeze skin.
If you find my colour choices to be too “frisk”, you can always choose to create your own. Or, choose the boring skin, which I have chosen to name Serious. Check out how Serious appears like below, with a tab control.
However, to create your own skin in Micro is ridiculously easy. I will be creating some tutorials on this in the future. Until then, have fun – And yes of course, there is a “fun” skin in Micro. Its name, is Emotional. It’s about the closest I intend to move in on Comic Sans for a long time … 😉
To get started, make sure you download Phosphorus Five, System42 and Micro. Links can be found below.
Then unzip and rename the System42 and Micro folders to remove the versioning numbers. They should be named only “system42” and “micro” respectively. Put these folders inside of the “core/p5.webapp” folder inside of your Phosphorus Five folder, start p5.sln, and enjoy!
Still need guidance? Then watch the first 3 minutes of the following YouTube video …