Skip to content

Commit a4ab5f6

Browse files
Dave GamacheDave Gamache
Dave Gamache
authored and
Dave Gamache
committed
starting to implement a docking nav?
1 parent 4f83922 commit a4ab5f6

File tree

3 files changed

+156
-83
lines changed

3 files changed

+156
-83
lines changed

‎index.html‎

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -48,25 +48,63 @@ <h2 class="title">A dead simple, responsive boilerplate.</h2>
4848
<div class="four columns offset-by-two value-prop">
4949
<img class="value-img" src="images/feather.svg">
5050
Light as a feather at less than a kb &amp; built with mobile in mind.
51-
<!-- Attr: http://thenounproject.com/term/feather/22073/ -->
5251
</div>
5352
<div class="four columns value-prop">
5453
<img class="value-img" src="images/pens.svg">
55-
<!-- Attr: bottom pen - http://thenounproject.com/term/pen/32847/ -->
56-
<!-- Attr: top pen - http://thenounproject.com/term/pen/21163/ -->
5754
Styles designed to be a starting point, not a UI framework.
5855
</div>
5956
<div class="four columns value-prop">
6057
<img class="value-img" src="images/watch.svg">
61-
<!-- Attr: http://thenounproject.com/term/watch/48012/ -->
6258
Quick to start with zero compiling or installing necessary.
6359
</div>
6460
</div>
6561
</section>
6662

67-
<div class="social-bar">
68-
69-
</div>
63+
<div class="navbar-spacer"></div>
64+
<nav class="navbar">
65+
<div class="container">
66+
<ul class="navbar-list">
67+
<li class="navbar-item"><a class="navbar-link" href="#">Intro</a></li>
68+
<li class="navbar-item">
69+
<a class="navbar-link" href="#" data-popover-id="codeNavPopover">Code</a>
70+
<div id="codeNavPopover" class="popover">
71+
<ul class="popover-list">
72+
<li class="popover-item">
73+
<a class="popover-link" href="#">Grid</a>
74+
</li>
75+
<li class="popover-item">
76+
<a class="popover-link" href="#">Typography</a>
77+
</li>
78+
<li class="popover-item">
79+
<a class="popover-link" href="#">Buttons</a>
80+
</li>
81+
<li class="popover-item">
82+
<a class="popover-link" href="#">Forms</a>
83+
</li>
84+
<li class="popover-item">
85+
<a class="popover-link" href="#">Lists</a>
86+
</li>
87+
<li class="popover-item">
88+
<a class="popover-link" href="#">Code</a>
89+
</li>
90+
<li class="popover-item">
91+
<a class="popover-link" href="#">Tables</a>
92+
</li>
93+
<li class="popover-item">
94+
<a class="popover-link" href="#">Queries</a>
95+
</li>
96+
<li class="popover-item">
97+
<a class="popover-link" href="#">Utilities</a>
98+
</li>
99+
</ul>
100+
</div>
101+
</li>
102+
<li class="navbar-item"><a class="navbar-link" href="#">Examples</a></li>
103+
<li class="navbar-item"><a class="navbar-link" href="#">License</a></li>
104+
<li class="navbar-item"><a class="navbar-link" href="#">Colophon</a></li>
105+
</ul>
106+
</div>
107+
</nav>
70108

71109
<!-- Why use Skeleton -->
72110
<div class="docs-section">
@@ -592,15 +630,6 @@ <h6 class="docs-header">Colophon</h6>
592630
<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>
593631
</div>
594632

595-
<div class="code-toggler">
596-
<span class="code-toggle"></span>
597-
<span class="code-label">
598-
Code
599-
<span class="code-label-show">hidden</span>
600-
<span class="code-label-hide">visible</span>
601-
</span>
602-
</div>
603-
604633
</div>
605634

606635
<!-- End Document

