Grid concept for my website

grid-concept-for-my-website.markdown

Grid concept for my website

This is just a concept for my website (www.zhongapp.com), showing how to show messages and statuses from the users.

A Pen by Kostis on CodePen.

License.

index.html

<div id="device">
	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">
			<input class="new-zhong" placeholder="Six words; no more, no less."/>
		</div>
		<div class="footer">What's on your mind?</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">
			<img src="https://unsplash.it/500/300/?random" />
		</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">This is another six word story.</div>
		<div class="links"><a href="#">Link</a></div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">
			<img src="https://unsplash.it/500/400/?random" />
		</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">Write something about New York City in just six words, for a chance to win a gift card!</div>
		<div class="links"><a href="#">View prompt</a></div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">What can one say about life?</div>
		<div class="links"><a href="#">Link</a></div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">This is a six word story.</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">This is a six word story.</div>
		<div class="links"><a href="#">Link</a></div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">This is a six word story.</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">
			<img src="http://unsplash.it/600/420" />
		</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">This is a six word story.</div>
		<div class="footer">This is a Footer</div>
	</div>

	<div class="item box">
		<div class="header">
			<img class="profile-pic" src="http://placehold.it/64x64" />
			<a href="#">username</a> 
			<div class="date">April 8, 2015</div>
		</div>
		<div class="body">
			<img src="http://unsplash.it/300/250" />
		</div>
		<div class="footer">This is a Footer</div>
	</div>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<script>
/**
 * jQuery Grid-A-Licious(tm) v3.01
 *
 * Terms of Use - jQuery Grid-A-Licious(tm)
 * under the MIT (https://www.opensource.org/licenses/mit-license.php) License.
 *
 * Copyright 2008-2012 Andreas Pihlström (Suprb). All rights reserved.
 * (http://suprb.com/apps/gridalicious/)
 *
 */

// Debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
// Copy pasted from http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

(function ($, sr) {
    var debounce = function (func, threshold, execAsap) {
        var timeout;
        return function debounced() {
            var obj = this,
                args = arguments;

            function delayed() {
                if (!execAsap) func.apply(obj, args);
                timeout = null;
            };
            if (timeout) clearTimeout(timeout);
            else if (execAsap) func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 150);
        };
    }
    jQuery.fn[sr] = function (fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
})(jQuery, 'smartresize');

// The Grid-a-Licious magic…

