A Pen by Matt Porter.

index.html

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

<div class="outter">
  <div class="inner">
    <div class="title">
      <div class="red">Static</div>
      <div class="orange">Edge</div>
      <div class="yellow">JS</div>
    </div>
    <div class="body">
      <h2>About</h2>
      <p>
        <span class="bigger">StaticEdgeJS</span> is a simple JavaScript library
        which allows a developer to make a page static
        while also allowing data to be sent across pages.
      </p>
      <p>
        For example, if you have a demo page which eventually will be
        having a running backend and you need to show your clients what
        that will look like, this library is perfect for you. 
      </p>
      <p>
        Or if you have a smiple page that needs small dynamic uses 
        without a backend here and there.
      </p>
      
      <h2>Example Code</h2>
      <p>
        Here's an example of what StaticEdgeJS looks like.
      </p>
        <div class="code">
          <span class="purple">var</span> url <span class="aqua">=</span> <span class="green">'http://someurl.com?paramFirst=super%20easy'</span>;<br>
          <span class="purple">var</span> page <span class="aqua">= new</span> StaticEdge(url);<br>
          <span class="purple">var</span> param <span class="aqua">=</span> page.findParams(<span class="green">'paramFirst'</span>);<br>
          console<span class="blue">.log</span>(param); <span class="grey">// super easy should be output</span><br>
        </div>
      
      <h2>Source Code</h2>
      <p>- <a href="https://bitbucket.org/pattmorter/staticedgejs/overview">BitBucket Repo</a></p>
      
      <h2>Working Examples</h2>
      <p>- <a href="http://s.codepen.io/pattmorter/fullpage/LhDIg?penView=yes&from=Me%20to%20You">CodePen Christmas Card</a></p>
    </div>  
    <div class="footer">
      The MIT License (MIT) -- Copyright (c) 2013 Matthew Porter
    </div>
  </div>
</div>

script.js

// The MIT License (MIT)

// Copyright (c) 2013 Matthew Porter

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

StaticEdgeJS.markdown

StaticEdgeJS

Here is a simple little library i cooked up that I find to be extremely useful when testing.

A Pen by Matt Porter on CodePen.

License.

style.css

body {
  background: #2d2d2d;
  overflow-x: hidden;
}

.outter {
  position: relative;
  display:inline-block;
  left: 50%;
}

.inner {
  position: relative;
  left: -50%;
}

.title {
  font-family: 'Oswald';
  font-size: 52px;
  color: #CC333F;
  /*text-shadow: 0 2px 0 rgba(1,1,1,1),
    0 2px 5px rgba(1,1,1,0.35);*/
  display: block;
  padding: 5px 10px;
  margin: 10px;
  text-align: center;
}

.red { 
  color: #CC333F; 
  display: inline-block; 
  margin: 0 -10px 0 0;
  text-shadow: 0 1px 0 #8f242c,
    0 2px 0 #8f242c,
    0 3px 0 #8f242c,
    0 4px 0 #8f242c,
    0 4px 5px rgba(1,1,1,0.55),
    0 4px 15px rgba(1,1,1,0.35);
}
.orange { 
  color: #EB6841; 
  display: inline-block;
  margin: 0 -8px 0 0;
  text-shadow: 0 1px 0 #ca3f15,
    0 2px 0 #ca3f15,
    0 3px 0 #ca3f15,
    0 4px 0 #ca3f15,
    0 4px 5px rgba(1,1,1,0.55),
    0 4px 15px rgba(1,1,1,0.35);
}
.yellow { 
  color: #EDC951; 
  display: inline-block; 
  margin: 0 -8px 0 0;
  text-shadow: 0 1px 0 #c49c14,
    0 2px 0 #c49c14,
    0 3px 0 #c49c14,
    0 4px 0 #c49c14,
    0 4px 5px rgba(1,1,1,0.55),
    0 4px 15px rgba(1,1,1,0.35);
}

.body {
  font-family: 'Open Sans';
  font-size: 16px;
  color: #FFFFFF;
  display: block;
  padding: 5px 25px 50px;
  margin: 10px;
  width: 500px;
  background: rgba(1,1,1,0.05);
  box-shadow: 0 0 15px rgba(1,1,1,0.10);
  border: 1px solid rgba(1,1,1,0.25);
  border-radius: 10px;
  text-shadow: 0 2px 0 rgba(1,1,1,1),
    0 2px 5px rgba(1,1,1,0.55);
}

h2 {
  font-size: 32px;
  color: #FFFFFF;
  text-shadow: 0 2px 0 rgba(1,1,1,1),
    0 2px 5px rgba(1,1,1,0.55);
  text-align: center;
}

.code {
  font-size: 12px;
  font-family: 'Source Code Pro';
  margin: 5px 35px;
}

.code .purple {
  color: #cc99cc;
}
.code .blue {
  color: #6699cc; 
}
.code .red {
  color: #f2777a; 
}
.code .green {
  color: #99cc99; 
}
.code .grey {
  color: #666666; 
}
.code .aqua {
  color: #66cccc;
}

a {
  color: #99cc99;
}
a:hover {
  color: #cc99cc;
}
.footer {
  text-align: center;
  font-family: 'Open Sans';
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(1,1,1,1),
    0 2px 5px rgba(1,1,1,0.55);
}