Mobilizer Canvas Prototype 1

In this example below you will see how to do a Mobilizer Canvas Prototype 1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by seanmateer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seanmateer ©
  • HTML
  • CSS
  • JavaScript
    <div class="header">
  
  <div class="top-bar">
    <div class="search">
      <input type="text" placeholder="Enter a URL">
      <button>GO</button>  
    </div>
  </div>

  <div class="controls">
     <label>Filter:</label>

    <button class="filter" data-filter="all">All</button>
    <button class="filter" data-filter=".category-1">Category 1</button>
    <button class="filter" data-filter=".category-2">Category 2</button>

    <label>Sort:</label>

    <button class="sort" data-sort="myorder:asc">Asc</button>
    <button class="sort" data-sort="myorder:desc">Desc</button>
  </div>  
</div>

<div id="grid-container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
  <div class="mix category-1" data-myorder="3"></div>
  <div class="mix category-2" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-1" data-myorder="6"></div>
  <div class="mix category-2" data-myorder="7"></div>
  <div class="mix category-2" data-myorder="8"></div>
  <div class="mix category-1" data-myorder="9"></div>
  <div class="mix category-1" data-myorder="10"></div>
  <div class="mix category-1" data-myorder="11"></div>
  <div class="mix category-2" data-myorder="12"></div>
  <div class="mix category-1" data-myorder="13"></div>
  <div class="mix category-1" data-myorder="14"></div>
  <div class="mix category-2" data-myorder="15"></div>
  <div class="mix category-2" data-myorder="16"></div>
  <div class="mix category-2" data-myorder="17"></div>
  <div class="mix category-1" data-myorder="18"></div>
  <div class="mix category-1" data-myorder="19"></div>
  <div class="mix category-1" data-myorder="20"></div>
  <div class="mix category-2" data-myorder="21"></div>
  <div class="mix category-1" data-myorder="22"></div>
  <div class="mix category-1" data-myorder="23"></div>
  <div class="mix category-2" data-myorder="24"></div>
  <div class="mix category-2" data-myorder="25"></div>
  <div class="mix category-2" data-myorder="26"></div>
  <div class="mix category-1" data-myorder="27"></div>
  <div class="mix category-1" data-myorder="28"></div>
  <div class="mix category-1" data-myorder="29"></div>
  <div class="mix category-2" data-myorder="30"></div>
  <div class="mix category-1" data-myorder="31"></div>
  <div class="mix category-1" data-myorder="32"></div>
  <div class="mix category-1" data-myorder="33"></div>
  <div class="mix category-2" data-myorder="34"></div>
  <div class="mix category-1" data-myorder="35"></div>
  <div class="mix category-1" data-myorder="36"></div>
  <div class="mix category-1" data-myorder="37"></div>
  <div class="mix category-2" data-myorder="38"></div>
  <div class="mix category-1" data-myorder="39"></div>
  <div class="mix category-1" data-myorder="40"></div>
  <div class="mix category-1" data-myorder="41"></div>
  <div class="mix category-2" data-myorder="42"></div>
  <div class="mix category-1" data-myorder="43"></div>
  <div class="mix category-1" data-myorder="44"></div>


  <div class="gap"></div>
  <div class="gap"></div>
</div>



/*Downloaded from https://www.codeseek.co/seanmateer/mobilizer-canvas-prototype-1-RNmwdQ */
    @import "bourbon";

@mixin placeholder {
  ::-webkit-input-placeholder{@content}
  :-moz-placeholder{@content}
  ::-moz-placeholder{@content}
  :-ms-input-placeholder{@content}  
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body{
  margin: 0px;
}

body, button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

.controls{
  padding: 2%;
  background: #333;
  color: #eee;
}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  
  &.active{
    background: #68b8c4;
  }
  
  &:focus{
    outline: 0 none;
  }

}

button + label{
  margin-left: 1em;
}

.container{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: lighten(#68b8c4, 15%);
  position: relative; 
  -webkit-backface-visibility: hidden;
  top: 190px;
  
  &:after{
    content: '';
    display: inline-block;
    width: 100%;
  }
  &.active{
    background-color: red;
  }
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 2%;
  display: none;
}

.container .mix.category-1{
  border-top: 2px solid limegreen;
}

.container .mix.category-2{
  border-top: 2px solid yellow;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}

@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}

.mix{
   @include transition(width .2s ease-in-out, height .2s ease-in-out);
  &.active{
     @include transition(width .5s ease-in-out, height .5s ease-in-out);
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
}

$top-bar-height: 120px;
$url-font-size: 2.6rem;
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  height: auto;
  z-index: 99999;
  

  .top-bar {
    @include transition(all .2s ease-in-out);
    width: 100%;
    height: $top-bar-height;
    background-color: black;

    .search{
      height: 100%;
      width: 100%;
      padding: 10px;
      display: block;
      overflow:hidden;
    }
    .controls{
      @include transition(all .3s ease-in-out);
    }

    input{
      @include transition(font-size .2s ease-in-out);
      height: 100%;
      width: 90%;
      border: none;
      font-size: $url-font-size;
      padding-left: 20px;
      float: left;
    }
    @include placeholder {
      @include transition(font-size .2s ease-in-out);
      font-size: $url-font-size;
    }

    button {
      width: 10%;
      font-size: 1.6rem;
      height: 100%;
      border-radius: 0px;
      border: none;
    }

  }
  
  &.shrink{
    $top-bar-height: 70px;
    $url-font-size: 1.5rem;
    .top-bar{
      height: $top-bar-height;
    }
     input{
        font-size: $url-font-size;
     }
     @include placeholder{
       font-size: $url-font-size
     }
    .controls{
      padding: 1% 2%;
    }
  }
  
}


/*Downloaded from https://www.codeseek.co/seanmateer/mobilizer-canvas-prototype-1-RNmwdQ */
    $(function(){
  $('#grid-container').mixItUp();
});


$(document).on("scroll", function(){
   if ($(this).scrollTop() > 10){
     $('.header').addClass('shrink');
   } else if ($(this).scrollTop() <= 10){
     $('.header').removeClass('shrink');
   }
});


$('.mix').on("click", function(){
    $(this).toggleClass('active');
});


Comments