(function ($) {

    $.Gal = function (options, element) {
        this.element = $(element);
        this._init(options);
    };

    $.Gal.settings = {
        selector: '.item',
        width: 225,
        gutter: 20,
        animate: false,
        animationOptions: {
            speed: 200,
            duration: 300,
            effect: 'fadeInOnAppear',
            queue: true,
            complete: function () {}
        },
    };

    $.Gal.prototype = {

        _init: function (options) {
            var container = this;
            this.name = this._setName(5);
            this.gridArr = [];
            this.gridArrAppend = [];
            this.gridArrPrepend = [];
            this.setArr = false;
            this.setGrid = false;
            this.setOptions;
            this.cols = 0;
            this.itemCount = 0;
            this.prependCount = 0;
            this.isPrepending = false;
            this.appendCount = 0;
            this.resetCount = true;
            this.ifCallback = true;
            this.box = this.element;
            this.options = $.extend(true, {}, $.Gal.settings, options);
            this.gridArr = $.makeArray(this.box.find(this.options.selector));
            this.isResizing = false;
            this.boxArr = [];

            // build columns
            this._setCols();
            // build grid
            this._renderGrid('append');
            // add class 'gridalicious' to container
            $(this.box).addClass('gridalicious');
            // add smartresize
            $(window).smartresize(function () {
                container.resize();
            });
        },

        _setName: function (length, current) {
            current = current ? current : '';
            return length ? this._setName(--length, "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".charAt(Math.floor(Math.random() * 60)) + current) : current;
        },

        _setCols: function () {
            // calculate columns
            this.cols = Math.floor(this.box.width() / this.options.width);
            diff = (this.box.width() - (this.cols * this.options.width) - this.options.gutter) / this.cols;
            w = (this.options.width + diff) / this.box.width() * 100;

            // add columns to box
            for (var i = 0; i < this.cols; i++) {
                var div = $('<div></div>').addClass('galcolumn').attr('id', 'item' + i + this.name).css({
                    'width': w + '%',
                    'paddingLeft': this.options.gutter,
                    'paddingBottom': this.options.gutter,
                    'float': 'left',
                    '-webkit-box-sizing': 'border-box',
                    '-moz-box-sizing': 'border-box',
                    '-o-box-sizing': 'border-box',
                    'box-sizing': 'border-box'
                });
                this.box.append(div);
            }
            
            
            this.box.find($('#clear' + this.name)).remove();
            // add clear float
            var clear = $('<div></div>').css({
                'clear': 'both',
                'height': '0',
                'width': '0',
                'display': 'block'
            }).attr('id', 'clear' + this.name);
            this.box.append(clear);
        },

        _renderGrid: function (method, arr, count, prepArray) {
            var items = [];
            var boxes = [];
            var prependArray = [];
            var itemCount = 0;
            var prependCount = this.prependCount;
            var appendCount = this.appendCount;
            var gutter = this.options.gutter;
            var cols = this.cols;
            var name = this.name;
            var i = 0;

            // if arr
            if (arr) {
                boxes = arr;
                // if append
                if (method == "append") {
                    // get total of items to append
                    appendCount += count;
                    // set itemCount to last count of appened items
                    itemCount = this.appendCount;
                }               
                // if prepend
                if (method == "prepend") {
                    // set itemCount
                    this.isPrepending = true;
                    itemCount = Math.round(count % cols);
                    if (itemCount <= 0) itemCount = 1; 
                }
                // called by _updateAfterPrepend()
                if (method == "renderAfterPrepend") {
                    // get total of items that was previously prepended
                    appendCount += count;
                    // set itemCount by counting previous prepended items
                    itemCount = count;
                }
            }
            else {
                boxes = this.gridArr;
                appendCount = $(this.gridArr).size();
            }

            // push out the items to the columns
            $.each(boxes, function (index, value) {
                var item = $(value);
                
                item.css({
                    'marginBottom': gutter,
                    'zoom': '1',
                    'filter': 'alpha(opacity=0)',
                    'opacity': '0'
                }).find('img, object, embed, iframe').css({
                    'width': '100%',
                    'height': 'auto'
                });
                
                // prepend on append to column
                if (method == 'prepend') {
                    itemCount--;
                    $("#item" + itemCount + name).prepend(item);
                    items.push(item);
                    if(itemCount == 0) itemCount = cols;
                } else {
                    $("#item" + itemCount + name).append(item);
                    items.push(item);
                    itemCount++;
                    if (itemCount >= cols) itemCount = 0;
                    if (appendCount >= cols) appendCount = (appendCount - cols);
                }
            });

            this.appendCount = appendCount;
            this.itemCount = itemCount;

            if (method == "append" || method == "prepend") {
                if (method == "prepend") { 
                  // render old items and reverse the new items
                  this._updateAfterPrepend(this.gridArr, boxes);
                }
                this._renderItem(items);
                this.isPrepending = false;
            } else {
                this._renderItem(this.gridArr);
            }
        },

        _collectItems: function () {
            var collection = [];
            $(this.box).find(this.options.selector).each(function (i) {
                collection.push($(this));
            });
            return collection;
        },

        _renderItem: function (items) {

            var speed = this.options.animationOptions.speed;
            var effect = this.options.animationOptions.effect;
            var duration = this.options.animationOptions.duration;
            var queue = this.options.animationOptions.queue;
            var animate = this.options.animate;
            var complete = this.options.animationOptions.complete;

            var i = 0;
            var t = 0;

            // animate
            if (animate === true && !this.isResizing) {

                // fadeInOnAppear
                if (queue === true && effect == "fadeInOnAppear") {
                    if (this.isPrepending) items.reverse();
                    $.each(items, function (index, value) {
                        setTimeout(function () {
                            $(value).animate({
                                opacity: '1.0'
                            }, duration);
                            t++;
                            if (t == items.length) {
                                complete.call(undefined, items)
                            }
                        }, i * speed);
                        i++;
                    });
                } else if (queue === false && effect == "fadeInOnAppear") {
                    if (this.isPrepending) items.reverse();
                    $.each(items, function (index, value) {
                        $(value).animate({
                            opacity: '1.0'
                        }, duration);
                        t++;
                        if (t == items.length) {
                            if (this.ifCallback) {
                                complete.call(undefined, items);
                            }
                        }
                    });
                }

                // no effect but queued
                if (queue === true && !effect) {
                    $.each(items, function (index, value) {
                        $(value).css({
                            'opacity': '1',
                            'filter': 'alpha(opacity=1)'
                        });
                        t++;
                        if (t == items.length) {
                            if (this.ifCallback) {
                                complete.call(undefined, items);
                            }
                        }
                    });
                }

                // don not animate & no queue
            } else {
                $.each(items, function (index, value) {
                    $(value).css({
                        'opacity': '1',
                        'filter': 'alpha(opacity=1)'
                    });
                });
                if (this.ifCallback) {
                    complete.call(items);
                }
            }
        },

        _updateAfterPrepend: function (prevItems, newItems) {            
            var gridArr = this.gridArr;
            // add new items to gridArr
            $.each(newItems, function (index, value) {
                gridArr.unshift(value);
            })
            this.gridArr = gridArr;
        },

        resize: function () {
            // delete columns in box
            this.box.find($('.galcolumn')).remove();
            // build columns
            this._setCols();
            // build grid
            this.ifCallback = false;
            this.isResizing = true;
            this._renderGrid('append');
            this.ifCallback = true;
            this.isResizing = false;
        },

        append: function (items) {
            var gridArr = this.gridArr;
            var gridArrAppend = this.gridArrPrepend;
            $.each(items, function (index, value) {
                gridArr.push(value);
                gridArrAppend.push(value);
            });
            this._renderGrid('append', items, $(items).size());
        },

        prepend: function (items) {
            this.ifCallback = false;
            this._renderGrid('prepend', items, $(items).size());
            this.ifCallback = true;
        },
    }

    $.fn.gridalicious = function (options, e) {
        if (typeof options === 'string') {
            this.each(function () {
                var container = $.data(this, 'gridalicious');
                container[options].apply(container, [e]);
            });
        } else {
            this.each(function () {
                $.data(this, 'gridalicious', new $.Gal(options, this));
            });
        }
        return this;
    }

})(jQuery);
</script>

