I was asked by a very talented individual to spice up his blog theme, and here is the result.
Screenshot of www.joeyschusler.com
Basal is a simple and clean 2-column Wordpress theme, I have created.
It is an image free design with a minimal structure and layout for your blog’s content.
I am releasing this theme under the GPL license, you can if you wish make any alterations to it for your blogging needs.
Basal has a new update, 1.0.6 primarily fixes issues with the CSS like the navigation and widget titles, thanks to all those who have downloaded Basal so far.
1. Comment your code
Commenting code is a practice often overlooked when working to a deadline.
Using comments on any web source coding language can easily distinguish each part of the design you are working on. Helping further down the line when maintenance or tweaking is needed to inject life into your site.
fig 1. (CSS Comments)
/* This is an example of a CSS comment than can span over
several paragraphs */
// This is used for single lines only
2. (Shorthand CSS)
Shorthand CSS is a method of writing CSS code in more condensed manner
fig 1. (Long hand CSS)
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;
}
fig 2. (Short hand CSS)
#example {
margin: 0 1px 2px 3px;
}
The CSS code created using shorthand is smaller in file size in comparison to using the longer version in fig 1.
When using shorthand notice that when a value of 0px is needed that it is written using just a 0 without the px value at the end.
Shorthand can be used with the margin, border and padding delimeters.
The CSS can be further shortened to
#example {
margin: 0 1px 2px;
}
this will give the margin properties of
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 2px;
}
also using only two values in the shorthand will give
#example {
margin: 0 1px;
}
versus
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 1px;
}
Finally only using one value in shorthand will give a uniform value for all four declarations of the delimeter.
3. Abandon Inline styles and migrate to external sheets
Using external style sheets will allow for your web pages to load faster, less code = less time.
By grouping common styles in classes together in a separate file the mark-up language used to generate each page is reduced and not repeated making redesign and maintenance easier and less of a headache for you later on.
To use an external style sheet simply place the following code within the head portion of your html document.
<style type=”text/css”>@import url(monochrome.css);</style>
With fancier newer and fresher browsers isn’t it time you let go of IE6 and embrace better browsers.
Old IE6 is a nightmare for cross browser relations, it takes up to 20% of the market share and renders websites awfully, leaving designers with headaches.
CSS Hacks and tricks are needed to get the site to look identical to each other browser.
Why not save developers and designers precious time and resort to a newer more accessible browser like Firefox 3, Chrome, Safari or Opera.
Here are a few hacks and filters that can help IE6 render your webpage.
1. Conditional comment hack/filter
<!--[if IE6]>
/*insert style declarations (these will only be seen by microsoft IE6 browser)*/
width:200px;
<![endif]-->
2. Tan hack
*html .boxModel {
width: 230px;
width: 200px;
height: 130px;
height: 100px;
}
The backslash within the height and width is not readable by IE5 using Windows, but does affect IE5 for Mac and IE6 for Windows.
The differences in the two hack filters are more noticeable, the conditional comment filter can support more style declarations than the tan hack. However with both filters they are not valid CSS. The conditional comment can be used in-line and doesn’t invalidate the majority of CSS created.