New CSS skin – NUX

In my latest release of Phosphorus Five, there’s now a new default Micro CSS skin called “NUX”. Its name implies “!UX”, since I have tried to make it very much minimalistic. The idea is to create a skin, completely free from colours and other types of “bling”, to allow for higher readability and more easily navigate your app’s actual content. You can see a screenshot of it in the above right corner. If you’d like to see the screenshot fullscreen, feel free to simply click the image.

Below is an example of how Hyper IDE looks like when using this new skin.

I feel the content of your apps becomes more visible, and emphasised, simply since there are less colours in this skin. It also significantly increases the sizes of clickable elements, such as radio buttons and checkboxes. Which I feel makes it more usable for smaller devices, such as tablets and phones.

In addition to the NUX skin, I have also created a couple of new convenience widgets, for more easily creating checkboxes and groups of radio buttons. And I have also significantly improved the rendering of Camphora Apps on smaller devices, and in general. Below is a screenshot of the “sales” app.

Feel free to check it out 🙂


Phosphorus Five 7 released

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

I am looking for partners to help me distribute and sell licenses of the system. You can also test the system online here.

Aphrodite’s KISS

A kiss can be beautiful, but it can also be practical. KISS happens to be an acronym too, and it implies “Keep It Simple and Stupid”. I have just released a new version of Phosphorus Five and Micro. Making both P5 and Micro easier to use have been my main priority, and will be also during the rest of the Aphrodite series.

The most important new feature is P5 is (finally) JSON support. Yup, you can now serialise and de-serialise JSON at your heart’s lust! This makes it really easy to both consume and create web services, using JSON as the format – Which of course makes it easier to integrate P5 with other types of client-side widgets, and/or web services using JSON for transporting data back and forth. I will be demonstrating this in later blogs.

In Micro, there are two really cool features – [micro.widgets.wizard-form] and [micro.form.serialize]. The former is an extension widget, allowing you to easily declare rich “forms”, collecting data with a few lines of code. The latter is a short-hand Active Event for serialising all form elements from some specific widget recursively, allowing to collect all data on a form, from some given starting point. Both of which, of course are two beautiful KISS’es, from the Goddess of Love ❤

Hope you enjoy using this release, as much as I have enjoyed creating it!

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 …

Phosphorus Five Zen release

I have just created a new release of Phosphorus Five. The most important change is that I have now removed System42 out of the main P5 GitHub repository, and created a repository for System42, outside of the main P5 core.

This means that if you wish to use System42 in combination with P5, you’ll have to first of all download Phosphorus Five, then download System42, make sure you copy System42 into the main “p5.webapp” folder of P5, before you apply some changes to your web.config inside of your “core/p5.webapp” folder. The entire installation guide for System42 can be found here.

My reasoning for separating System42 and P5 from each other, is that first of all System42 is for many people simply a use-case for using P5. Secondly, because it gives a more clean separation of concerns, not confusing people about what is what.

This allows you to start out with a complete blank piece of paper, P5 that is, and create your solutions entirely from scratch, without having to drag around System42. I kind of like the analogy a Zen master once said in regards to this.

When you’re a Zen novice, the Buddha is everything. When you become a Zen master, the Buddha disappears.

In such a regard, System42 is the Buddha, and what you should start out with, to grasp P5. When you’re a Shaolin Kung-Fu Zen master in P5, you can drop it in its entirety.

Significantly improved documentation

There are lots of other goodies in this release. Probably the most important change, is the fact that the documentation is now significantly improved! As usual, the documentation can be found as files, at the project(s) GitHub websites. Below are links for your convenience.

In addition to the above changes, I have also removed tons of bugs. To list all of them, would make this blog very boring, but I have gone through every single example code in the documentation, and everything seems to now work perfectly. For instance, the Ajax DataGrid had several bugs, which largely made it useless in practice. These are now fixed, and the DataGrid is now a first class member of System42.

Breaking changes

There are some few breaking changes. For instance I have removed most references to event arguments starting with an underscore “_”. Which means that if you get weird bugs in your code during upgrading, please go through your code and check for arguments starting with an underscore “_”. I am sorry for this, but it creates a more consistent use of the events, and creates a uniform way of argument naming convention for the future. Please refer to the documentation of your specific component if you don’t know whether or not there are changes to what you are using. These are for the most parts changes found in System42, and not P5.

The goodie bag

However, there’s lot of goodies in the core now, hopefully making it up to you. Below is an incomplete list of some of the cooler new features.

  • p5.threading – Threading support library
  • – Zipping and unzipping of files, with AES encryption support
  • p5.markdown – Creating HTML out of Markdown snippets

In addition, a lot of the pre-existing components have new additional features. Such as for instance the ability to create MIME messages directly from the HTTP REST Active Events in p5.http. This allows you among other things, to create PGP encrypted HTTP POST and PUT requests, passing in a PGP encrypted MIME message. Which I personally think is pretty kick ass cool!

I don’t want to go completely overboard explaining every single feature, since that would create a very boring blog post. However, if in doubt, utter “Thx for all the fish” – And download Phosphorus Five and System42 … 😉