CSS Grid Generator

by Eric Miller

HTML

<body class="com-pseudoninja-grids">
        <div class="site">
            <header class="header site-header">
                <span class="site-title">PseudoNinja.com</span>
            </header>
            <div class="content site-content">
                <div class="page">
                    <header class="header page-header">
                        <h1 class="title page-title">Grids Generator</h1>
                    </header>
                    <div class="content page-content">
                        
                        
                    </div>
                </div>
            </div>
        </div>

CSS

.grid{
                display:inline-block;
                background-color:#DDD;
                margin-top:10px;
                margin-bottom:10px;
                text-align:center;
                font-size:13px;
            }

JavaScript

; // @ignore prevents script overflow

var grid, canvas, com = com || {};

com.pseudoninja = com.pseudoninja || {};

com.pseudoninja.grids = {
    constants: {
        classname: 'com-pseudoninja-grids'    
    }
}; 

com.pseudoninja.grids.Grid = function(params) {
    
    params = params || {};

    this.cols = [];
    this.colClassName = (typeof(params.colClassName) !== 'undefined') ? params.colClassName : null;
    this.width = (typeof(params.width) !== 'undefined') ? params.width : com.pseudoninja.grids.Grid.constants.defaults.width;
    this.gutter = (typeof(params.gutter) !== 'undefined') ? params.gutter : com.pseudoninja.grids.Grid.constants.defaults.gutter;
    this.maxcolumns = (typeof(params.maxcolumns) !== 'undefined') ? params.maxcolumns : com.pseudoninja.grids.Grid.constants.defaults.maxcolumns;
    
    //[PUBLIC]
    this.toString = function() {
        var response = '',
            index = this.cols.length;
        while(index--) {
            if(typeof this.cols[index] !== 'undefined') {
                response += this.cols[index] + '\n';
            }
        }
        return response;
    };

    this.toStyle = function() {
        return '<style id="' + this.getId() + '" class="' + com.pseudoninja.grids.Grid.constants.classname + '-style">' + this.toString() + '</style>';
    };
    
    //[GET/SET]
    this.setCols = function(cols) {
        this.cols = cols;
        return;
    };

    this.setCol =  function(col) {
        this.cols.push(col);
        return;
    };
    
    this.getId = function(){
        return com.pseudoninja.grids.Grid.constants.classname + '-style-' + this.width + '-' + this.gutter;
    };
    
    var col, colWidth,
        col_index = this.maxcolumns + 1;
        
    while(col_index--) {
        var colspan_index = this.maxcolumns;
        while(colspan_index--) {
            if(colspan_index === col_index || colspan_index < 1 || colspan_index > col_index) {
                continue;
            }
           ...