Content equal to browser height & centered

15 October 2014: updated to include feedback from comments.

A current design pattern on some scroll-hijacking sites is to have each section as tall as the browser window so you see that content without distraction before moving onto the next.

This is a demo of content equal to browser height using CSS with a fall-back coffeescript solution for browsers that don’t understand css transforms. It is also responds to any adjustment in height and width of the browser window. Continue reading

Five ways with responsive tables

Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.

I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution. Continue reading

Problem: Background image overlapping right-hand-side of the grid

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page. Continue reading

Fluid width squares in CSS

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript? Continue reading

My responsive web development technique

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too. Continue reading