A Pen by Moncho Varela.

7/7/2014 - 9:30 PM

/*   typographic starter kit
------------------*/
*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body {
  position: relative;
  height: 100%;
}

html {
  font-size:14px;
  font-family:sans-serif,cursive;
  font-weight:normal;
  line-height:1.2em;
}

body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  color: #444444;
}

abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

/*	LINK
------------------------*/
a{
  color:#3498DB;
}
a:hover,a:active,a:focus{
  color:#2980B9;
}

/*	HEADERS
------------------------*/
h1,h2,h3,
h4,h5,h6 {
  line-height: 1;
  margin-top: 0;
  text-rendering: optimizeLegibility;
  color: #7F8C8D;
}

h1 {

  font-size: 3rem;
  margin-bottom: 8.9px;
  margin-bottom: 0.4rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 11px;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1.8rem;
  margin-bottom: 14px;
  margin-bottom: 0.8rem;
}

h4 {
  font-size: 1.3rem;
  margin-bottom: 22px;
  margin-bottom: 1.2rem;
}

h5 {
  font-size: 1.1rem;
  margin-bottom: 25.45714px;
  margin-bottom: 1.41429rem;
}

h6 {
  font-size: 1rem;
  margin-bottom: 29px;
  margin-bottom: 1.6rem;
}




/*	PARAGRAPHS
------------------------*/
p {
  margin: auto auto 1.5em;
}

p + p {
  text-indent: 1.5em;
  margin-top: -1.5em;
}




/*	SMALL
-----------------*/
small {
  font-size: 65%;
}




/*	PRE CODE
------------------------*/
pre code {
  word-wrap: normal;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
}

pre {
  white-space: pre;
}

code {
  white-space: pre;
  font-family: monospace;
}




/*	ABBR
------------------------*/
abbr {
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  color: #808080;
}

abbr[title]:hover {
  cursor: help;
}




/*	DEFINITION LIST
------------------------*/
dt,dd {
  display: inline;
  margin: 0;
}

dt + dt:before,dd + dt:before {
  content: "\A";
  white-space: pre;
}

dd + dd:before {
  content: ", ";
}

dd:before {
  content: ": ";
  margin-left: -0.2em;
}




/*	BLOCKQUOTES
------------------------*/
blockquote p:last-of-type {
  margin-bottom: -0.825em;
}

blockquote + figcaption {
  display: block;
  font-size: inherit;
  text-align: right;
}

blockquote + figcaption:before {
  content: "-";
}



/*	DROPCAPS
------------------------*/
.drop:first-letter {
  float: left;
  margin: auto .25em auto auto;
  padding: inherit;
  font-size: 4em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit;
}

p + .drop {
  text-indent: 0;
  margin-top: 0;
}




/*	PRELOADER
--------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
}

.preloader_inner {
  display: block;
  width: 80%;
  height: 100px;
  margin: 40px auto;
  padding: 5px;
  text-align: center;
}

.preloader_inner h5 {
  color: #7F8C8D;
}

.preloader_inner h6 {
  color: #95A5A6;
  -webkit-animation: preloader 1s infinite ease;
  -ms-animation: preloader 1s infinite ease;
  animation: preloader 1s infinite ease;
}


/*	BASIC ANIMATION
--------------------------*/
@-webkit-keyframes preloader {50%{color: white;}}
@keyframes preloader {50%{color: white;}}



/*	PAGE OR PEN OR SOMETHING
-------------------------------*/
body{
  background:#ECF0F1;
  color:#95A5A6;
}
.wrapper{
  display:block;
  margin:0;
  padding:0;
}
.wrapper_inner{
  margin-left:20px;
  margin-right:20px;
}





/*	SIMPLY MEDIA QUERIES
--------------------------*/
@media only screen and (min-width: 320px) {}
@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 1200px) {}






/* MEDIA QUERIES INFO
------------------------*/
body:after {
  content: "less than 320px";
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 5px 10px;
  font-size: 100%;
  font-family: "consolas",monospace;
  text-align: center;
  background-color: #34495E;
  color: #ECF0F1;
}

@media only screen and (min-width: 320px) {
  body:after {
    content: "min-width 320 to 480px";
    background-color: #efefef;
    color: #f55;
  }
}

