Responsive, filterable grid using Masonry and CSS transitions. Click on an item to make it expand.
Forked from Sean McCaffery's Pen Fluid Grid.
A Pen by Francesco Improta on CodePen.
git config --global user.useConfigOnly true |
.parent { | |
display: grid; | |
grid-gap: 16px; | |
padding: 16px; | |
grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); | |
grid-auto-flow: column; | |
grid-auto-columns: minmax(160px,1fr); | |
overflow-x: auto; | |
} |
git remote update origin --prune |
# Pattern name | |
Succinct description of the pattern | |
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::: | |
:: :: | |
:: Live Pattern Demo :: | |
:: :: | |
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::: |
$('.button').click(function(event){ | |
event.stopPropagation(); | |
event.preventDefault(); | |
$(this).toggleClass("clicked"); | |
$('.element').toggleClass("visible"); | |
}); |
select:-moz-focusring { | |
color: transparent; | |
text-shadow: 0 0 0 #000; | |
} |
$(window).scroll(function() { | |
var scroll = $(window).scrollTop(); | |
if (scroll >= 160) { | |
$(".primary-navbar").addClass("navbar-fixed-top"); | |
} | |
else { | |
$(".primary-navbar").removeClass("navbar-fixed-top"); | |
} | |
}); |
Responsive, filterable grid using Masonry and CSS transitions. Click on an item to make it expand.
Forked from Sean McCaffery's Pen Fluid Grid.
A Pen by Francesco Improta on CodePen.
<script src="jquery.js"></script> | |
<script src="modernizr.js"></script> | |
<script> | |
$(document).ready(function(){ | |
if(!Modernizr.input.placeholder){ | |
$('[placeholder]').focus(function() { | |
var input = $(this); |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( | |
src='images/logo.gif', | |
sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( | |
src='images/logo.gif', | |
sizingMethod='scale')"; |