Iphone 5 CSS example

A task for brow.si CSS Workshop

by dimshik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.css">
<div class="left-half">

  <div class="controllers">
    <button class="toggle-helper-guides-btn">Toggle Rullers</button>
    <button class="toggle-wrapper-tags-btn">Toggle Helpers</button>
  </div>

  <div class="style-box"></div>
  <div class="my-code-mirror">
    <textarea cols="50" rows="4" class="css-box">/*  Please write your CSS here :)  */





















    </textarea>
  </div>
</div>



<div class="right-half">
  <h1 class="title">Iphone 5 - CSS Example</h1>

  <div class="iphone5 wrapper-tags" id="phone">
    <div id="scroller">
      <helper-guide-left class="helper-guide"></helper-guide-left>
      <helper-guide-right class="helper-guide"></helper-guide-right>
      <section class="articles">
        <article>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem corporis saepe quo eaque reprehenderit porro mollitia alias facilis fugit. Aperiam velit, optio qui possimus ab repudiandae fuga in illum accusantium!</p>

          <div class="browsi-ad">ADVERTISEMENT</div>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, in molestiae? Nisi voluptate ducimus, veritatis distinctio voluptatum iure doloremque aliquid fuga, reprehenderit labore! Nihil, doloribus minus sunt dolorem quibusdam error?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquam molestiae, doloremque iusto earum, minima commodi harum suscipit ea. Earum quis necessitatibus et magnam impedit veniam distinctio numquam. Esse, odit.</p>
        </article>

        <div class="browsi-ad">ADVERTISEMENT</div>
      </section>
      <section class="thin-section">

        <article class="thin-article">
          <p>Lorem...

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Arial;
}

.left-half,
.right-half {
  width: 50%;
  float: left;
  height: 100%;
}

h1.title {
  text-align: center;
}

#phone {
  width: 320px;
  height: 568px;
  outline: 1px solid black;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.controllers {
  margin: 20px auto;
}

.my-code-mirror {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  background-color: white;
  overflow: auto;
}

.CodeMirror {
  height: auto;
}


/*-------------  End controllers ----------------*/

section.articles {
  margin: 0 20px;
}

.thin-section {
  width: 75%;
  margin: 0 auto;
}

section article {
  min-height: 250px;
  margin: 18px 0;
}


/*----------- </helper-guide>  -----------*/

helper-guide-left,
helper-guide-right {
  width: 0;
  position: absolute;
  border: 1px dashed red;
  z-index: -1;
}

helper-guide-left {
  top: 0;
  height: 680px;
  left: 35px;
}

helper-guide-right {
  top: 0;
  height: 680px;
  right: 35px;
}

helper-guide-left.thin {
  left: 55px;
  height: 760px;
  bottom: 0;
  top: initial;
}

helper-guide-right.thin {
  right: 55px;
  height: 760px;
  bottom: 0;
  top: initial;
}


/*----------- </helper-guide>  -----------*/


/*----------- <section>  -----------*/

section {
  position: relative;
  border: solid transparent 3px;
}

.wrapper-tags section {
  border-color: #96C02E;
}

.wrapper-tags section::before {
  position: absolute;
  background: #96C02E;
  left: 0;
  top: 0;
  content: "<section>";
}

.wrapper-tags section::after {
  position: absolute;
  background: #96C02E;
  right: 0;
  bottom: 0;
  content: "</section>";
}


/*----------- </section>  -----------*/


/*----------- <article>  -----------*/

article {
  position: relative;
  border: solid transparent 3px;
}

.wrapper-tags article {
  border-color: #D64078;
}

.wrapper-tags article::before {
  position: absolute;
  background: #D64078;
  left: 0;
  top:...

JavaScript

var myScroll;

$(document).ready(function() {
  myScroll = new IScroll('#phone', {
    mouseWheel: true,
    scrollbars: true
  });


  $('.toggle-helper-guides-btn').click(function() {
    $('.helper-guide').toggle("slow", function() {
      // Animation complete.
    });
  });

  $('.toggle-wrapper-tags-btn').click(function() {
    $("#phone").toggleClass("wrapper-tags");
  });


  /*
  $('.css-box').on('keyup blur', function() {
  	$('.style-box').html('<style>' + $(this).html() + '</style>');
  });
  */

  var myCodeMirror = CodeMirror(function(elt) {
    $('.css-box').replaceWith(elt);
  }, {
    value: $('.css-box').val(),
    mode: "htmlmixed",
    lineNumbers: true,
  });

  // update css and test ads
  myCodeMirror.on("change", function(myCodeMirror, change) {
    $('.style-box').html('<style>' + myCodeMirror.getValue() + '</style>');
    testAds();
  });

});
// prevent touch events from fighting with iScroll
document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

var minAdWidth = 300;

function testAds() {
  var ads = $('.browsi-ad');

  for (var i = 0; i < ads.length; i++) {
    if (ads[i].offsetWidth < minAdWidth) {
      $(ads[i]).addClass('pink-bg');
    } else {
      $(ads[i]).addClass('green-bg');
    }
  }
}

  testAds();