| In an earlier section, we discussed a slightly
different design process. Instead of creating the design and
then doing the CSS layout, we will be doing it the other way
round, the Joomla CSS first. We are doing
this because we want to make an blank CSS template
file that can be reused by anyone.
Let's startout with a basic blank template,
no layout, just all the font typography styling. This is a
blank template
to help speed production of a site. Its not a production
template
CSS file , all styles shouldn't be filled in, ones
that don't get used should be deleted before using. This blank
CSS file has several features:
CSS Shorthand
There are 'shorthand' styles at the beginning of each style
definition. Once you have figured out the styles, fill the
shorthand versions in and delete the long versions. The syntax
is:
font: font-size |font-style | font-variant
| font-weight |
line-height | font-family
Here is an example, rather than this...
font-size:100%;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:130%em;
Have this:
font: 100%/130% Arial,Helvetica,sans-serif
italic bold;
Read more at An
Introduction to CSS shorthand properties about this syntax.
Global CSS Reset
At the beginning of this joomla CSS file is a few styles
that set all styles to certain characteristics. You then have
to over-ride these later on. The first key global style is:
* {
margin: 0;
padding: 0;
}
body {........
font-size: 76.1%;........
Everything is given a zero margin and padding and then font
size is set to 76.1%. The reason font is set here to 76.1%
is to try and get more consistant font sizes across browsers.
All font sizes are then set in em's further down. A link that
discusses this idea:
An
experiment in typography at The Noodle Incident (Owen Briggs)
Header Tags and Joomla CSS Titles
http://www.compassdesigns.net/resources/articles/joomladoctypeblanktemplate/
Sometimes I will have Joomla titles turned off and use h1/h2
tags in content. Usually I am doing this to get a SEO bonus*.
To get some consistancy across titles depending whether I
have the off or not, I'll define the Joomla CSS alongside
the hX tags. For example:
h1,.componentheading {...
This is personal preference, you could certainly separate
them out.
*I have realised I could get a further SEO bonus by keeping
the Joomla titles to show in parameters and then hiding
them through a CSS style, and making the titles linkable.
Any of these would work:
display: none;
height:0;
text-indent: -3000px;
Note that there is some discussion
regarding hiding text with CSS. Please read this if
you are considering it!
Joomla Rounded Corners
Towards the end of this blank template
CSS file is the code to have rounded corners. Its the same
technique used at joomla.org and requires the module
suffix contained in index.php file
to be "-3".
OK, ready? So here is the blank CSS template.
Note it doesn't include any layout, we'll be looking at this
next time.
The blank
template CSS file for joomla is free for you to take and
use. If you do, maybe drop me an email to show your project.
Now, how to use this blank CSS file? Well, after you have
done all your joomla CSS styling, your file will have all
that extra empty CSS. Just use this tool to get rid of it.
Be careful and do a test to make sure you know what it does
first!!
CSS
Formatter and Optimiser
|
