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')"; |