Skip to content

Instantly share code, notes, and snippets.

@iqbalhasnan
Last active July 7, 2016 00:53
Show Gist options
  • Save iqbalhasnan/9597562 to your computer and use it in GitHub Desktop.
Save iqbalhasnan/9597562 to your computer and use it in GitHub Desktop.
Bootstrap 3 + Salvattore - A jQuery Masonry/Isotope alternative with CSS-driven configuration. See it live here : http://codepen.io/tobsn/pen/EPdejY
<!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;
}
}
@iqbalhasnan
Copy link
Author

Thanks @tobsn

@Sogl
Copy link

Sogl commented Jul 7, 2016

Why so small images in FF?
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment