CSS Grid Layout Spec 2 to Spec 1 Transpiler with Sass

I have to admit, when I five years ago, the first time I heard of CSS Grids, I still thought “Another display mode, now you slowly come to the benefit of Flexbox”.
It was also such a Microsoft story, there is eh already inwardly on defense. But with the time it became more interesting, but then came back again the thoughts, because of the browser compatibility. But for a few weeks shouting the Internet Hurray, indeed all browsers are now green, so the latest versions. I stayed skeptical until I saw the video on the weekend.
I think Morten Rand-Hendriksen has just said the right thing, which was important to me. Progressive enhancement, browsers that can not, can still display the content. So I was thrilled so I started testing. There were many “Aaaaaahs” and “Ooooohs”, followed by some “WTF is great!”. Template Area did it to me, in the spirit I began to build layouts with grid layout. Which I must take into consideration all the advantages. Above all, you need less grouping and position divs in the markup. And in the back of the head was the thought “IE and Edge can do so, yes, were the first with CSS Grid”. To my shame I must admit, I have not tried it before, alone because I know myself.
So IE test followed the next day and my mood adapted to the summer weather, rainy with the prospect of thunderstorms. Well there he was again my good old friend, Internet Explorer with its successor Microsoft Edge. Both failed, or was I? I with my gullible and very enthusiastic kind. It followed the study of what is possible with IE and Edge and what is not.
I was not enthusiastic. The best features like grid-gap, grid-template-area and grid-area are not supported by IE and Edge. (Edge v16 should support Spec 2). Great! Somehow the theme has just finished itself. In each grid box manually enter the respective grid and row coordinates, which was too stupid for me. It does not feel comfortable. What do I do if I want to change something, or worse, I also want to get gaps between the boxes. Then I have to build in the old specification additional boxes between the boxes. Oh Flexbox is cooler or not?
Well, I would not be me if it would not leave me any peace. So put and thought. How about I build a transpiler with Sass? I am writing Spec 2 and for MS browser this is being translated into Spec 1. On the occasion I was able to add (https://github.com/kittn/generator-kittn) a new “Browser Detection”, because this time I need Edge and the respective version number (https://github.com/lancedikson / bowser). So I am creating a fallback class for IE10–11 and Edge 12–15. Edge 16 is supposed to support Spec 2 and therefore does not need a fallback class.
Columns and Rows
As such, the fallback for grid-template-columns and grid-template-rows is harmless. Typically autoprefixer would take care of that. What do I do if I want to add Gaps? Then from the original three columns, five columns because two times the gap must be added. Since you generate the gap with more boxes. The Mixin for Rows and Columns generates once for Spec 2 and once for Spec 1 (in this case, with optional spaces).
The widths or heights are then recorded in the mixin, but shorthands such as repeat (1fr) are also omitted.
.wrapper {
@include grid-columns(10px 250px 1fr 50px 100px);
@include grid-rows(10px 1fr);
}Area Matrix
Since I have the template areas still further processing, I need this in a map. The Mixin here is nothing special, it builds the template areas for Spec 2 capable browsers from the map.
$gridAreaMap: (
row1: ('logo', 'nav', 'nav', 'nav'),
row2: ('logo', 'empty', 'search', 'search')
);
@include grid-matrix($gridAreaMap);Grid Area
The upper Mixin is not important for Spec 1 now, more important is the Area Map, which we take up with the following Mixin. The Mixin does nothing more than pick the corresponding Colum and Row Line Numbers from the map by the area name. And then generate the coordinates for Spec 1 capable browsers. The whole with optional span (if the box is bigger than a column / row) and if a gap is active the coordinates adjust accordingly.
.logo {
@include grid-area(logo, $gridAreaMap, true, true);
-ms-grid-row-align: center;
}Then:
.logo {
grid-area: logo;
-ms-grid-row-align: center;
}
.old-grid-spec .logo {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
}As you can see, this is relatively simple, has to worry less about IE / Edge and still has the advantages of the current specification.
Before I forget, I still use https://github.com/at-import/SassyLists to edit the sass lists.
