A Pen by Kaushalya Mandaliya.

Animated-Responsive-Article-Grid.markdown

Animated Responsive Article Grid

I was just playing with javascript and css, And made this :D

A Pen by Kaushalya Mandaliya on CodePen.

License.

index.html

<!--
     Animated Responsive Article Grid 
     2014 by Kaushalya Mandaliya
     http://seebeetee.com || https://twitter.com/kmandalwala
-->

script.js

for ( i = 1; i <= 20; i++) {
  document.write("<span>" + "Article " + i + "</span>"); // or span{Article $}*20 in HTML box...:D
}

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Ubuntu);

body {
  font: normal 2em 'Ubuntu', sans-serif;
  text-align: center;
   
  span {
    background: #3498db;
    color: #ecf0f1;
    float: left;
    padding: 1em 0;
    position: relative;
    width: 25%;
    
    @include backface-visibility(hidden);
    
    @include transition(0.25s all);
    
    @media all and (max-width: 62.7em) {
      &:before {
        top: 0;
      }
    }
    
    @media all and (max-width: 36em) {
      font-size: 0.8em;
    }
    
    @media all and (max-width: 32em) {
      font-size: 1em;
      width: 50%;
    }
    
    &:hover {
      background: rgba(#3498db, 0.7);
      cursor: pointer;
      
      &:before {
        content: 'Go to →';
        font-size: 0.5em;
        left: 0.3em;
        position: absolute;
        margin-top: 0.5em;
      }
    }
    
    &:active {
      background: #3498d2;
      @include transform(scale(0.8));
      z-index: 2000;
    }
  }
}

hr {
  border-color: #000;
}