YAML – HTML Blog Build Part 1

I wrote about my hunt for a css framework previously.

This post is going to be about building my design in html using the YAML css framework before putting it to use in a subtext skin.  I have published a couple of posts related to subtext skins and other features you can quickly implement:

Before building something I have to come up with some sort of idea of what I want the design to look like.  How I want it to entice users to hang about read more, click on a link, banner or even a category.  Now I am no designer but there are alot of sites out there that can give you influence.  There are quite a few css gallery sites which show some of the best on the web.  A comprehensive list can be found over on Martin Lucas’s Blog.

If you find a design that you transform into a blog skin/template please give credit to the designer.  These guys work hard and if you don’t acknowledge them then really it’s stealing.  Am sure the designer would appreciate the link back and if you’re really lucky the designer might even help you should you run into problems doing the conversion. I recently discovered a site using one of the skins I converted to subtext and the owner had removed all credits from the footer. Bad karma…..

I’d like to do something completely different from the norm.  There are some limitations that subtext imposes when it comes to rendering some of the components. I’ll go into more detail about these limitations later.

What am I looking for?

Right now take a time out, make a list of what you’d like to implement in your build.  If you struggle for ideas, try a little brainstorming session, have a look through some css gallery’s to give you some inspiration.  Make a list of things you like, things you dislike for example colours used.

My brainstorming session

3 columns. Wow factor. Bright. Easy navigation. Formatted form elements(contact,comment). Blockquote, xfn, vcard, vcalendar, list formatting. External and internal link differentiation. Orange, blue, red, lime. Flickr Gallery. Twitter. About page. Nicer Error Page. Round but not too round.

I am fortunate that I am running subtext as a single blog so I can change some of the core pages as it won’t affect anyone else.  If you’re running on a multiple blog installation then some of the above won’t be possible unless you and your users have a good understanding.

Layout and Colour Scheme


YAML comes with a nice builder : YAML Builder v1.0. The builder allows you to pick from a variety layouts.

Yaml Builder - 3 columns with teaser

I am going for a 3 column with teaser layout. The right column will be thinner though as you’ll see in the next post.


If your struggling for a colour palette I would recommend Color Combinations.  The site shows a variety of colour schemes that can be viewed by colour, and can be viewed in a test area. Another useful feature is that you can enter the URL and retrieve the colour scheme for that site.

Another good site is ColorSchemer

Right now I am still not sure what colours I am going to use. For the next post I am going to implement the base then play about with different schemes from the above sites.

Also be sure to check out – Free Online backup storage – alternatives to BT Digital Vault


  • Kevin
    Posted August 17, 2008 11:59 pm 0Likes

    The online color tool at colorspire.com is also awesome.

  • Si Philp
    Posted August 18, 2008 6:58 am 0Likes

    Thanks for the heads up Kevin. Looks interesting. Will put the link into my next post 🙂

  • Ross
    Posted August 23, 2008 10:30 am 0Likes

    Nice find by the way. The builder itself saves time just with initial layout. Only thing that annoys me is having to strip out the classes I don’t use.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.