My blog theme, fairy-tale, is the product of the sedimentation of countless changes over the year. On June 6th, I decided that maybe it would be a good learning experience to start from scratch, following the cutting-edge web technologies and best practices. Most importantly, I wanted to stop using Bootstrap and see if I could make something decent, responsive, and mobile-friendly with just CSS.

I suck at web design, but it would be fun to try anyway. So let’s see how it went.

Web Layout through the Ages

I am old enough that my first website was built from scratch using tables. My first website, hosted on AlterVista (the Italian GeoCities), was called Dyson Sphere, and its main content was the rulebook of a Dragon Ball Trading Card Game I invented (and poorly drawn) in middle school.

As it was the custom at the time, I built everything with FrontPage, a text editor, and tables everywhere. Everything was a <td> and <tr>, and we used to put tables into table cells and more tables inside them. Everything was extremely tag-heavy, and any piece of content was buried into hundreds of indentation levels, but it looked like the obvious thing to do.

Then came <div>. I remember it becoming the best thing to do just when I started moving to WordPress and other CMS. I used <div>s, but not as much as tables. With WordPress, I stopped doing a lot of front-end stuff, and my relationship with CSS and HTML was limited to minor customizations for my WordPress theme.

Then came flex. When I moved from WordPress to static-generated websites, I invested more time in HTML and CSS. At first, I feared all those dams <div>s. I remember I hated them because, instead of the clunky but rigorous and precise positioning of table-based layouts, you had these damn boxes flipping and moving around all over the place. One line of CSS changes, and all my <div> start going crazy, overlapping, getting out of center, and so on.

I was genuinely amazed when I learned the display: flex directive. Finally, things were as they should be. I was finally able to position something like a human being! You say, “These 4 things should be on this line, equally spaced,” and with two-tree CSS rules, bam! You do it.

Flex guided me into all the customizations of fairy-tale (the current/old theme).

CSS Grid

Nowadays, CSS Grids are the way to go. While flex allows you to handle mono-dimensional sets of div (a row or a column), CSS Grid allows you to create complex two-dimensional layouts such as the classic “header + article + sidebar + footer” setup.

In some sense, we are back to the tables, but built in pure-CSS (and with much fewer tags).

The problem, though, is that I never really used display: grid in my CSS. Never. So, I decided to invest some time studying the best-of-the-best that CSS design has to offer.

But CSS Grid syntax is not really straightforward. Suppose we want to create a “header + article + sidebar + footer” layout. The HTML is easy:

1
2
3
4
5
6
7

<div class="container">
  <header>HEADER</header>
  <nav>NAV</nav>
  <div>CONTENTS</div>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</div>

On the other hand, the CSS, is more puzzling.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.container {
  display: grid;
  grid-template-columns: 1fr [nav-track] 5fr 2fr;
  grid-template-rows: 5fr 20fr 5fr;
  grid-gap: 10px;
}

header {
  grid-column: 1 / 4;
}

footer {
  grid-column: 1 / 4;
}

What the hell is fr? What are all these numbers? What is the word in square brackets? Why grid-column is one-fourth? One-fourth of what?

It was an overwhelming first impression. In reality, though, it is not so complicated. This is not a guide on CSS Grid (if you want a guide, this is a good introduction), but I summarize here the answers to my questions:

• fr means fraction of free space. This is the most confusing unit and concept. It is easier to explain it with a couple of examples. If I have three columns with sizes 1fr 1fr 1fr, I get three equally wide columns, expanding for the entire screen (or the total size of the container). If, instead, I define my columns with 1fr 2fr 1fr, the middle column will be twice as wide as the other two (in practice, I take all the free space, divide it by 4, and assign the space according to the fr value).
• The grid-template-columns and grid-template-rows, in short, define a grid with 3 columns (with width 1fr, 5fr and 2fr) and 3 rows (with height 5fr, 20fr and 5fr).
• The grid-colum value is not a fraction. It means that the header block starts at line 1 and occupy column 1, 2, and 3, ending at line 4. There is an equivalent grid-row property for defining areas spanning multiple rows.

Applying it to my blog

After messing around with the CSS, I have a basic layout. I think it is not bad for less than 50 lines of CSS.

There is still much work to do, especially with media queries and mobile friendliness, but the progress is encouraging.

Next task: handling themes, CSS variables, and styling tables and forms.