script.js

// Created by @conmarap
// Uses this library:
//  http://suprb.com/apps/gridalicious/

$(document).ready(function () {
	$("#device").gridalicious({
		gutter: 5,
		width: 265,
		animate: true,
		animationOptions: {
			speed: 50,
			duration: 500,
			complete: onComplete
		},
	});

	// function not used. 
	function onComplete(data) {

	}
});

style.css

body {
	background: #f1f1ed;
	font-family: sans-serif;
}

input.new-zhong {
	padding: 5px;
	outline: none;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-box-shadow: inset 0 -1px 0 #ddd;
	box-shadow: inset 0 -1px 0 #dddddd;
	font-size: 16px;
	width: calc(100% - 5px);
	transition: 0.2s ease-in-out;
}

input.new-zhong:hover {
	box-shadow: inset 0 -1px 0 #5890FF;
}

input.new-zhong:active,
input.new-zhong:focus {
	box-shadow: inset 0 -2px 0 #5890FF;
}

.item {
	background: #bebebe;
	color: #333;
	border-radius: 3px;
	padding: 10px ;
	word-wrap: break-word;
	/*white-space: pre;
	white-space: pre-wrap;*/
}

.box {
	border: 1px solid #ddd;
	padding: 10px 12px;
	margin-bottom: 15px;
	background: #fff;
	box-sizing: border-box;
	border-radius: 3px;
	overflow: hidden;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	word-wrap: break-word;
}

.box .header {
	position: relative;
	color: #9197a3;
	font-size: 12px;
	line-height: 1.38;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f3f3f3;
}

.box .body {
	padding: 5px;
	word-wrap: break-word;
}

.box .header .profile-pic {
	height: 32px !important;
	width: 32px !important;
	border-radius: 50%;
	/*margin-left: -20px;
	margin-top: -20px;*/
}

.box .header a {
	display: block;
  	font-weight: bold;
	margin-top: -28px;
	padding-bottom: 10px;
	margin-left: 38px;
	text-decoration: none;
	color: #5890ff;
}

.box .header .date {
	position: absolute;
	right: 0;
	top: 10px;
}

.box .links {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.38;
}

.box .links a {
	color: #5890FF;
	text-decoration: none;
}

.box .links a:hover {
	text-decoration: underline;
}

.box .footer {
	color: #444;
	font-size: 12px;
	line-height: 1.38;
	border-top: 1px solid #f3f3f3;
	background: #fbfbfb;
	padding: 10px 12px;
	margin: 8px -12px -10px -12px;
}

.box:hover {
	border: 1px solid #5890FF;
}

#device {
	margin: 10px auto 0;
	/*margin-left: 200px;*/
}

header {
	text-align: center;
	position: fixed;
	top: 25%;
	z-index: 999999;
	width: 400px;
	left: 50%;
	display: none;
	/*  margin-left: -200px; */
}

header h1 {
	font-size: 60px;
	line-height: 1;
	letter-spacing: -1px;
	margin-left: -0.12em;
	width: 100%;
	display: block;

}

header h1 .v {
	font-size: 120px;
	line-height: 1;
	letter-spacing: -1px;
	margin-left: 10px;
}

header p {
	margin-left: 10px;
	/*margin: 10px 0 40px;*/
}

#info {
	/*margin-top: -175px*/
}

#resize_container {
	position: fixed;
	height: 50px;
	margin: 0:
		width: 146px;
	left: 50%;
	margin-left: -73px;
	margin-top: 20px;
	z-index: 99999;
}

#resize a:hover {
	opacity: 1; 
}

.browser{
	height: 25px;
	width: 36px;
	text-indent: -9999px;
	display: block;
	background: url('../img/browser.png') top left no-repeat;
	cursor: pointer;
	float: left;
	opacity: .3;
}

.active {
	opacity: 1;
	cursor: default
}

.btn-large {
	padding: 9px 14px;
	font-size: 26px;
	line-height: normal;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.footer {
	background: #fff;
	padding: 60px;
	border-top: 1px solid #e5e5e5;
	margin-top: 20px;
	color: #666
}

.footer a {
	color: #666;
}