Last active
July 7, 2016 00:53
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks @tobsn