Basic Portfolio Filtering System // jQuery // UI/UX // CSS Grid

basic-portfolio-filtering-system-jquery-ui-ux-css-grid.markdown

Basic Portfolio Filtering System // jQuery // UI/UX // CSS Grid

This is a very simple filtering system using jQuery class switching. It could also be done with vanilla JavaScript. The grid is created using CSS Grid Layout. This filter is a good starting place to do some cool things.

I often need just a basic filter for portfolios or categories and it's nearly impossible to find a plugin that just works. So I created one. Feel free to use it in your projects.

Update: This is fully responsive now. I fixed some of the issues with scrolling and padding.

A Pen by Djalma Bina on CodePen.

License.

index.pug

main

  section#controls
    ul
      li.filter.filter-all.active All
      li.filter.filter-landscape Landscape
      li.filter.filter-urban Urban
      li.filter.filter-portrait Portrait

  .grid-wrapper
    .image.landscape.landscape-1.all
    .image.urban.urban-1.all
    .image.urban.urban-2.all
    .image.portrait.portrait-1.all
    .image.urban.urban-3.all
    .image.portrait.portrait-2.all
    .image.urban.urban-4.all
    .image.landscape.landscape-2.all
    .image.portrait.portrait-3.all
    .image.landscape.landscape-3.all
    .image.landscape.landscape-4.all
    .image.portrait.portrait-4.all

script.js

// Show all
$('.filter-all').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.all').removeClass('hide');
});

// Show landscape
$('.filter-landscape').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.landscape').removeClass('hide');
  $('.urban, .portrait').addClass('hide');
});

// Show urban
$('.filter-urban').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.urban').removeClass('hide');
  $('.portrait, .landscape').addClass('hide');
});

// Show portrait
$('.filter-portrait').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.portrait').removeClass('hide');
  $('.landscape, .urban').addClass('hide');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.sass

*
  box-sizing: border-box

body
  margin: 0
  padding: 0
  
// This animation fades out the images but they still take up space on the grid

.hide
  animation: fadeOut 150ms ease
  opacity: 0 // play with this to control opacity of hidden images
  
@keyframes fadeOut
  0%
    opacity: 1 // initial opacity
  100% 
    opacity: 0 // final opacity; must match with opacity in the CSS class (below "animation: ")
  
// This animation completely removes the images form the grid
  
.hide
  display: none
  
// filtering controls

#controls
  margin-bottom: 2rem
  
  ul
    list-style: none
    padding: 1rem
    margin: 0
    display: flex
    li
      margin: 0
      padding: .5rem
      border: 1px solid #eee
      cursor: pointer
      
      &:hover
        background: #eee
      
    @media (min-width: 400px)
      li
        margin-right: 1rem
        padding: 1rem
      
    // active class; set on click
      
    .active
      background: #444
      color: white
      
      &:hover
        color: #444
  
  
// Grid styles

.grid-wrapper
  display: grid
  grid-template-columns: repeat(1, 1fr)
  grid-template-rows: auto
  grid-gap: 1rem
  justify-items: center
  // width: 98vw
  margin: 1rem
  
@media (min-width: 500px)
  .grid-wrapper
    grid-template-columns: repeat(2, 1fr)
    
@media (min-width: 768px)
  .grid-wrapper
    grid-template-columns: repeat(3, 1fr)
    
@media (min-width: 1368px)
  .grid-wrapper
    grid-template-columns: repeat(4, 1fr)
    

// Sets each image size (or cell) in the Grid

.image
  width: 100%
  height: 50vh
  
@media (min-width: 500px)
  .image
    width: 100%
    height: 50vw
    
@media (min-width: 768px)
  .image
    width: 100%
    height: 40vw
    
@media (min-width: 1368px)
  .image
    width: 100%
    height: 20vw
    
// Urban Photos

.urban-1
  background: url(https://unsplash.it/1500?image=1075)
    position: center
    size: cover
    repeat: no-repeat
  
.urban-2
  background: url(https://unsplash.it/1500?image=1067)
    position: center
    size: cover
    repeat: no-repeat
  
.urban-3
  background: url(https://unsplash.it/1500?image=1033)
    position: center
    size: cover
    repeat: no-repeat
  
.urban-4
  background: url(https://unsplash.it/1500?image=983)
    position: center
    size: cover
    repeat: no-repeat
  
// Landscape Photos
  
.landscape-1
  background: url(https://unsplash.it/1500?image=961)
    position: center
    size: cover
    repeat: no-repeat
  
.landscape-2
  background: url(https://unsplash.it/1500?image=916)
    position: center
    size: cover
    repeat: no-repeat
  
.landscape-3
  background: url(https://unsplash.it/1500?image=901)
    position: center
    size: cover
    repeat: no-repeat
  
.landscape-4
  background: url(https://unsplash.it/1500?image=876)
    position: center
    size: cover
    repeat: no-repeat
  
// Portrait Photos
  
.portrait-1
  background: url(https://unsplash.it/1500?image=978)
    position: center
    size: cover
    repeat: no-repeat
  
.portrait-2
  background: url(https://unsplash.it/1500?image=996)
    position: center
    size: cover
    repeat: no-repeat
  
.portrait-3
  background: url(https://unsplash.it/1500?image=1027)
    position: center
    size: cover
    repeat: no-repeat
  
.portrait-4
  background: url(https://unsplash.it/1500?image=838)
    position: center
    size: cover
    repeat: no-repeat