CSS
Development of the MyTechLog.net web app and iPhone app has been rattling along nicely. It was always our intention that our development team would do all the programming donkey work and that I would design the UI with a bit of help on individual elements from Ella our pucker Graphic Designer. With that in mind, our actual code has very little in the way of CSS in it with a view to get a CSS expert to do the final skinning… however I recently made an executive decision to do the CSS myself.

This isn’t too radical a concept and nobody freaked out at the thought of it as I’ve done a little bit of CSS in the past and after all, how hard could it be?

What is CSS?
For those not in the know CSS stands for Cascading Style Sheet and is the bit of code that is used to control the look and format of web sites and web applications.

It took me about a day to get into the groove, suss out the application code which has been written in C# and find out where everything needed to go from a programming point of view. The basic CSS files had already been created, so it was just a case of appending additional classes and making things look and feel how I wanted. It’s taken me longer to get stuff done than someone with proper CSS skillz (as they say in the business) but there have been several benefits of me doing it.

1.    The total elapsed time is probably less as I can make instant decisions and see the results straight away.
2.    I feel more attached to the project now having invested even more time and effort.
3.    I’ve learnt a cool new skill.
4.    There’s a definite sense of satisfaction writing a bit of code and seeing the results instantly.

Admittedly we’ve had a few problems: The biggest being cross browser compatibility, but nothing that either Google doesn’t answer or that we can’t make a compromise over. However we will be getting someone to cast an eye over the results and tidy up any areas where I have deviated from best practise.

Read on if you’re feeling geeky
Still here?
OK, so I’ve been doing everything in CSS3 and have decided to do as much as possible in pure CSS without the use of external images. This means that things look a bit ropey but passable in internet explorer, but never mind, IE9 will be out soon enough.
Here’s a screen shot of the work in progress current state of play of one of the application screens. Please excuse the dodgy test data
 


I’m currently working on changing the Boolean table values and Delete|Edit links into nice little icons, but am just waiting on the designs for those to come through. Also I’ve been toying with how the pagination looks…. I’m open to suggestions there. I’m quite pleased with the buttons, although the colour schemes aren’t finalised yet. We are planning to use links throughout the application as we realised that links, buttons and submits are rendered slightly differently by the browser.

If anyone is interested (and at the risk of having my CSS skillz really scrutinised) here is the CSS used for the back button link in the bottom left of the screen shot.

A.Back
{   
/*Back button ;*/
   background: #099bd7;
   background: -webkit-gradient(linear, left top, left bottom, from(#8dc4eb), to(#099bd7));
   background: -moz-linear-gradient(top, #8dc4eb, #099bd7);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px;
   -moz-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px;
   box-shadow: rgba(0,0,0,0.4) 0px 1px 2px;
   color: white;
   font-weight:bold;
   font-family:Helvetica,Arial,sans-serif;
   padding:3px 24px 3px 24px;
   vertical-align:baseline;
   text-decoration:none;
}
A.Back:hover
{
   /*Back button hover state;*/
   background: #8dc4eb;
}
A.Back:active
{
   /*Back active state;*/
   background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#fc6b7a));
   background: -moz-linear-gradient(top, #099bd7, #8dc4eb);
   -webkit-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px inset;
   -moz-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px inset;
   box-shadow: rgba(0,0,0,0.4) 0px 1px 2px inset;
   position:relative;
   top:1px;
}

The more observant of you will notice that I have used an :active pseudo class which has the effect of reversing the gradient and box shadow as well as dropping the position by 1 pixel when the link is clicked. This makes a basic hyperlink look and feel much more “buttony”.

The current plan for development is to release for beta testing in the beginning of August with a view to fully launch by October. So best I stop writing and get these table icons sussed.

Click here to read Part 3 of the MyTechLog.net Production Blog: Wire Frames