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.
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.
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.
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.
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.