Common responsive CSS @media dimensions

common @media dimension for responsive website layout

@media only screen and (min-width: 100px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 320px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 480px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 768px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 960px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 1024px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}

Attaching Animation to CSS

I’m not sure if you kids can imagine the output of this css.
But you can drop me a question in the comments below.

to make it simple. its
1. set the attribute.
2. set the transition.
3. set the final attributes.

then you can make jquery or angularjs to the magic for this.

.fadeinfromtop{
    opacity: 0;

    -moz-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;

    -ms-transform: translate(0px, -100px); / IE 9 /
    -webkit-transform: translate(0px, -100px); / Safari /
    transform: translate(0px, -100px);
}
.fadeinfromtop.in-view{
    opacity: 1;

    -ms-transform: translate(0px, 0px); / IE 9 /
    -webkit-transform: translate(0px, 0px); / Safari /
    transform: translate(0px, 0px);
}

Ciao Kids!

Foundation 6 vs Bootstrap 4

Zurb’s Foundation 6 fits best for Publisher Websites and Microsites while Twitter’s Bootstrap is best for Web Applications.

Now that I’m gearing towards Asp.Net Core, If you’re going to ask what will be my choice,its a no brainer Kids, it will be Bootstrap ofcouse.

But don’t get me wrong, Foundation 6 is also a nice alternative especially for FrontEnd side, I’m talking about Customer Side Front End and not an Admin Panel Front End.

anyways. Ciao!

jQuery Window Scrolling and Css Transform Animation

Here we go, our first tutorial of the year since I my rock n’roll days.

Glad to be back on track.
alright Kids, our first tutorial is using Jquery and Css to animate the size of a DIV on window scrolling.

Step 1: Your Javascript / JQuery snippet

    var $animation_elements = [$('.front-header-div-holder')];
    var $window = $(window);

    $window.on('scroll', check_if_in_view);
    $window.on('scroll resize', check_if_in_view);

    $window.trigger('scroll');

    function scaler(element,i){            
          i = (i/100)+1;          
          $(element).css("-ms-transform", "scale(" + i +")");
          $(element).css("-webkit-transform", "scale(" + i +")");
          $(element).css("transform", "scale(" + i +")");      
    }

    function fader(element,i){  
          i = ((i/100) * -1) +1;                    
          $(element).css("opacity",i);          
    }
    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
           
            if($(this).attr("class")!=undefined){
                 
                  var $element = $(this);
               
                  var element_height = $element.outerHeight();
                  var element_top_position = $element.offset().top;
                  var element_bottom_position = (element_top_position + element_height);

                  //check to see if this current container is within viewport

                  var h = 0;
                  var ename = $(this).attr('class');
                  if(ename == "front-header-div-holder"){
                        h = element_height;
                  }else{                    
                        h = element_height;  
                  }

                  if ((element_bottom_position >= (window_top_position + (h))) && (element_top_position <= (window_bottom_position-(h/2)))) {                        
                        var ename = $(this).attr('class');                        
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }
                  } else {                      
                        var ename = $(this).attr('class');                  
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }                                              
                  }

            }

           
      });
    }

Step 2: Your HTML

<div class="front-header-div-holder">
     <div class="front-header-div">
          <div class="front-header">
              <!-- your load of BS here -->
          </div>
      </div>
</div>

Step 3: Your CSS
Code as you please.

Drop me a question if you have one. Ciao!