starting to implement a docking nav?
This commit is contained in:
Dave Gamache
parent
4f8392275a
commit
a4ab5f6f4e
61
index.html
61
index.html
@ -48,25 +48,63 @@
|
||||
<div class="four columns offset-by-two value-prop">
|
||||
<img class="value-img" src="images/feather.svg">
|
||||
Light as a feather at less than a kb & built with mobile in mind.
|
||||
<!-- Attr: http://thenounproject.com/term/feather/22073/ -->
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="images/pens.svg">
|
||||
<!-- Attr: bottom pen - http://thenounproject.com/term/pen/32847/ -->
|
||||
<!-- Attr: top pen - http://thenounproject.com/term/pen/21163/ -->
|
||||
Styles designed to be a starting point, not a UI framework.
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="images/watch.svg">
|
||||
<!-- Attr: http://thenounproject.com/term/watch/48012/ -->
|
||||
Quick to start with zero compiling or installing necessary.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="social-bar">
|
||||
|
||||
</div>
|
||||
<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</a></li>
|
||||
<li class="navbar-item">
|
||||
<a class="navbar-link" href="#" data-popover-id="codeNavPopover">Code</a>
|
||||
<div id="codeNavPopover" class="popover">
|
||||
<ul class="popover-list">
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Grid</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Typography</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Buttons</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Forms</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Lists</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Code</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Tables</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Queries</a>
|
||||
</li>
|
||||
<li class="popover-item">
|
||||
<a class="popover-link" href="#">Utilities</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="navbar-item"><a class="navbar-link" href="#">Examples</a></li>
|
||||
<li class="navbar-item"><a class="navbar-link" href="#">License</a></li>
|
||||
<li class="navbar-item"><a class="navbar-link" href="#">Colophon</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Why use Skeleton -->
|
||||
<div class="docs-section">
|
||||
@ -592,15 +630,6 @@
|
||||
<p>Skeleton was built using <a href="http://www.sublimetext.com/3">Sublime Text 3</a> and designed with <a href="http://bohemiancoding.com/sketch/">Sketch</a>. The typeface <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> was created by <a href="http://matt.cc/">Matt McInerney</a> and <a href="http://www.impallari.com/">Pablo Impallari</a>. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from <a href="thenounproject.com">The Noun Project</a>.<a href="http://thenounproject.com/term/feather/22073/"> Feather</a> by Zach VanDeHey, <a href="http://thenounproject.com/term/pen/21163/">Pen</a> (with cap) by Ed Harrison, <a href="http://thenounproject.com/term/pen/32847/">Pen</a> (with clicker) by Matthew Hall, and <a href="http://thenounproject.com/term/watch/48015/">Watch</a> by Julien Deveaux.</p>
|
||||
</div>
|
||||
|
||||
<div class="code-toggler">
|
||||
<span class="code-toggle"></span>
|
||||
<span class="code-label">
|
||||
Code
|
||||
<span class="code-label-show">hidden</span>
|
||||
<span class="code-label-hide">visible</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End Document
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// Variables
|
||||
var codeIsActive = true,
|
||||
$codeSnippets = $('.code-example-body'),
|
||||
$sections = $('.docs-section'),
|
||||
var $codeSnippets = $('.code-example-body'),
|
||||
$nav = $('.navbar'),
|
||||
$body = $('body'),
|
||||
$window = $(window),
|
||||
navOffsetTop = $nav.offset().top,
|
||||
entityMap = {
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
@ -15,10 +16,24 @@ $(document).ready(function() {
|
||||
}
|
||||
|
||||
function init() {
|
||||
$('.code-toggler').on('click', toggleCode)
|
||||
$window.on('scroll', onScroll)
|
||||
$window.on('resize', resize)
|
||||
buildSnippets();
|
||||
}
|
||||
|
||||
function resize() {
|
||||
navOffsetTop = $nav.offset().top
|
||||
}
|
||||
|
||||
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 entityMap[s];
|
||||
@ -32,26 +47,6 @@ $(document).ready(function() {
|
||||
})
|
||||
}
|
||||
|
||||
function toggleCode() {
|
||||
var windowScrollTop = $window.scrollTop()
|
||||
var offsetHeight = windowScrollTop
|
||||
$sections.each(function (i) {
|
||||
if($(this).children('.code-example').length > 0) {
|
||||
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
|
||||
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
|
||||
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
|
||||
if(codeIsActive == false) {
|
||||
offsetHeight += codeExampleHeight
|
||||
} else {
|
||||
offsetHeight -= codeExampleHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
$('body').toggleClass('code-snippets-visible')
|
||||
codeIsActive = !codeIsActive
|
||||
$window.scrollTop(offsetHeight)
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
||||
@ -52,54 +52,11 @@
|
||||
.code-example {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
display: none;
|
||||
}
|
||||
.code-example-body {
|
||||
white-space: pre;
|
||||
/*overflow: auto;*/
|
||||
word-wrap: break-word
|
||||
}
|
||||
.code-snippets-visible .code-example {
|
||||
display: block;
|
||||
}
|
||||
.code-toggler {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 34px;
|
||||
height: 20px;
|
||||
background: #E5E5E5;
|
||||
border: 1px solid #C6C6C6;
|
||||
border-radius: 100px;
|
||||
cursor: pointer; }
|
||||
.code-toggle {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #C6C6C6;
|
||||
border-radius: 100px;
|
||||
-webkit-transition: all .15s ease-out; }
|
||||
.code-snippets-visible .code-toggler {
|
||||
background: #67D55B;
|
||||
border-color: #4CB340; }
|
||||
.code-snippets-visible .code-toggle {
|
||||
border-color: #4CB340;
|
||||
left: 14px; }
|
||||
.code-label {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
font-size: 11px;
|
||||
color: #888; }
|
||||
.code-toggler .code-label-hide {
|
||||
display: none; }
|
||||
.code-snippets-visible .code-label-hide {
|
||||
display: inline; }
|
||||
.code-snippets-visible .code-label-show {
|
||||
display: none; }
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.header {
|
||||
@ -119,3 +76,95 @@
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar + .docs-section {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.navbar,
|
||||
.navbar-spacer {
|
||||
width: 100%;
|
||||
height: 6.5rem;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.navbar-spacer {
|
||||
display: none;
|
||||
}
|
||||
.navbar > .container {
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-list {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-link {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .1rem;
|
||||
margin-right: 50px;
|
||||
text-decoration: none;
|
||||
line-height: 6.3rem;
|
||||
color: #222;
|
||||
}
|
||||
.navbar-link.active {
|
||||
color: #33C3F0;
|
||||
}
|
||||
.has-docked-nav .navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.has-docked-nav .navbar-spacer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.popover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
top: 92%;
|
||||
left: -50%;
|
||||
}
|
||||
.popover-list {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.popover-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.popover-link {
|
||||
color: #999;
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
.popover-link:hover {
|
||||
color: #fff;
|
||||
background: #33C3F0;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user