@media only screen and (min-width: 480px) {
  body:after {
    content: "min-width 480 to 768px";
    background-color: #efefef;
    color: #f55;
  }
}

@media only screen and (min-width: 768px) {
  body:after {
    content: "min-width 768 to 1024px";
    background-color: #efefef;
    color: #f55;
  }
}

@media only screen and (min-width: 1024px) {
  body:after {
    content: "min-width 1024 and up";
    background-color: #efefef;
    color: #f55;
  }
}

@media only screen and (min-width: 1200px) {
  body:after {
    content: "min-width 1200";
    background-color: #efefef;
    color: #f55;
  }
}

script.js

(function(window) {

  'use strict';

  // Global var transform
  var cssTransform = cssArray([
    'transform',
    'MozTransform',
    'WebkitTransform',
    'msTransform',
    'OTransform'
  ]);


  // Global var transition
  var cssTransition = cssArray([
    'transition',
    'MozTransition',
    'WebkitTransition',
    'msTransition',
    'OTransition'
  ]);

  // get arrays
  function cssArray(arr) {
    var r = document.documentElement;
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] in r.style) {
        return arr[i];
      }
    }
  }

  // hasCls(foo,myClass)
  function hasCls(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  }

  // addCls(foo,myClass)
  function addCls(obj, cls) {
    if (!hasCls(obj, cls)) {
      obj.className += " " + cls;
    }
  }

  // removeCls(foo,myClass)
  function removeCls(obj, cls) {
    if (hasCls(obj, cls)) {
      var exp = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(exp, "");
    }
  }

  // toogleCls(foo,myClass)
  function toogleCls(obj, cls) {
    if (!hasCls(obj, cls)) {
      addCls(obj, cls);
    } else {
      removeCls(obj, cls);
    }
  }

  // wait(function(){},1000)
  function wait(callback, time) {
    if (typeof setTimeout !== 'undefined') {
      var t = setTimeout(function() {
        clearTimeout(t);
        return callback();
      }, time);
    }
  }

  // anim(foo,'opacity',0,0,1,1000)
  function anim(selector, style, unit, from, to, time) {
    if (!selector) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
          var step = Math.min(1, (new Date().getTime() - start) / time);
          selector.style[style] = (from + step * (to - from)) + unit;
          if (step == 1) clearInterval(timer);
        }, 25);
    selector.style[style] = from + unit;
  }



  // extend options
  function extend(a, b) {
    for (var key in b) {
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }

  // new app(id,{ _defaults });
  function app(elem, options) {
    /*jshint validthis:true */
    this.elem = elem;
    this.options = extend(
      this._defaults,
      options
    );
    this._init();
  }

  // prototype function
  app.prototype = {

    // the default options
    _defaults: {
      // key : 'value'
      preloader_delay:800

    },

    // init plugin
    _init: function() {
      // call this in inner functions
      var self = this;

      // selectors  ( this.wrapper_inner[0] for first element,for more use foreach )
      this.wrapper_inner = Array.prototype.slice.call(
        self.elem.querySelectorAll('.wrapper_inner')
      );

      // preloader
      this.preloader = this.elem.querySelector('.preloader');

      // hide preloader
      this._preloader();

    },


    // preloader section
    _preloader:function(){
      var self = this,preloader = this.preloader;
      // animate opacity
      anim(
        preloader, // id or class
        'opacity', // style
        0, // units 
        1, // start
        0, // end
        self.options.preloader_delay // time
      );
      // now remove
      wait(function(){
        preloader.remove();
      },self.options.preloader_delay);
    }
		
    // MORE HERE.....
  };


  // add to global namespace
  window.app = app;


})(window);

// run app
var run = document.querySelector('#page');
new app(run);

index.html

<div id="page"><!-- page -->
  <div class="preloader"> <!-- preloader -->
    <div class="preloader_inner">
      <h5>Rendering layout</h5>
      <h6>Please wait a moment....</h6>
    </div>
  </div>
  
  <div class="wrapper"><!-- content -->
    <div class="wrapper_inner">

      <!-- START HERE -->

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

Template-Starter.markdown

Rendered
Source

Template Starter

A Pen by Moncho Varela on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by Moncho Varela.

Template Starter