Skeleton: Responsive CSS Boilerplate

A dead simple, responsive boilerplate.

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="http://fonts.googleapis.com/css?family=Raleway:400,300,600"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettydiff/2.2.8/prettydiff.min.js"></script>
  <div class="container">
    <section class="header">
      <h2 class="title">A dead simple, responsive boilerplate.</h2>
      <a class="button button-primary" href="https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip" onClick="_gaq.push(['_trackEvent', 'skeleton', 'download'])">Download</a>
      <div class="value-props row">
        <div class="four columns value-prop">
          Light as a feather at ~400 lines &amp; built with mobile in mind.
        </div>
        <div class="four columns value-prop">
          Styles designed to be a starting point, not a UI framework.
        </div>
        <div class="four columns value-prop">
          Quick to start with zero compiling or installing necessary.
        </div>
      </div>
    </section>

    <div class="navbar-spacer"></div>
    <nav class="navbar">
      <div class="container">
        <ul class="navbar-list">
          <li class="navbar-item"><a class="navbar-link" href="#intro">Intro</a></li>
          <li class="navbar-item">
            <a class="navbar-link" href="#" data-popover="#codeNavPopover">Code</a>
            <div id="codeNavPopover" class="popover">
              <ul class="popover-list">
                <li class="popover-item">
                  <a class="popover-link" href="#grid">Grid</a>
                </li>
                <li class="popover-item">
                  <a class="popover-link"...

CSS

/* \/ Custom \/ */
.prettyprint {
  background: #F9F9F9 !important;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  overflow: auto;
}

/* /\ Custom /\ */

.container {
  max-width: 800px;
}

.header {
  margin-top: 6rem;
  text-align: center;
}

.value-prop {
  margin-top: 1rem;
}

.value-props {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.docs-header {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  font-weight: 600;
}

.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin-bottom: 0;
}

.value-img {
  display: block;
  text-align: center;
  margin: 2.5rem auto 0;
}

.example-grid .column,
.example-grid .columns {
  background: #EEE;
  text-align: center;
  border-radius: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .1rem;
}

.docs-example .row,
.docs-example.row,
.docs-example form {
  margin-bottom: 0;
}

.docs-example h1,
.docs-example h2,
.docs-example h3,
.docs-example h4,
.docs-example h5,
.docs-example h6 {
  margin-bottom: 1rem;
}

.heading-font-size {
  font-size: 1.2rem;
  color: #999;
  letter-spacing: normal;
}

.code-example {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.code-example-body {
  white-space: pre;
  word-wrap: break-word
}

.example {
  position: relative;
  margin-top: 4rem;
}

.example-header {
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

.example-description {
  margin-bottom: 1.5rem;
}

.example-screenshot-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
  height: 250px;
}

.example-screenshot {
  width: 100%;
  height: auto;
}

.example-screenshot.coming-soon {
  width: auto;
  position: absolute;
  background: #eee;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

.navbar {
  display: none;
}

/* Larger than phone */
@media (min-width: 550px) {
  .header {
   ...

JavaScript

$(document).ready(function() {

  // Variables
  var $codeSnippets = $('.code-example-body'),
    $nav = $('.navbar'),
    $body = $('body'),
    $window = $(window),
    $popoverLink = $('[data-popover]'),
    navOffsetTop = $nav.offset().top,
    $document = $(document),
    entityMap = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': '&quot;',
      "'": '&#39;',
      "/": '&#x2F;'
    }

  function init() {
    $window.on('scroll', onScroll)
    $window.on('resize', resize)
    $popoverLink.on('click', openPopover)
    $document.on('click', closePopover)
    $('a[href^="#"]').on('click', smoothScroll)
    buildSnippets();
  }

  function smoothScroll(e) {
    e.preventDefault();
    $(document).off("scroll");
    var target = this.hash,
      menu = target;
    $target = $(target);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top - 40
    }, 0, 'swing', function() {
      window.location.hash = target;
      $(document).on("scroll", onScroll);
    });
  }

  function openPopover(e) {
    e.preventDefault()
    closePopover();
    var popover = $($(this).data('popover'));
    popover.toggleClass('open')
    e.stopImmediatePropagation();
  }

  function closePopover(e) {
    if ($('.popover.open').length > 0) {
      $('.popover').removeClass('open')
    }
  }

  $("#button").click(function() {
    $('html, body').animate({
      scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
  });

  function resize() {
    $body.removeClass('has-docked-nav')
    navOffsetTop = $nav.offset().top
    onScroll()
  }

  function onScroll() {
    if (navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
      $body.addClass('has-docked-nav')
    }
    if (navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
      $body.removeClass('has-docked-nav')
    }
  }

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function(s) {
      return...