Don't Click On Me » simple

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.

Web Development with The Gimp and Blueprint CSS – Part 2

Felix — Wed, 14 Jan 2009 15:15:36 +0000

This tutorial starts where the other one left off and covers chopping up and saving of the image we created. It’s relatively straight forward and easy to follow.

You should open the XCF file you have from last time, or you can download one from here. So that you have the following on your screen:

Now choose the rectangle select tool and roughly select the header of the images. You should notice that in the toolbox, the options about position and size. You have the ability to edit the selection. You should change both of the position values to 0. the width should be 950 assuming you are using the standard template, and the height should be 150 or the height of your header. This selects the entire header, and the grey bits to go with it. We do this because it makes the image fit the columns that blueprint gives us and because we need to select the shadow. There are other ways of doing it like making the background transparrent, that that raises compatibility issues.

Now click the Edit Menu and choose “Copy Visible” (important, not one of the others). Then, straight after choose Edit >> Paste as >> New Image. A new box will pop up, looking like this:

Next you need to save this image into your “img” folder created in the first part of the tutorial, type the name “header.png” as this will automatically save the image as a PNG image (and PNG images don’t distort). Or you can choose the png format from the list, the save box is different in different versions of the GIMP. When you click save a bunch of options about saving to PNG will come up, stick to the defaults unless you know what you are doing.

Once done you can close this new window and return to the main template window. Make another selection anywhere below the header and above the bottom of the white content area. Make this selection one pixel high and make sure it takes up the full width (use the same tool as before).

Save this new image as “content.png” or something similar, use the same edit, copy visible technique.

Now select the footer, you do not need to select right to the bottom of the page but you must make sure you inclue the entire drop shadow. My selection is at position 0, 790. Width 950, height 30. Same technique again to save it.

Once you have these three images you have completed, the rather easy, part 2. This same technique can be used in place of photoshop’s slice tool.

Part 3…

Simple Blackjack

Felix — Sun, 12 Oct 2008 22:50:36 +0000

A very simple and text-only version of blackjack. Written in python. It seems to work ok as is. Bug fixes and code improvements to follow in next version.

Just thought I’d mention it, it hasn’t been updated recently either.

Simple Blackjack project on Sourceforge

It’s nothing special