Website Relaunch with CSS Grid Layout

4 months of work, 49 hours of coding, plus more hours for designing a new homepage, creating a new OTF font, and polishing up my old 3D models. But now my martial arts website kogakure.de is online.

Website Relaunch

The old website used Jekyll, and it took a long time to generate and deploy my website. For the same reasons I migrated this website to Hugo – which are speed and getting rid of Ruby – I decided to do the same for kogakure.de.

CSS Grids

But I had more in mind: I always wanted to create a website with the new CSS Grid Layout Module Level 1, or in short CSS Grids. This spec landed in all modern browsers (including mobile browsers) this spring. CSS Grids are one of the coolest additions of the last 15 years. Finally, Responsive Layout with CSS opens possibilities for new layouts never seen before. Everything, which is possible in Print should be possible with CSS Grids, but much more, because of the responsiveness build into CSS Grids.

Technology

I upgraded my tech stack while doing the migration: JavaScript is written in ES6, compiled with Babel, and packaged with Webpack. I use a Service Worker to bring offline support to the website.

The build and development environment runs with Gulp.js and Yarn.

For CSS, I use as with this website PostCSS but removed PreCss and many plugins, instead just use CSSnext with support for CSS custom properties, custom media queries, @apply and more.

Mozilla Firefox CSS Grid Inspector

Special thanks to Mozilla for their fantastic Firefox browser. The Firefox Nightly Edition includes a new CSS Grid Inspector, which is outstanding. And it was needed, my homepage uses 12 different grids. Yes, you read correctly. 12. CSS Grid Layout can be used for the page layout, but developers are encouraged to use it on a component basis.

My grids inspected with the Mozilla Firefox CSS Grid Inspector

Source Code

The source code for my website is completely open, the content is as always provided with a Creative Commons license. The unique design is not free, but everybody is encouraged to learn from the code and reuse the code of the website.