Working on mock-ups on Games and Bytes is what currently makes me busy at home. The mock-up is almost finished, but for this update let me show you the logo I came out with. That’s most likely the final color scheme and look for the design.

Tell me what you think about it. I’ll upload the mock-up on my next update.

Everyone seems to agree that WordPress is indeed a great application and with our busy schedules we can’t really dedicate much of our time for a custom CMS. Hopefully everything will go well this coming weeks. I’ll be having a bunch of stuff to do for this site’s upcoming launch.

Using ChanLu Design I will practise on using this method, since during the redesign process, I was not assigned to be one of the coders, I ended up creating mock-ups for the individual pages of the site.

On applying OOC, you can get rid of unnecessary classes and reuse other classes. Here’s a perfect example of a good way in using OOC by Matthew Anderson that was posted on Jeff Croft’s blog post about OOC:

Messaging in applications is a great example. Your success, informational and error messages should have a similar look and feel. Using classes like “success message”, “info message” and “error message” are no less descriptive and no less communicative than “success-message”, “info-message” and “error-message”. However, they are a lot more maintainable and you accomplished it with less code.

This means that the structure of the element would go on the “message” class. Like messages are a block element having a padding of 10px. Their differences would most likely be on font colors, backgrounds and icons. These maybe placed on new classes that will contain their look and design. Usually well-known websites have their success messages as green with a check icon, info/notice messages to indicate something to think about are usually colored yellow with an exclamation icon while red with an X icon for something critical for the error messages.

The basic concept of OOC is separating the structure from the skin.

Sample Code without OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.success-message{
display: block;
padding: 10px;
font-size: 1em;
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info-message{
display: block;
padding: 10px;
font-size: 1em;
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error-message{
display: block;
padding: 10px;
font-size: 1em;
color: red;
background: url('../images/error.gif') no-repeat;
}

Sample Code with OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.message{
display: block;
padding: 10px;
font-size: 1em;
}
 
.success{
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info{
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error{
color: red;
background: url('../images/error.gif') no-repeat;
}

The messages do have the same structure, all they have are different appearances. That’s why one of the designers in my workplace said “It’s just like dressing up”. Whether you put on a hat, or glasses perhaps. Your still clothing a person. Sizes or colors may differ, but they still have the same structure. By separating the structure from the skin/design, we can reuse code and make our css files more maintainable.

Ninja Theme Logo

I was surprised when I logged into my email today, since I usually check using IMAP. The site colors suddenly changed to light blue, with a notification message stating that new themes are now available on Gmail. I really didn’t like the default set of theme on my mail, so I dropped by the themes section to change.

I was shocked to see that Gmail Themes doesn’t only feature themes with different shades of colors, but themes that look fun and modern like the Ninja theme (that’s what I’m using now). Their themes also have some cool tricks, like changing the way they look based on the time, so they ask for the user’s Location to synchronize the time. Now, I’m excited to see how my theme would look later.

Themes are not available with Google Apps, though I’m hoping that  Google will include themes to the Google Apps, for my ChanLu and PixelMai mail to look more fun.