Experimenting with CSS3 and HTML5

I've been creating more and more code examples and increasingly using GitHub for sharing code. I wanted to experiment with a few things so I created a site on GitHub pages.

• August 14, 2009
• Updated October 2, 2023

No Database ¶

With Github pages you are not able to use a database. This was actually an attraction for me. Increasingly the data that I want to show is distributed around various part of the internet. Christian Heilmann has demonstrated how it is possible to create a site almost entirely from APIs. Through expriements with YQL and native APIs it became clear that most of the data that I wanted to show is available through APIs.

The site makes JSONP calls to Twitter, LastFM, Flickr and Lighthouse. There’s no caching as yet or error handling but hopefully this can be addressed in the future.

HTML5 ¶

I wanted to experiment with HTML5 and realistically I couldn’t do this on a client site. Writing HTML5 just felt right - there are now tags for the header, navigation and footer - elements I’ve used on every site I’ve ever created. I didn’t really use any of the new APIs that are offered by HTML5 so perhaps that’s something for the future. I’m now even more encouraged to use HTML5.

CSS3 ¶

I’ve been using elements of CSS3 for some time but this was a chance to really let rip. Of course this leaves browsers like Internet Explorer out in the cold but that wasn’t really the point of this project. In fact I chose not to support Internet Explorer at all. Why? Because I could I suppose. Supporting IE is the day job.

Jekyll ¶

The engine behind the site is Jekyll, a simple static site generator. It parses Markdown or Textile documents and outputs a static site. I found it easy to learn and feature rich enough for this project.

Open source ¶

Pretty much everything I’ve have learned in terms of my job has been through people sharing their knowledge. So I love the idea that people can clone the site repository and play with it, or even enhance it.

You can view the site here and see what’s under the hood at the Github repository.

Tags

• CSS3
• HTML5
• JavaScript
• CSS
• Design

Can you help make this article better? You can edit it here and send me a pull request.

See Also

• Running ExpressionEngine on Media Temple's (dv) Part 3
  Dec 3, 2007
  In the final part of the series we look at how to optimise the front end code on your site and cut response times by up to 50%.

• Using tessellation in CSS
  Jun 26, 2007
  Tessellation has been used for many years in wallpaper and other design environments where a large space of indeterminate size needs to be covered. Using CSS similar techniques can be used to deliver designs that look good and stretch to the width of the screen.

• Managing colour schemes in CSS
  May 8, 2007
  Managing colour schemes in CSS can be difficult. With a bit of PHP you can take control of colour schemes in your stylesheets.