CSS Grid Layout and PostCSS: Now Kiss !
What happens when you combine a new powerful specification with a great processing tool ?
You are probably aware that CSS Grid Layout is finally here in the latest versions of Firefox (52) and Chrome (57). Developers can now enjoy the awesomeness of grid layouts, one of the most awaited features in the history of CSS.
Layout have always been a complex issue in CSS. Between floats, table layouts, absolute positioning and newcomers such as flexbox, we ended up with a wide range of solutions, each with different use cases and limitations. The inevitable browser-specific bugs and the need for graceful degradation did not help to make things simpler. This gave birth to strange curiosities such as “perfect layout templates” or “CSS frameworks”. If you think about the hundred of grid frameworks and utilities in the wild, and how none of them ever really convinced you, then you are not alone.
This is why flexbox has been very well received by developers. Finally, it was possible to produce certain layouts that used to require additional DOM elements or JavaScript. Yet it is not surprising to notice that with time, new layout systems in CSS have become increasingly complex. Flexbox brought 12 new properties, with fairly new concepts and new vocabulary. This complexity is necessary and assumed in order to cover as many use cases as possible and make flexbox the new dominant champion. Thus, many guides and tutorials quickly appeared, sometimes in unexpected forms like educational games.
I have a confession to make: despite reading dozens of guides and beating those flexbox games over and over, I still panic at the idea of writing a flexbox layout without a cheat sheet next to me. I am also unable to tell what layout will produce a piece of flex-powered CSS without long minutes of reflection, paper and pencil at hand. So when I first read about the Grid specification, I remember having sighed several times while I was taking notes for every new property and possible value.
It is unfortunate that what gained CSS in power, it lost in approachability. Web development is a great way to introduce people to programming, thanks to its quick and satisfying visual feedback. Now, while professional developers congratulate themselves about all the progress made, the first wall to climb for beginners is higher and higher.
But I truly believe that complexity and ease of use are not mutually exclusive. Having worked with PostCSS for about two years, this belief has not weakened. Many PostCSS-based tools like Autoprefixer or Rucksack are good examples of solutions that let you deal with complicated issues with surprising effortlessness. Without a doubt, PostCSS was the best card to play if I wanted to show my own vision of the Grid specification. Grid for dummies. Grid for ordinary people.
One night, I realized that the main complaint I had about the Grid spec and the grid frameworks in general was that they were designed to make the code easy to write rather than easy to read. There are plenty of helpers and shortcut notations intended to reduce the code size and supposedly the time to write the code itself, but not much that improves code readability. CSS is dedicated to visual aspects so why is it not visual itself? We should be able to take a quick look over a CSS file and immediately understand what kind of layout it will produce.
The new grid-template-areas property that came with the Grid specification has been a revelation to me. It allows arbitrary named areas and lets you organize them in the same way as they appear on the page. Just like that, our desired layouts finally become explicit in our code. So I worked around this property and gradually added more stuff to this notation, until it came closer to those ASCII-art tables we often see in our terminals and text files.
My final draft for the syntax is now the first example of a PostCSS plugin I called Grid-kiss. “kiss” stands for the Keep It Simple Stupid principle, but is also an invitation to developers to embrace Grid layouts without being afraid of the learning curve; because you understand it at first glance.
Once you decide to focus on explicitness and visual feedback, the design ideas around a syntax just come naturally. Want to pull the grid to the right? Add a few spaces on the left side to show where the empty space is. Want to vertically center the content of an area? Add two arrows pointing to the center. It is that simple. In the end, I managed to replace almost all of the new properties of CSS Grids with a single one: grid-kiss.
The first reactions I received after publishing Grid-kiss were quite funny. Many initially thought it was a joke or did not believe it was real. I had to make an online demonstration editor and add a fallback option for older browsers so that people could check by themselves that it was real and truly functional. I have also been suggested some pretty crazy ideas by enthusiastic people, such as optical text recognition. “Imagine how would be cool to put a layout drawn on a napkin.” he said. Finally, I expected the idea to be controversial and indeed, beginners seem to love it as much as CSS evangelists hate it. I just regret that they did not take the time to develop their point of view.
Maybe it is time now to tell you that Grid-kiss is actually my first PostCSS plugin, and was initially a week-end project. What many people assumed to be “black magic” turned out to be very easy to build. Certainly I am not the first one to come up with this WYSIWYG idea for CSS, but I think I found myself at the right time with the right tools. The Grid specification is very powerful as expected and PostCSS did 90% of the job for me. I believe PostCSS is far from having shown its full potential, and I encourage you to give it a try and experiment any crazy idea you may have.
Let me conclude with a few shout-outs. Andrey Sitnik, the creator of PostCSS, immediately gave me incredible support for promoting this project. I have never seen such a demonstration of spontaneous involvement, especially from a very busy person who just got to know me, and am deeply grateful for his help. It turned out that the entire PostCSS community is the most friendly environment I have ever met in my open-source experience. Seriously guys, you are awesome.
