iPhonica – Elements

I had to revert to an old backup of my Mac last week, but while restoring it I ran into some technical problems. Yesterday I finally managed to get everything up and running again. Time to show you 2 screenshots of iPhonica with most of the elements in it.

The images (see bottom of post) shows the default iPhonica color schema, which is some sort of gray. Eventually it will come in 8 colors!

Below the menu you’ll find status messages. It’s a div with class=”status”. To the div class you’ll have to add a color-style (blue, green, yellow, or red) and an icon (info, roger, attention, or stop). Combining these styles gives you 12 different status messages.

Following are some example paragraphs and the buttons and links.Adding class=”button large blue” to a <button> or <a href=”"> element turns it into a large blue button. By combining the sizes (small, medium, and large) with a color (light, dark, purple, blue, green, yellow, orange, red, or pink) gives you 27 different buttons!

Ending with the apply form that shows an error on the name field and some random text. The form has a large colored submit button to attract the attention. Next to it is a small gray button to cancel the proces and hide the form immediately.

In the sidebar you see a Post a job teaser, jobs I’ve recently seen, the category or city list (depending on your settings) and a list to instantly subscribe by RSS or email to the categories. For this you’ll need a Feedburner account (free).

If you look at the preview with the grid on you’ll see that the whole template and it’s content is aligned horizontally (left to right) and vertically (top to bottom). This means that all elements/text are aligned with each other independant of their place in the template.

(Note that in the preview the footer is 3 vertical pixels off. This is due to the large number of elements. Normally you won’t display elements in this way. Using the template with Jobberbase content won’t create offset! )

I’m not a pixelpusher