zetareticoli

<h1>GRG Responsive Grid</h1>
<h2>Responsive grid without masonry (light on Javascript). Requires square or 2:3 scale tiles ("tall" class).</h2>
<h2>By <a href="mailto:olex@bighuman.com">Olex</a>, Señor Developer at <a href="http://bighuman.com">BIG HUMAN</a></h2>
<div class="grid">
   <div class="item tall">
     <a class="link" href="#">
       <div class="hovercontent">
         <h1>JETSETTER</h1>
         <h3>Designed by Big Human</h3>
       </div>

zetareticoli

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

zetareticoli

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

zetareticoli

#wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -140px; /* margin bottom = footer's height */
 ...
}

zetareticoli

    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.08), inset 0 1px 0 white;
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.08), inset 0 1px 0 white;
    box-shadow: 2px 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 white;

zetareticoli

    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;

zetareticoli

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:block;
}

.cf:after {
    clear:both;
}

zetareticoli

ul.box {
margin: 0;
padding: 0;
clear: both;
overflow: hidden; }

ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;

zetareticoli

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {

zetareticoli

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;