A premature UberLog announcement

Felix — Sat, 17 Jan 2009 17:00:18 +0000

Uberlog is a project by Felix Farquharson and Sam Cater, it’s a personal journal/logging application. And is not fully complete. It has the basic functionality and it works without a GUI (see the trunk version). A GUI is nearing completion and should be done after a good couple of hours work (see lp:uberlog/gui).

This project is primarily to make sure Sam and me are set up for IRME (a new take on IRC, that will hopefully make it more accessable by using an Instant Messenger style frontend) which is a project we are planning to start after this is finished.

Currently all code has to be checked out from the bzr repository.

Web Development with The Gimp and Blueprint CSS – Part 3

Felix — Thu, 15 Jan 2009 17:00:48 +0000

First things first, buckle your seatbelts, this is going to be a long one. It concludes the three part tutorial (Part 1, Part 2). We’re going to write the code to make the design happen, this includes putting in some dummy text, and at the end, we will have a working design, that could be converted into a WordPress theme. (future tutorial?).

Anyway, first we are going to fill out the index.html file with some standard HTML and the code needed to call blueprint into action, (there will be a download later on in the post if you can’t be bothered to fill out the file yourself):



Our Design

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">







<div class="container">

I’m going to describe the important lines to you:

On the 4th line we have a link to our custom stylesheet, it’s currently empty, so it will have no effect on the page yet.
On the 6th, 7th and 8th lines we have the standard blueprint call, and one line that fixes the framework for IE.
On the 12th and 14th lines we have the main div class that holds all of the blueprint columns etc. This can be changed to
to make it show the grid in the background, which is very useful for laying out custom web layouts.
All of the rest is standard HTML and should make some sense.

We are now going to put in the columns to blueprint, so within the

and the

tags we add:

All of these

tags have an id and a class value, this allows us to separate the styles out, all of the classes we use are part of blueprint and all of the id tags will refer to custom code we will write in the end. The key thing to remember is that there are always 24 columns.

The class=”span-24″ or similar shows how wide the column should be, and there is also an example that columns can be nested within others to keep them together. Spacing can be added easily with the prepend or append values in the class variable (?).

We add some dummy content to this:


Our Website
And this is what we do




Content
this is a paragraph. Not a very long one but still, it's here...
Sub-content
This is a paragraph belonging to the sub content, no stealing.


links
hello

Now when we load our index in a web browser it should show some text roughly laid out as we want, but there are no heights added to anything so it will look squashed and may not show well until we write in out own code. It should look like this:

Notice how Blueprint has automatically set some sensible text defaults, i’m not going to change them, but it’s easy to do in your custom css file.

Now we can start to put something into out custom stylesheet, style.css. Put in the following code:

body{
background-color:#ccc;
}

#header {
background:#fff url(img/header.png) 0 0 no-repeat;
height:150px;
min-height:150px;
}

#bg {
background:#fff url(img/content.png) 0 0 repeat-y;
}

#footer {
background:#0f1b1c url(img/footer.png) 0 0 no-repeat;
height:30px;
min-height:30px;
}

#copyright{
text-align:center;
}

Now if we reload the page we have:

Next we’re going to make all the text appear where we want it and change some colours and finer points, also we’re going to add the code to make the copyright notice show…

So we have added:

#title {
padding-top:30px;
}

#title h1, #title p {
color:#fff;
}

To the CSS file and:


© All of us

To the main index.html file, inside the div id=”bg” tags and after the sidebar.

The css at the top positions the title and makes the h1 and p aspects of the title white. The HTML adds another column containing our copyright notice (we have already aligned this to the center).

There we have it (sorry about my cursor being in the screenshot):

Finished… You can download as a ZIP or as a .tar.gz.

Snippets library

Felix — Sun, 02 Nov 2008 23:24:57 +0000

It isn’t very full at the moment. But i have written it over the weekend in any spare time i have had using Django and I aim to put all the peices of code in there that don’t really deserve their own sourceforge/launchpad project. The URL is http://code.dontclickonme.com/. I will update the links in this blog to point to the Snippets library rather than the plain text files that they usually are sometime soon.

I think it really shows what you can do with Django, and how quickly you can make somthing functional using it.

If you are at all intrested in the code for the Library itself. Leave a comment.

Don't Click On Me » code

A premature UberLog announcement

Web Development with The Gimp and Blueprint CSS – Part 3

Our Website

Content

Sub-content

links

Snippets library