grid

Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI. Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this […]

February 28, 2015

CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows. Here is a […]

February 14, 2015

CSS Hexagonal packed grid

Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between […]

February 13, 2015

Drawing a checker board pattern quickly with AS3

Today I needed to dynamically generate a checker board pattern in ActionScript 3. I couldn’t find any examples on how to do it so I made my own. Below is a snippet of code I wrote to draw it and its super fast! I used bitwise operators in the loops to speed it up and […]

June 1, 2011

MotionList – part 2

I’ve made some more progress on my MotionList class over the last couple of days. Some new features in the current demo below are:

August 19, 2010

MotionList – Windows Phone 7 Metro UI style lists

Here is small experiment I’ve done in AS3 called Motion List. Motion List is a class that creates a list or grid of items with similar animations to the upcoming Windows Phone 7 UI’s ‘Metro’ transitions. I love the new UI for WP7 and thought I’d try and recreate a little bit of it in […]

August 17, 2010