Jin Long is the club I have trained wushu (Chinese martial arts) at since 2000. In that time I have redesigned the website 3 times, and just recently for the fourth time.

It’s been just over a year now since we first got support for CSS grid, that was in Firefox. I’ve put off learning much about grid because many of the projects in my day job need to support older browsers. Now that grid is supported in all major browsers, it’s about time I learnt.

I recently gave myself a challenge of creating a rotating hero banner using only sass. Why would you want to do that, I hear you ask?

A little late to the party but I figured it’s about time I tried BEM. Having worked with a lot of existing projects and therefore legacy code over the last few years, I’ve had little chance to try any new css methodologies. Recently I started a smaller project so thought it was time to give BEM a try.

Whilst building this blog, I was struggling to find a way to do the css for the layout I had designed for a blog post page. The layout required is shown in the diagram above, its for wider screens so mainly desktop but some larger tablets would also fall into this range.