The re;feri grid system

Every website emits CO2. Behind some links, you may even find the carbon footprint equivalent to that of a plastic bag [1]. Over the past decade, the average size of a mobile website has increased sixfold to 2,011 KB [2]—that's more content than the combined length of three Harry Potter novels [3].

As part of my bachelor's thesis, I launched an initiative called RE; FERI to counteract the consumption-driven vision of the web and reduce entry barriers. The Raster System was part of it. Now, three years later, I've made it accessible in English to ensure universal access.
1 2 3 4 5 6 7 8 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span=2 or 1-2 span=4-6 span=2 or 7-8 span=2-4 span=6-7 span=3 or 1-3 span=2 or 4-5 span=3 or 6-8 span=2-3 span=5-8 Hover over the black fields

Simple, Efficient & Durable

This grid system consists of a single CSS file, which in turn consists of only a few lines of code. It does not require bloated JavaScript and is very resource-efficient and fast, with only about 1 KB in size. With minor modifications, it is even possible to use this grid system for designing posters. These posters can be exported as PDFs using the browser's Print function.

raster-system.zip (2 KB)


 Instructions
The grid is divided into 8, alternatively 12 columns. Columns are assigned using the <cell> tag, and their respective length is specified using span=. Example
<cell span=3> creates a cell that is 3 columns wide. If there is not enough space in the current row, it moves to the next row.
<cell span=5-8> creates a cell that starts in the 5th column and ends in the 8th column.