design samples

Please note: this page is very much work in progress and will be updated in due course.

Switch it up!

% step tutorial: setting up a CSS switch

view →

Glorious Sprites

Menu link icons — creating one sprite image for 3 links, with 2 roll-over states each.

view →

Toggle it!

Setting up a toggle for menu on smaller screens, including the hamburger icon with transitions and sprite rollovers for links.

view →

page layout methods

3 given examples of layout, to be implemented with 3 different layout methods: float / flexbox / grid

view →

experiments with type

and layout / colour

quoting from A Designer’s Code of Ethics by Mike Monteiro

view →

3 SVG methods

for using SVG on webpage: inline / symbol definition / image tag

includes mini tutorial to create SVG, view source for demo of methods

view →

SVG sprites

notes on graphic file, demo of SVG sprite for rollover and icons

view →

SVG icon + sprite

combined steps for icon creation + SVG + sprite setup

view →

CSS border-image

using images for borders

view →