Starting with Beta (part 3)

Design is in everything we make, but it’s also between those things. It's a mix of craft, science, storytelling, propaganda, and philosophy.-Erik Adigard

Previous post:

Part 1

Part 2

Let’s get back to my beta blogger project, referring to my previous post, the next step is to turn the layout into something the browser can read… computer world would be much easier if you can turn picture to code in second but sadly that isn’t the way the world works. So let start by turning my layout into CSS, of course they will be much more smaller things to be inserted but let start with the bigger picture…the Layout.

Before you start writing CSS, it’s better to slice you layout background picture and host it somewhere like imageshack. In my case I have a 820x200 pixel header, a 820x55 pixels footer and a thin 820x2 pixels border strip.

Outer Wrapper – I don’t know why but most beta template set the name to ‘Wrap 2’ so I just follow suit.
Header
Content -Wrapper

Footer Wrapper

And the CSS

/* The Outer- Wrapper section*/

#wrap2 {
width: 820px;
background: #FFF url(http://img91.imageshack.us/my.php?image=borderjn7.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}

This section basically tells you the width size which you can adjust according to your preferences. Background basic color is white with background picture of the thin strip of 820x2 pixels. This strip is the one giving the illusion of gradient border in my blog. It is repeated vertically. Margin is set to adjust itself based on the browsers used and all text will be position starting from the left.

#header {
width: 820px;
position: relative;
height: 200px;
background: #FFF url(http://img169.imageshack.us/img169/8066/headersofaeg0.gif) no-repeat center top;
padding: 0;
font-size: 2px;
color: $headercolor;
}

I’ve change the color variable to work with beta blogger fonts and layout function so I need to declare it first like in my previous post. Font size was set to 2pixel because I’ve already had the wordings of my blog on my header picture. The is no need for words on top of it.

/* Content wrapper that include the main and siderbar */

#content-wrapper {
clear: both;
width: 760px;
padding: 0;
margin: 0 auto;
}

#main {
float: right;
width: 72%;
padding: 0;
margin: 0;
}

#sidebar-wrapper {
float: left;
width: 26.5%;
padding: 0; margin: 0;
}

There are two elements in content-wrapper, the main section and sidebar section,one to the right taking 72% of 760 pixels and the other to the left with 26.5% of space. The remaining 1.5% is to make sure things are not too crowded or overlapping each other.

And lastly the footer;

/* Footer */
#footer-wrapper {
color: #000000; /*footer text color will be change to variable*/
background: #FFF url(http://img201.imageshack.us/img201/2038/borderdwnky2.gif) no-repeat center top;
clear: both;
width: 820px;
height: 55px;
text-align: center;
font-size: 92%;
}

Here is my most basic layout. Next we need to insert to font type, color, link style, list item…etc. That is the tedious part.

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.-Charles Eames

Starting with Beta (part 3)

0 comments: