JSFiddle - React, Tailwind, and code Playground

by jaubourg

HTML

<script src="http://dl.dropbox.com/u/17147445/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/17147445/jquery.color.min.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

$( document ).ready(function() {
    var grid = new Grid();
    
        
});

var cellWidth = 20,
    cellHeight = 20;

function Grid() {
    var $window = $( window ),
        wWidth = $window.width(),
        wHeight = $window.height(),
        sizeX = Math.floor( wWidth / cellWidth ),
        sizeY = Math.floor( wHeight / cellHeight ),
        fragment = document.createDocumentFragment(),
        x,
        y,
        px,
        py;
    
    for( y = 0; y < sizeY; y++ ) {
        py = y * cellHeight;
        for( x = 0; x < sizeX; x++ ) {
            px = x * cellWidth;
            fragment.appendChild( $( "<div/>" ).css({
                position: "absolute",
                display: "block",
                top: py,
                left: px,
                width: cellWidth,
                height: cellHeight
            }).append( $("<div/>").css({
                display: "block",
                margin: "auto",
                verticalAlign: "middle",
                borderRadius: "50%",
                backgroundColor: "black",
                width: "50%",
                height: "50%",
                opacity: 1
            }) )[ 0 ] );   
        }
    }
    
    fragment = $( fragment ).appendTo( "body" );
}