Monthly Archives: Apr 2009

Code

Accessible CSS

wordpress-themes-cssWhen I needed to hack a WordPress theme and I got my hands dirty with CSS code, sometimes I came across with in-line written CSS code i.e. every CSS selector occupied only one row. I found this practice very ugly and not scannable. I was used to CSS written in the classic way where every value is written in a new line. So, I would often break the single lines into multiple ones to distinguish them better. But this did not last forever. What happened?

Not very far in the past, I came across a article about single line CSS, where Steve Smith, the designer at OrderedList.Com had written of the same topic. He had gone thought the same dilemma I went and his conclusion is no different from mine. He says:

But imagine now that you have over 200 selectors, each with a laundry-list of attributes. That’s quite a mess to search through. My issue with CSS files like these is when they get large, it becomes very difficult to scan the document for a particular selector. They’re all separated by loads of attribute and value pairs. So what if we took out that separation, and put each selector, and it’s attributes and values all on the same line?

Let’s look at a live example taken from a site I have been developing lately. This is the way the code would look like if it was coded classically.

h1{
    float: left;
    width: 120px;
    height: 40px;
    margin-top: 35px;
}
h1 span{
    display: none;
}
h2 {
    padding: 0 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 20px;
    color: #159089;
    font-weight: 200;
}
h2 a {
    color: #159089
}
h3 {
    padding: 0 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #159089;
    font-weight: 200;
}
h4 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 24px;
    color: #d21d1d;
    font-weight: 500;
    text-align: left;
}
h5 {
    padding: 10px 0 0 0;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #4b4141;
    font-weight: 500;
    text-align: left;
}

And this is actual code I have coded of the site using the single line method.

h1 { float: left; width: 120px; height: 40px; margin-top: 35px; }
h1 span { display: none;  }
h2 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height: 20px; color: #159089; font-weight:200;}
h2 a { color: #159089; }
h3 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 18px; color: #159089; font-weight:200; }
h4 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:22px; line-height: 24px; color: #d21d1d; font-weight:500; text-align:left; }
h5 { padding: 10px 0 0 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:16px; line-height: 19px; color:#4b4141; font-weight:500; text-align:left; }

Note the length of the first sample and keep in mind that this is only less than 5% of all the CSS code I wrote for that site. Can you imagine how long the file would be if it weren’t in a single line and how difficult it would be to look for a certain selector to edit? You would spend more time browsing up and down thought the code rather than actually writing or editing it. That is why I chose to write all my CSS code in single line selectors method, so that I can speed up my work and spend less time looking for selectors in a super-long CSS file.

So, why not give it a try yourself? I think it is worth trying and I strongly hope you will get to love it as I do now. What do you think?

Read More
Code

Pack your WordPress theme with the necessary CSS

WordPress themes are being a great online resource for everybody to use, modify and share. This applies to GPL themes only though. However, in order to offer our online neighbors good themes that they will be happy using, theme developers, including me, should take care of some peculiar aspects in themes such as the use of CSS code. Along with WordPress theme evolution, some default CSS code needs to be included in very theme so that certain in-built features work well. This is mostly the case of images, but not only.

In WordPress 2.5 several classes for aligning images and block elements like DIV, P, TABLE etc. were introduced.Every theme should have these CSS classes – you can alter the style if need – in its style.css. The same classes are used to align images that have a caption, introduced in WordPress 2.6. Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Additionally, there are a few more WordPress CSS classes that you may optionally wish to style because WordPress generates them by default. I make use of most of them in my themes and I suggest very body uses them in their themes. There they are:

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

Did you find this information helpful? Do you have anything else to add? Your opinion is very much appreciated.

Read More
Design

Fedora Logo Design Process

I came across in a blog post of 2005 the Fedora logo design process. I do share the same opinion as the writer of that post when he says:

It’s fascinating to see the process and justification behind a logo idea like this.

It’s really an incredible walk-through of a visual identity concept. To keep it short, enjoy the show below.

fedora-logo-process

How do you find this great logo process?

Read More