bsk.se

12/2 2010
gjort AD arkitektur grid koncept Silver slump webbplats wordpress

Trevliga BSK Arkitekter har skaffat nytt utseende och ny webbplats, med ett trevligt gridsystem. I samarbete med trevliga designbyrån Silver.

Länk: bsk.se

Så här ser gridsystemet ut, översatt från as3 till php/css:

// © 2010 lhli.net.
// Licence: http://creativecommons.org/licenses/by-sa/2.5/
function calculateBox()
{
    $box = array();
    $item = rand(0, 2);
    // go through all possible cases for area the size of the largest box
    if ($item == 2) $box = array(0 => 'large');
    else if ($item == 1) {
        $item = rand(0, 1);
        if ($item == 1) $box = array(0 => 'medium', 'medium');
        else $box = array(0 => 'medium', 'small', 'small');
    }
    else {
        $item = rand(0, 1);
        if ($item == 1) $box = array(0 => 'small', 'small', 'medium');
        else $box = array(0 => 'small', 'small', 'small', 'small');
    }
    return $box;
};

function drawBoxOfType($boxType) {
    // here goes...
}

// draw boxes, for example as a wordpress loop:
$boxCnt = 0;
$thisBox = calculateBox();
if (have_posts()){
    while (have_posts()){
        the_post();

        if ($boxCnt >= count($thisBox)){
            $boxCnt = 0;
            $thisBox = calculateBox();
        }
        drawBoxOfType($thisBox[$boxCnt]);
        $boxCnt++;
    }
};

och lite css:

.box { /* Wraps the smaller boxes */
    width: 320px;
    height: 300px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
}

.large {
    width: 300px;
    height: 300px;
    margin-right: 20px;
    float: left;
    overflow: hidden;
}

.medium {
    width: 300px;
    height: 140px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    overflow: hidden;
}

.small {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    overflow: hidden;
}