About

What is Bluebot?

Bluebot is a simple template for writing HTML5 webpages. It provides a set of CSS styles and web fonts along with some example HTML (this page) for writing clean, decent-looking webpages. It's designed to be used for standalone pages, i.e. single webpages that are complete in and of themselves. An example would be the webpage for a project that you are releasing on the web, just like this one. However, that's not to say that it couldn't be easily adapted to work with multiple pages.

I wrote Bluebot for myself in September 2011 as an easy way to build single webpages without having to write everything from scratch every time. The look and feel is based on my personal website, but somewhat simplified. I use Bluebot for my Cornell University webpage.

Why is it called Bluebot?

Though the template is mostly monochrome, there is a little bit of blue used for the borders and the header, hence the blue. It also makes use of the Droid family of fonts provided via Google Web Fonts, hence the bot.

Where do I get Bluebot?

Bluebot is available on Github. Feel free to clone it and fork it for your own use. If you add code and styles that you think would be useful for others, send me a pull request and I'll try to incorporate it. Note that Bluebot includes the HTML5 Reset styleheet which is in the public domain.

Examples

The rest of this page shows how different HTML5 elements look under Bluebot. For starters, every section element gets placed in it's own bordered section. About was a section and so is this one. While the examples are mostly self explanatory, looking at the HTML and CSS source might be useful.

This is an H1

Here's an H2

There's also an H3

And of course there are normal paragraphs. You can emphasize things or make them strong. And you can make lists of things.

These lists can be ordered

This is the first ordered item
and this is the second.

Or they can be unordered

Like apples
And Oranges

Quotations from famous people always look good. But you have to be careful to set them apart from the rest of the text and give due credit. Also Benjamin Franklin was not President of the United States.

        & like(any self-respecting template)
            {
                There is support for writing code
            }
        but for (more advanced requirements)
            {
                Use one of the JavaScript syntax highlighters
            }

There is also styling for the <address> HTML tag. Just remember that you need to put in the <br/> tags to break the address into lines yourself.

Mr H. Potter
The Cupboard under the Stairs
4 Privet Drive
Little Whinging
Surrey

There might be support for tables in the future (if I find myself needing them). I'm also considering adding a style for two-column text sections. However that would require using some JavaScript and I'm undecided as to whether I want to include JavaScript with Bluebot.