Phosphorus Five – Aphrodite release

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.

Micro is of course literally microscopic. It barely has any overhead at all. For instance, there is no additional JavaScript in it, besides from the 4.8KB that already exists in the core of Phosphorus Five. Regardless of this, it still has modal Ajax Windows, kick ass cool buttons, tab control Ajax widgets, etc. Below you can see how the Ajax menu looks like with the Purple Haze 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 …

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s