iqbalhasnan/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap 3 + Salvattore Example, A 'jQuery Masonry' alternative with CSS-driven configuration.</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="salvattore.css">
</head>
<body>


	<!-- Header -->

	<header class="container">
		<div class="lead">
		<h1>Bootstrap 3 + Salvattore Example</h1>
		</div>
		<div class="malaysia">
			<p>Salvattore is an alternative to 'jquery Masonry' and it's based on CSS-driven configuration. Pay attention to the <code> data-columns</code> next to posts id in the html file, and after <code>/* Salvattore Base Styles */</code> in css file</p>
		</div>
		<hr>
	</header>
	<!-- Content -->
	<div class="container">
		<div id="posts" data-columns >
			<div class="post">
				<img src="http://placehold.it/480x500"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/380x300"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/480x500"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/280x700"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/580x500"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/580x300"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/480x480"></img>
			</div>
			<div class="post">
				<img src="http://placehold.it/380x300"></img>
			</div>
		</div>
	</div>


	<!-- Footer -->

	<footer class="container">
		<hr>
		<p>Thanks for watching</p>
	</footer>


	      <!-- The script must be included at the bottom of the body to work -->
	    <script src="https://raw.github.com/rnmp/salvattore/master/dist/salvattore.min.js"></script>
	</body>
</html>

## style.css
body {
    margin: auto;
    font-size: 100%;
    line-height: 1.4em;
    background: #fff;
    color: #FFF;
}
h1{
    color:#333;

}
p {
    color:#222;
    font-size: 16px;
    line-height: 1.5em;
}
.malaysia{
    padding:20px 0;
}
.lead{
    padding:10px 0 1px 0;
}

.footer {
    font-size: 1em;
    color: #FFF;
    margin: 0.5em;
}

#timeline {
    margin: 50px 0;
}
.post img {
    width: 100%;
}

.post{
  background: #ffffff;
  margin: 10px 5px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
  z-index: 999;
}
/*
   Spezific styling for salvattore
   Feel free to edit it as you like
   More info at http://salvattore.com
 */

/* Salvattore Base Styles */
.column {
    float: left;
}
.size-1of4 {
    width: 25%;
}
.size-1of3 {
    width: 33.333%;
}
.size-1of2 {
    width: 50%;
}

/* Configurate salvattore with media queries */
@media screen and (max-width: 450px) {
    #posts[data-columns]::before {
        content: '2 .column.size-1of2';
    }
    .post{
    	padding: 15px;
    }
}

@media screen and (min-width: 451px) and (max-width: 850px) {
    #posts[data-columns]::before {
        content: '3 .column.size-1of3';
    }
    .post{
    	padding: 9.9px;
    }
}

@media screen and (min-width: 851px) {
    #posts[data-columns]::before {
        content: '4 .column.size-1of4';
    }
    .post{
    	padding: 7.5px;
    }

}
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap 3 + Salvattore Example, A 'jQuery Masonry' alternative with CSS-driven configuration.</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="salvattore.css">
	</head>
	<body>



	<!-- Header -->

	<header class="container">
	<div class="lead">
	<h1>Bootstrap 3 + Salvattore Example</h1>
	</div>
	<div class="malaysia">
	<p>Salvattore is an alternative to 'jquery Masonry' and it's based on CSS-driven configuration. Pay attention to the <code> data-columns</code> next to posts id in the html file, and after <code>/* Salvattore Base Styles */</code> in css file</p>
	</div>
	<hr>
	</header>
	<!-- Content -->
	<div class="container">
	<div id="posts" data-columns >
	<div class="post">
	<img src="http://placehold.it/480x500"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/380x300"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/480x500"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/280x700"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/580x500"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/580x300"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/480x480"></img>
	</div>
	<div class="post">
	<img src="http://placehold.it/380x300"></img>
	</div>
	</div>
	</div>



	<!-- Footer -->

	<footer class="container">
	<hr>
	<p>Thanks for watching</p>
	</footer>


	<!-- The script must be included at the bottom of the body to work -->
	<script src="https://raw.github.com/rnmp/salvattore/master/dist/salvattore.min.js"></script>
	</body>
	</html>
	body {
	margin: auto;
	font-size: 100%;
	line-height: 1.4em;
	background: #fff;
	color: #FFF;
	}
	h1{
	color:#333;

	}
	p {
	color:#222;
	font-size: 16px;
	line-height: 1.5em;
	}
	.malaysia{
	padding:20px 0;
	}
	.lead{
	padding:10px 0 1px 0;
	}

	.footer {
	font-size: 1em;
	color: #FFF;
	margin: 0.5em;
	}

	#timeline {
	margin: 50px 0;
	}
	.post img {
	width: 100%;
	}

	.post{
	background: #ffffff;
	margin: 10px 5px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
	z-index: 999;
	}
	/*
	Spezific styling for salvattore
	Feel free to edit it as you like
	More info at http://salvattore.com
	*/

	/* Salvattore Base Styles */
	.column {
	float: left;
	}
	.size-1of4 {
	width: 25%;
	}
	.size-1of3 {
	width: 33.333%;
	}
	.size-1of2 {
	width: 50%;
	}

	/* Configurate salvattore with media queries */
	@media screen and (max-width: 450px) {
	#posts[data-columns]::before {
	content: '2 .column.size-1of2';
	}
	.post{
	padding: 15px;
	}
	}

	@media screen and (min-width: 451px) and (max-width: 850px) {
	#posts[data-columns]::before {
	content: '3 .column.size-1of3';
	}
	.post{
	padding: 9.9px;
	}
	}

	@media screen and (min-width: 851px) {
	#posts[data-columns]::before {
	content: '4 .column.size-1of4';
	}
	.post{
	padding: 7.5px;
	}

	}