SPA - None Bootstrap

SPA - None Bootstrap

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<header id="top">
      <div class="container">
        <nav>
          <ul>
            <li><a href="#speakers" class="scrollme">Link</a></li>
            <li><a href="#schedule" class="scrollme">Link</a></li>
            <li><a href="#venue" class="scrollme">Link</a></li>
            <li><a href="#planning" class="scrollme">Link</a></li>
          </ul>
        </nav>

        <div class="logo">
            <img src="http://placehold.it/600x95/d9361f/fff/&text=**** Engineering ****">
        </div><!-- .logo -->

        <h1 class="masthead-title">AP Design</h1>
        <h2 class="masthead-subtitle">Product Design</h2>
        <h2 class="masthead-subtitle">May 11<sup>th</sup> &amp; 14<sup>th</sup> &middot; Biel, Switzerland</h2>

        <div class="register-button">
          <a class="button" href="#">Link</a>
        </div>


      </div><!-- / header .container -->
    </header>

    <section class="description details">
      <div class="container">

        <div class="columns">
          <div class="column-single">
            <p>testing text words  testing text words  testing text words 3<sup>rd</sup> testing text words  <sup>th</sup> testing text words  .</p>
            <p>Follow <a href="https://twitter.com/apougher">@apougher</a> testing text words  </p>
          </div>
        </div>
      </div><!-- / .details .container -->
    </section>

    <section class="registration details">
      <div class="container">

        <h2>Registration</h2>

        <div class="columns">
          <div class="column-single">
            <p><strong>WORDS</strong> words words words words words words words words words </p>
          </div>
        </div>
      </div><!-- / .details .container -->
    </section>

     <section id="speakers" class="speaker details">
      <div class="container">

        <h2>Speakers</h2>

        <div class="columns">
          <div...

CSS

@import url("http://fonts.googleapis.com/css?family=Tenor+Sans");



/*Fixed-width, centered column for site content.*/
.container {
 width: 98%;
 margin-left: auto;
 margin-right: auto;
 *zoom: 1;
 clear: both;
}

.container:before {
  display: table;
  content: " ";
}

.container:after {
  display: table;
  clear: both;
}

/*Grid system
Create rows with `.columns` to clear the flaoted columns */

.columns {
  width: 100%;
  clear: both;
  overflow: hidden;
}

.columns:before {
  display: table;
  content: " ";
 }

.columns:after {
  display: table;
  clear: both;
}

/*Base class for every column (requires a column width from below)*/
.column {
  float: left;
  padding: 15px;
}

.column:before {
  display: table;
  content: " ";
 }

.column:after {
  display: table;
  clear: both;
}

/*Column widths*/
.one-third {
  width: 33%;
}

.two-thirds {
  width: 67%;
}

.one-fourth {
  width: 25%;
}

.one-half {
  width: 50%;
}

.three-fourths {
  width: 75%;
}

.one-fifth {
  width: 20%;
}

.four-fifths {
  width: 80%;
}

/*Single column hack*/
.column-single {
  position: relative;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  clear: both;
  overflow: hidden;
}

/*Equal width columns via table sorcery.*/
.table-column {
  display: table-cell;
  width: 1%;
  padding-right: 15px;
  padding-left: 15px;
  vertical-align: top;
}

/* #Media Queries
================================================== */
@media screen and (max-width: 700px) {
  .container {
    width: 95%;
  }

  .column {
    float: left;
    padding: 15px;
  }

  /*Column widths*/
  .one-third {
    width: 100%;
  }

  .two-thirds {
    width: 100%;
  }

  .one-fourth {
    width: 100%;
  }

  .one-half {
    width: 100%;
  }

  .three-fourths {
    width: 100%;
  }

  .one-fifth {
    width: 100%;
  }

  .four-fifths {
    width: 100%;
  }

  .column-single {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media screen and (min-width: 700px) {
 ...

JavaScript

$(function() {
//scroll FN
    $("a[href*=#]").bind('click', function(event) {
          if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
     $('html,body').animate({scrollTop:dest}, 1800,'swing', function(){
        event.preventDefault();
    });
     }); 

/*--------------------------
scroll back up
---------------------------*/
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop:hidden').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
});
    
     });