During the past 9 months or so I’ve been lucky enough to build quite a few CSS based websites. I learned quite a few things during these builds - from cool layout techniques to PNG24 IE hacks (dont ask). One thing I noticed during each of these builds was that I kept going back to previous builds to reuse bits of code I’d written before. That got tired real quick - so I decided to create a very basic yet robust CSS ‘framework’ (for lack of a better word).

So without further ado…here we go:

Three CSS Includes

My method uses 3 main style sheets per website. These should be included using the normal <link /> element.


<link rel="stylesheet" type="text/css" title="sitename" href="/css/style.css" media="screen" />


<link rel="stylesheet" type="text/css" title="sitename" href="/css/print.css" media="print" />


<!--[if IE]>
<link rel="stylesheet" type="text/css" title="sitename" href="/css/iehacks.css" />
< ![endif]-->


IEHACKS.CSS

The iehacks.css file is included using IE Conditional Comments. This is to ensure that the sites are future proofed (with the eminent release of IE7 this is quite important from a hacks management point of view). There should never be any IE hacks in the style.css file. This file should contain only valid css designed for compliant browsers.

PRINT.CSS

The print.css file will contain CSS used only for the printing of the website. Typically this file will hide the nav, BG images and any other non-printable stuff. Due to the very cool media=”print” attribute/value pair on the link element making PHP print versions of sites/pages is a thing of the past.

STYLE.CSS

The style.css file contains includes to other very generic CSS files as well as site specific CSS. A typical style.css file contains the following sections:

• Global Reset
  This is a seperate CSS file that removes the default padding and margins from all elements and applies a standard relative margin to li’s; p’s; blockquotes, etc.
• General Class styles
  This is a seperate CSS file containing generic classes like .center; .red; .bold, etc
• Forms
  This is a seperate file that contains styling used on all forms (NOTE: I generally do forms in one way, so I tend to resuse this CSS everywhere.)
• Accessibility goodies
  This is a seperate CSS file containing CSS that hides the accessibility elements from the visual design.
• Default Styles
  Inline CSS to control colours, sizes, etc of elements.
• The Look and Feel
  Inline CSS for the layout, position of elements

I would typically add my site specific CSS directly into the style.css file thus keeping the seperate CSS files as generic as possible. For your conveniance I’ve provided a zip file with all the CSS files included. This is very basic CSS so don’t expect this to be all the code you’ll ever need.

I maintain the New Zealand Web Developers Forum. I’ve recently moved it over to a new host and along with that I also upgraded to the latest version of the forum software.

Earlier this evening I went back to punbb.org to see if anyone had replied to my month old bug report. I noticed they released a brand new version - what a surprise!

I had to get it, and for good reason. The forum software produces the most beautiful, semantic XHTML. The guys at punBB have put in a lot of hard work, and many hours of front end coding to get it to look and feel so good. I think it may even be the only semantic web standards based forum product out there!

I’ve been having a hell of time trying to find decent server space. I was using space on a friend’s machine, but I realised I needed to have a little more control. Moving to a reseller hosting account with iWeb was the next logical step.

For the past few months I’ve been slowly moving all my sites over the new host. I hate migrating servers! Hate it, hate it, hate it! Today, however, I had enough and decided to investigate various ways of automating (to some degree) this process.

There are heaps of really large scale solutions out there but none to suit my needs. I knew what I needed to do, and I knew everything I needed to do could be achieved from the command line.

Enter the bash script.

Get a mysqldump of my database

mysqldump --user user_name --password=password database_name > output.sql

Zip/archive my entire web root directory

tar jcvf web_root.tar.bz *

Copy the archive over to the new server

scp username@server:~/public_html

Unzip it into the web root of the new server

tar jxvf web_root.tar.bz

Import the mysqldump into the new databse

mysql -u -ppassword database < output.sql

It gets fun when we start running commands on the remote server through SSH…

Confused? Have a look at this bit of code:
ssh username@server "cd /var/www; tar jxvf web_root.tar.bz; mysql -u -ppassword database < output.sql"

It opens a secure shell connection to the remote server and runs some code. Love it.

I’ve compiled all those commands above into one handy shell script. Have a look at the source code below, or click the download link at the bottom of this post.

#!/bin/bash
#host_migrate.sh

# (C) 2004 - darren [at] dontcom [dot] com

# Use this script to migrate from one linux environment to another.
# I used this script when I swapped hosts.
# it does a mysql dump; tars the entire web root up; scp's it to
# the new server; unpacks the files;dumps the .sql file into new database
# dont forget to chmod +rx on this file :-)

# SET VARIABLES HERE

# New server settings
NEW_SERVER='' #new server name ( eg IP|domain name )
NEW_SERVER_DIR='' #web path on new server ( eg /var/www/ )
NEW_SERVER_USER='' #new server username
NEW_SERVER_PASSWORD='' #new server password
NEW_SERVER_DB='' #new server db name
NEW_SERVER_DBA='' #new server db username
NEW_SERVER_DBPASSWORD='' #new server db password

# Old/Current server settings
MYSQL_USER='' #mysql username
MYSQL_PASSWORD='' #mysql password
MYSQL_DBASE='' #mysql database name
OUTPUT_SQL='' #mysql output file
WEB_ROOT_ARCHIVE='' #archive name of all files

# the actual code. - no need to modify this...
mysqldump --user $MYSQL_USER --password=$MYSQL_PASSWORD $MYSQL_DBASE > $OUTPUT_SQL
echo "dumped $MYSQL_DBASE database to $OUTPUT_SQL"
tar jcvf $WEB_ROOT_ARCHIVE *
echo "tared all files in folder to $WEB_ROOT_ARCHIVE"
scp $WEB_ROOT_ARCHIVE $NEW_SERVER_USER@$NEW_SERVER:$NEW_SERVER_DIR
echo "scped $WEB_ROOT_ARCHIVE to $NEW_SERVER_USER"

Download the script here.

GIMP 2.2 is due out any minute and it needs a new splash screen. The people at GIMP have officially opened the contest and submissions are rolling in.

Competition entries should be attached to the live.gnome.org wiki before midnight next Sunday.