Responsive Design Testing

1/02/2015
Responsive Design Testing



Example markup

<header class='opened' id='header'>
  <h1 class='logo' data-title='AD'></h1>
  <div class='menu'>
    <span class='selected icon-dar'>New Template</span>
    <ul class='drop'>
      <li class='link checked' data-url='http://afusions.blogspot.com'>MC3 Mag Style</li>
      <li class='link' data-url='http://minima9.blogspot.com'>MC2</li>
      <li class='link' data-url='http://minima8.blogspot.com'>Minima</li>
      <li class='link' data-url='http://lycoris9.blogspot.com'>Lycoris</li>
      <li class='link' data-url='http://lunafy.blogspot.com'>Lycoris Dark</li>
      <li class='link' data-url='http://gvusion.blogspot.com'>G-Vusion</li>
    </ul>
  </div>
  <div class='devices'>
    <button class='device desk active'></button>
    <button class='device tablet'></button>
    <button class='device tablet-land'></button>
    <button class='device phone'></button>
    <button class='device phone-land'></button>
  </div>
  <div class='options'>
    <button class='close entypo-cancel'></button>
  </div>
</header>
<main class='opened' id='frame'>
  <iframe height='100%' src='http://afusions.blogspot.com' width='100%'></iframe>
</main>

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);

@import url(http://fonts.googleapis.com/css?family=Fjalla+One);

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

body {
    background: #444;
    font-family: sans-serif;
    font-size: 10pt;
    font-smoothing: antialiased;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #222;
    z-index: 1;
    transition: top .15s ease;
}

#header.closed {
    top: -50px;
}

#header .logo {
    cursor: pointer;
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    font-family: 'Fjalla One', sans-serif;
    font-size: 20pt;
    color: #FFF;
    font-weight: bold;
    line-height: 55px;
    text-align: center;
}

#header .logo:before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotate(-45deg);
}

#header .menu {
    position: relative;
    float: left;
    width: 150px;
    height: 30px;
    margin: 10px 0 0 10px;
    color: #FFF;
}

#header .menu .selected {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    line-height: 30px;
}

#header .menu .selected:before {
    float: right;
    line-height: 33px;
}

#header .menu .drop {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    max-height: 210px;
    background: #333;
    display: none;
    overflow: auto;
    font-weight: bold;
}

#header .menu .drop::-webkit-scrollbar {
    width: 3px;
    background: rgba(0, 0, 0, 0.15);
}

#header .menu .drop::-webkit-scrollbar-thumb {
    background: #318DBD;
}

#header .menu .drop .link {
    cursor: pointer;
    height: 30px;
    padding: 0 10px;
    transition: background .15s ease;
    line-height: 30px;
}

#header .menu .drop .link:hover, #header .menu .drop .link.checked {
    background: #53AFDF;
}

#header .devices {
    float: left;
    height: 30px;
    margin: 10px 0 0 10px;
}

#header .devices .device {
    cursor: pointer;
    float: left;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 5px 0 0;
    border-radius: 3px;
    outline: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.05) url(http://goo.gl/C3q1YA);
    transition: background-color .15s ease, background-position .15s ease;
}

#header .devices .device.desk {
    background-position: 0 -30px;
}

#header .devices .device.desk:hover, #header .devices .device.desk.active {
    background-position: 0 0;
}

#header .devices .device.tablet {
    background-position: -30px -30px;
}

#header .devices .device.tablet:hover, #header .devices .device.tablet.active {
    background-position: -30px 0;
}

#header .devices .device.tablet-land {
    background-position: -60px -30px;
}

#header .devices .device.tablet-land:hover, #header .devices .device.tablet-land.active {
    background-position: -60px 0;
}

#header .devices .device.phone {
    background-position: -90px -30px;
}

#header .devices .device.phone:hover, #header .devices .device.phone.active {
    background-position: -90px 0;
}

#header .devices .device.phone-land {
    background-position: -120px -30px;
}

#header .devices .device.phone-land:hover, #header .devices .device.phone-land.active {
    background-position: -120px 0;
}

#header .devices .device:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#header .devices .device.active {
    background-color: #53AFDF;
}

#header .options {
    float: right;
    height: 30px;
}

#header .options button {
    cursor: pointer;
    position: relative;
    height: 30px;
    border-radius: 3px;
    outline: 0;
    border: 0;
    font-family: sans-serif;
    font-size: 10pt;
    color: #FFF;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    font-smoothing: antialiased;
    transition: all .5s;
}

#header .options button.close {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    padding: 0;
    background: #FA3;
}

#header .options button.close:hover {
    background: #E92;
}

#frame {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: top .15s ease;
}

#frame.closed {
    top: 0;
}

#frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    border: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 25px rgba(0, 0, 0, 0.3);
    transition: width .15s ease;
}

$('.menu .selected').on('click',function(){
  $(this).next('.drop').toggle();
});
$('.menu .drop .link').on('click',function(){
  var $active = $('.menu .checked'),
      input = $(this).text(),
      url = $(this).data('url'),
      $selected = $('.menu .selected');
  $active.removeClass('checked');
  $(this).addClass('checked');
  $selected.text(input);
  $('#frame iframe').attr('src',url);
});
$('.close').on('click',function(){
  if ( $('#header').hasClass('opened') ) {
    $('#header,#frame').removeClass('opened').addClass('closed')
    .find('.menu .drop').hide();
  } else if ( $('#header').hasClass('closed') ) {
    $('#header,#frame').removeClass('closed').addClass('opened');
  }
  if ( $(this).hasClass('entypo-down-open') ) {
    $(this).removeClass('entypo-cancel').addClass('entypo-cancel');
  } else if ( $(this).hasClass('entypo-down-open') ) {
    $(this).removeClass('entypo-cancel').addClass('entypo-down-open');
  }
});
$('.devices .device').on('click',function(){
  var $active = $('.devices .active'),
      $frame = $('#frame iframe');
  if ( $(this).hasClass('desk') ) {
    $active.removeClass('active');
    $(this).addClass('active');
    $frame.css({ width: '100%' });
  } else if ( $(this).hasClass('tablet') ) {
    $active.removeClass('active');
    $(this).addClass('active');
    $frame.css({ width: '788px' });
  } else if ( $(this).hasClass('tablet-land') ) {
    $active.removeClass('active');
    $(this).addClass('active');
    $frame.css({ width: '1040px' });
  } else if ( $(this).hasClass('phone') ) {
    $active.removeClass('active');
    $(this).addClass('active');
    $frame.css({ width: '340px' });
  } else if ( $(this).hasClass('phone-land') ) {
    $active.removeClass('active');
    $(this).addClass('active');
    $frame.css({ width: '500px' });
  }
});

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

15 comments

ini buat apa kak ??
buat blog yg mau share template ya ?

Balas

iya mas, buat demo blog

Balas
This comment has been removed by the author.

wah, cocok buat yang suka share template itu :D

Balas

thanks, silahkan dikreasikan kembali

Balas

But I need An Image For Previewing Blogger Templates Likes in Themeforest They Appear

Balas

This is just for previewing responsive template with minimal device

Balas

Makasih Membantu sekali!!!!

Balas

Cara menambahkan kodenya gimana, mbak?

Balas

Di halaman statis bisa

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.