KnittingCSS

What is Fair Isle?

Fair Isle (named after a tiny island off Scotland) is a technique of knitting motifs with multiple colors, usually from a chart. While there can be as little as 2 colors, or as much as six, the general rule of fair isle knitting is that there are only two colors per row. The style gained popularity when Edward VIII was seen in public with his (now famous) sweater vests. You can read more about the technique on Wikipedia.

What is this project?

is a collection of modern and vintage fair isle charts, reproduced entirely in code. PHP creates the actual charts and CSS colors them. My goal is to charts with different sizes and multiple colors, and ultimately to get up to charts with multiple motif blocks. This will probably require rewriting the code that creates this chart several times. In fact, I rewrote the PHP twice just for the first chart. Each rewrite aims for better code - less code, faster code and cleaner code.

The Chart Generator

Version 1

Version 1 of the codebase used PHP to create the chart and CSS nth-child selectors to select each unit that needed to be colored in. I made it to about Row 6 (of 32 for the first pattern) before realizing this was a totally unfeasible way of going about this.

Version 2

Version 2 got a bit closer to what I was looking for, and instead used an array to apply a color class to the necessary units. However, this too was way too cumbersome and counting 1,024 units was taking was too long. This was also about the time I scrapped the 'responsive' version of the charts (for now).

Version 3

Version 3 is now still using arrays, but merging basic arrays with ranges to get the pattern charted faster. I also came up with the idea to display the unit count inside the box and overlaying the pattern image behind the coded grid, to make for faster charting. I was able to complete the first chart (with 1,024 units) in less than hour, while on the phone.

Version 4 (Charts 5 & Up)

Version 4 was created with the help of Robin Metcalfe. Instead of multiple arrays and ranges, it now takes numbers and spaces and uses each character as a unit. This sped up time creating patterns and uses a lot less code. The code now even resembles the outputted grid!

Version 5 (Charts 5 & Up)

Inspired by Tim West's sample code, I added responsive widths! The charts now scale down to mobile, instead of scrolling horizontally.

<?php
    
    
// Create a knitting chart grid
    
    
function knittingChart($columns,$pattern) {
        
        
// first give the chart a container
        
        
$totalWidth $columns 25;

        echo 
'<div class="chart" style="max-width: '.$totalWidth.'px;">';
        
        
// Create responsive dimensions
        
        
$unitWidth 100 $columns;
        
$unitHeight $unitWidth 0.8;
        
        
// Create units
        
        
$unitNumber 1;
        
        foreach(
$pattern as $row) {
                        
            for(
$i 1$i strlen($row); $i++) {
                
                
// access char in a string using array-like notation
                
                
$char $row[$i];
                if(
$char == ' ') {
                    
$class 'unit';
                } else {
                    
$class "unit color{$char}";
                }
                echo 
"<span class='{$class}' style='width: $unitWidth%; padding-bottom: $unitHeight%;'></span>";
                
                
$unitNumber++;
            }
        }
                    
        
// close chart container
                
        
echo '</div>';
        
    }
    
?>
<?php
    
    $pattern 
= array(
        
" 222222222222222222222222222222",
        
" 3 3  3  3 3  3  3 3  3  3 3  3",
        
"  3  333  3  333  3  333  3  33",
        
" 3 3  3  3 3  3  3 3  3  3 3  3",
        
" 222222222222222222222222222222",    
        
"                               ",
        
"          111     111          ",
        
"  1 1    1   1   1   1    1 1  ",
        
"   11   11   1   1   11   11   ",
        
"  111   11  1     1  11   111  ",
        
"     1  111    1    111  1     ",
        
"      1 1111  111  1111 1      ",
        
"       1 1111  1  1111 1       ",
        
"   1111 1 1111   1111 1 1111   ",
        
"  111111 1 1111 1111 1 111111  ",
        
" 1   1111 1 111 111 1 1111   1 ",
        
" 1    1111 1 11 11 1 1111    1 ",
        
" 1  1  1111 1 1 1 1 1111  1  1 ",
        
"  11    1111 1   1 1111    11  ",
        
"      1  1111 1 1 1111  1     1",
        
" 1   111       1       111   11",
        
"      1  1111 1 1 1111  1     1",
        
"  11    1111 1   1 1111    11  ",
        
" 1  1  1111 1 1 1 1 1111  1  1 ",
        
" 1    1111 1 11 11 1 1111    1 ",
        
" 1   1111 1 111 111 1 1111   1 ",
        
"  111111 1 1111 1111 1 111111  ",
        
"   1111 1 1111   1111 1 1111   ",
        
"       1 1111  1  1111 1       ",
        
"      1 1111  111  1111 1      ",
        
"     1  111    1    111  1     ",
        
"  111   11  1     1  11   111  ",
        
"   11   11   1   1   11   11   ",
        
"  1 1    1   1   1   1    1 1  ",
        
"          111     111          ",
        
"                               ",
        
" 222222222222222222222222222222",
        
" 3 3  3  3 3  3  3 3  3  3 3  3",
        
"  3  333  3  333  3  333  3  33",
        
" 3 3  3  3 3  3  3 3  3  3 3  3",
        
" 222222222222222222222222222222"
    
);

    
knittingChart(30,$pattern);
?>