Let’s talk about food, shall we? ;) One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called Just Add Heat. The logo and colors were already in place so our job was to to create a few website templates. This brings the perfect opportunity to share some basic CSS information on how the main template is set up.
If you are busy you'll surely recognize the following scenario. Hard at it and completely gone up in your work you suddenly realize that it is dinner time but there is no food in the house or you don't have time to prepare a decent meal. That's were a new trend called assembly kitchens comes in. It's a place where customers spend a couple of hours putting together a week or a month of dinners they can cook at home. That's what Add Heat is all about, but I let the owner speak for herself:
I just opened an assembly kitchen near Toronto, Canada. While this is a very new concept here (mine is the 9th such facility in the country), these assembly kitchens are spreading rapidly across the U.S. with an estimated 1,100 locations by the end of 2006. It's a large kitchen where customers can come and assemble family sized, healthy meals in record time. It takes about 10 minutes to put together something like a spicy chicken stir fry or pork tenderloin with apricots and raisins. We provide all of the ingredients that are chopped, washed and ready to go, plus all of the mixing/measuring utensils, and freezer friendly packaging (we also clean up!). Just Add Heat opened August 15th and in less than three weeks it has proven to be a much needed service. Part of this success can be attributed to Veerle Pieters as she created a fabulous website that is easy on the eyes and unintimidating for all. It was great working with her because she understood our wants and needs very quickly - making the birth of the website pain free and fast.
It was great working with the people from Just Add Heat and a fun project and subject to design for. I'm very happy and honored they choose Duoh! for the design of their website and I'm double pleased that the business is going so well. It's amazing how you learn about new things in other countries. Assembly kitchens isn't something that is available to my knowledge in Belgium yet.
Here is a picture that shows you how I divided the different areas of the page:
As you can see from the CSS below and the picture above, I use 2 wrapper ids and within these I have again 2 content areas:
body {font:75%/150% "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;background:#646464;color:#666;}The body element has the grey color as background and the primary-content-wrapper id and secondary-content-wrapper are stretched over the entire width (100%):
#primary-content-wrapper,#secondary-content-wrapper {width:100%;text-align:center;}The primary-content-wrapper id has the background image repeated horizontally. The rest of this area is filled with a very light grey color:
#primary-content-wrapper {background: #f0f0f0 url(../images/bg-primary-content.gif) repeat-x;}The secondary-content-wrapper has a border of 6 pixels at the top:
#secondary-content-wrapper {border-top:6px solid #585858;} There are probably different ways of doing this and achieving the same result. Some of you might find this piece of code a bit too basic to learn from, but from the e-mails and feedback I get I know that a lot of you are still starting to learn CSS. Hopefully by sharing this part of the project I help you to get a better insight on how to think in divs instead of tables.
However reality is, that you don't always have total control over the outcome. So there are a few things I would have done differently code-wise, but hey, it's already an improvement from a total table-based website. I don't want to be a code-nazi, but the urge is always there to correct. "Let it go Veerle" that's what I tell myself :) Further from that, I wish the people of Just Add Heat all the luck with their new business. I think I would be a regular customer if it was nearby ;)