‎scripts/site.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
$(document).ready(function() {
22

33
// Variables
4-
var codeIsActive = true,
5-
$codeSnippets = $('.code-example-body'),
6-
$sections = $('.docs-section'),
4+
var $codeSnippets = $('.code-example-body'),
5+
$nav = $('.navbar'),
6+
$body = $('body'),
77
$window = $(window),
8+
navOffsetTop = $nav.offset().top,
89
entityMap = {
910
"&": "&amp;",
1011
"<": "&lt;",
@@ -15,10 +16,24 @@ $(document).ready(function() {
1516
}
1617

1718
function init() {
18-
$('.code-toggler').on('click', toggleCode)
19+
$window.on('scroll', onScroll)
20+
$window.on('resize', resize)
1921
buildSnippets();
2022
}
2123

24+
function resize() {
25+
navOffsetTop = $nav.offset().top
26+
}
27+
28+
function onScroll() {
29+
if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
30+
$body.addClass('has-docked-nav')
31+
}
32+
if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
33+
$body.removeClass('has-docked-nav')
34+
}
35+
}
36+
2237
function escapeHtml(string) {
2338
return String(string).replace(/[&<>"'\/]/g, function (s) {
2439
return entityMap[s];
@@ -32,26 +47,6 @@ $(document).ready(function() {
3247
})
3348
}
3449

35-
function toggleCode() {
36-
var windowScrollTop = $window.scrollTop()
37-
var offsetHeight = windowScrollTop
38-
$sections.each(function (i) {
39-
if($(this).children('.code-example').length > 0) {
40-
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
41-
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
42-
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
43-
if(codeIsActive == false) {
44-
offsetHeight += codeExampleHeight
45-
} else {
46-
offsetHeight -= codeExampleHeight
47-
}
48-
}
49-
}
50-
})
51-
$('body').toggleClass('code-snippets-visible')
52-
codeIsActive = !codeIsActive
53-
$window.scrollTop(offsetHeight)
54-
}
5550

5651
init();
5752

‎stylesheets/custom.css‎

Lines changed: 92 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -52,54 +52,11 @@
5252
.code-example {
5353
margin-top: 1.5rem;
5454
margin-bottom: 0;
55-
display: none;
5655
}
5756
.code-example-body {
5857
white-space: pre;
59-
/*overflow: auto;*/
6058
word-wrap: break-word
6159
}
62-
.code-snippets-visible .code-example {
63-
display: block;
64-
}
65-
.code-toggler {
66-
position: fixed;
67-
bottom: 10px;
68-
left: 10px;
69-
width: 34px;
70-
height: 20px;
71-
background: #E5E5E5;
72-
border: 1px solid #C6C6C6;
73-
border-radius: 100px;
74-
cursor: pointer; }
75-
.code-toggle {
76-
position: absolute;
77-
width: 16px;
78-
height: 16px;
79-
top: 1px;
80-
left: 1px;
81-
background-color: #fff;
82-
border: 1px solid #C6C6C6;
83-
border-radius: 100px;
84-
-webkit-transition: all .15s ease-out; }
85-
.code-snippets-visible .code-toggler {
86-
background: #67D55B;
87-
border-color: #4CB340; }
88-
.code-snippets-visible .code-toggle {
89-
border-color: #4CB340;
90-
left: 14px; }
91-
.code-label {
92-
width: 100px;
93-
position: absolute;
94-
left: 42px;
95-
font-size: 11px;
96-
color: #888; }
97-
.code-toggler .code-label-hide {
98-
display: none; }
99-
.code-snippets-visible .code-label-hide {
100-
display: inline; }
101-
.code-snippets-visible .code-label-show {
102-
display: none; }
10360

10461
@media (min-width: 550px) {
10562
.header {
@@ -118,4 +75,96 @@
11875
float: right;
11976
margin-top: 12px;
12077
}
78+
}
79+
80+
81+
82+
83+
84+
85+
86+
.navbar + .docs-section {
87+
border-top-width: 0;
88+
}
89+
.navbar,
90+
.navbar-spacer {
91+
width: 100%;
92+
height: 6.5rem;
93+
background: #fff;
94+
z-index: 99;
95+
border-top: 1px solid #eee;
96+
border-bottom: 1px solid #eee;
97+
}
98+
.navbar-spacer {
99+
display: none;
100+
}
101+
.navbar > .container {
102+
width: 100%;
103+
}
104+
.navbar-list {
105+
list-style: none;
106+
margin-bottom: 0;
107+
}
108+
.navbar-item {
109+
position: relative;
110+
float: left;
111+
margin-bottom: 0;
112+
}
113+
.navbar-link {
114+
text-transform: uppercase;
115+
font-size: 11px;
116+
font-weight: 600;
117+
letter-spacing: .1rem;
118+
margin-right: 50px;
119+
text-decoration: none;
120+
line-height: 6.3rem;
121+
color: #222;
122+
}
123+
.navbar-link.active {
124+
color: #33C3F0;
125+
}
126+
.has-docked-nav .navbar {
127+
position: fixed;
128+
top: 0;
129+
left: 0;
130+
}
131+
.has-docked-nav .navbar-spacer {
132+
display: block;
133+
}
134+
135+
136+
.popover {
137+
display: none;
138+
position: absolute;
139+
top: 0;
140+
left: 0;
141+
background: #fff;
142+
border: 1px solid #eee;
143+
border-radius: 4px;
144+
top: 92%;
145+
left: -50%;
146+
}
147+
.popover-list {
148+
padding: 10px 0;
149+
margin: 0;
150+
list-style: none;
151+
}
152+
.popover-item {
153+
padding: 0;
154+
margin: 0;
155+
}
156+
.popover-link {
157+
color: #999;
158+
display: block;
159+
padding: 5px 20px;
160+
text-decoration: none;
161+
text-transform: uppercase;
162+
font-size: 1.0rem;
163+
font-weight: 600;
164+
text-align: center;
165+
letter-spacing: .1rem;
166+
}
167+
.popover-link:hover {
168+
color: #fff;
169+
background: #33C3F0;
121170
}

0 commit comments

Comments
 (0)