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.
<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> |
// 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. |
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.
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); | |
} |