How to start off the UI of your project

Back in the day one would have to create a series of fixed clases that would help you out through out the construction of your site. Classes that you now if chained with other clases would allow you to create very interesting and cool looking layouts. Today the answer is quite simple use html 5  boilerplate. The boiler plate comes packed with a bunch of useful css resets, browser sniffs for versions of IE, and if iE6 a built in chrome frame tag that allows the end user to install chrome frame into their browser if they desire to have a better experience.

The boilerplate is regularly maintained by Paul Irish ( a very bad ass developer ) and others, and it will definitely give you a fast start to build a web app with all of the standard folder structures you would expect a high quality web app to have.

One thing though, the boiler plate does not come with a CSS grid framework. For many developers that are becoming or have to become Front End develoepers for their projects this is quite an issue. Many developers rely on the use of some kind of css grid to give them a logical structure they can follow in order to build their websites. If you are using html5 boilerplate I recommend you get  super light grid framework such as 1140 grid or something a bit more complete like blueprint.

If you are like me and don’t like using grid frameworks because you like to build your own grid when you code then the boilerplate by it self will be very useful.

Keep in mind that there are many things included in the boilerplate and that you should with out a doubt go over all of the css code that is provided and make sure that everything that is in there is needed by you or your project.

Last but not least use CSS SPRITES!!! Its amazing that in todays world many people still seize to use css sprites. Ok maybe if you are thinking that your images need to scale in order to fit in multiple screen resolutions your not going to be using sprites for them. But normally there are tons of icons used in a web app and those icons by default should be implementing using sprites.

The technology for sprites is quite simple. Create one big image using Photoshop, or Fireworks or your image editor of preference. I use those two because I’ve been working with them for a while but if you want an open source solution the Gimp is definitely an awesome editor. In this big image you are going to stick in all of your little icons, preferably organized in a nice grid structure way. Make sure to leave some gutter between the icons just so that they are easier to identify and extrapolate in the future with css.

Once this image is done save it in the web format you prefer. Thinking of performance go for gif 256 or if you want better quality Photoshop has a built in “Save for Web and Devices” option that allows you to save as PNG and at the same time compresses quite well.

Ok so now you have a big image that has all of your little images inside of it. Now what?

Using css you create a parent class that will contain that image. If you want a nice name that makes good reference use the class

.sprite{background-image:url(/images/pathToYourSprite.gif)}

This will allow you to have all of the icons within one class. Next create the individual icon classes that you will be using. For instance if I were to have a light bulb icon in my sprite use the class

.lightbulbIcon{background-position:0 0; width:16px; height:16px}.

The background position marks the top-left starting point of the icon you want to pinpoint. Next the width and height are the width and height of the icon you are using.
In order to use include both classes within a html tag such as follows

<div class="sprite lightbulbIcon"></div>

This will render your lightbulb icon inside of the div tag. If you want more flexibility for icons in different tags include an inline-block attribute in your style like so

.sprite{background-image:url(/images/pathToYourSprite.gif);display:inline-block}

That will let you use anchor tags, spans etc.

Hope this helps!