got the nav working on web and looking real sharp.

This commit is contained in:
Dave Gamache 2014-12-01 22:44:25 -08:00
parent a4ab5f6f4e
commit 7e293bdc43
4 changed files with 119 additions and 34 deletions

View File

@ -64,50 +64,50 @@
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<ul class="navbar-list"> <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="#intro">Intro</a></li>
<li class="navbar-item"> <li class="navbar-item">
<a class="navbar-link" href="#" data-popover-id="codeNavPopover">Code</a> <a class="navbar-link" href="#" data-popover="#codeNavPopover">Code</a>
<div id="codeNavPopover" class="popover"> <div id="codeNavPopover" class="popover">
<ul class="popover-list"> <ul class="popover-list">
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Grid</a> <a class="popover-link" href="#grid">Grid</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Typography</a> <a class="popover-link" href="#typography">Typography</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Buttons</a> <a class="popover-link" href="#buttons">Buttons</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Forms</a> <a class="popover-link" href="#forms">Forms</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Lists</a> <a class="popover-link" href="#lists">Lists</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Code</a> <a class="popover-link" href="#code">Code</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Tables</a> <a class="popover-link" href="#tables">Tables</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Queries</a> <a class="popover-link" href="#queries">Queries</a>
</li> </li>
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="#">Utilities</a> <a class="popover-link" href="#utilities">Utilities</a>
</li> </li>
</ul> </ul>
</div> </div>
</li> </li>
<li class="navbar-item"><a class="navbar-link" href="#">Examples</a></li> <li class="navbar-item"><a class="navbar-link" href="#examples">Examples</a></li>
<li class="navbar-item"><a class="navbar-link" href="#">License</a></li> <li class="navbar-item"><a class="navbar-link" href="#license">License</a></li>
<li class="navbar-item"><a class="navbar-link" href="#">Colophon</a></li> <li class="navbar-item"><a class="navbar-link" href="#colophon">Colophon</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
<!-- Why use Skeleton --> <!-- Why use Skeleton -->
<div class="docs-section"> <div class="docs-section" id="intro">
<h6 class="docs-header">Is Skeleton for you?</h6> <h6 class="docs-header">Is Skeleton for you?</h6>
<p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, <u>this site is built on Skeleton and has just over 100 lines of custom CSS.</u></p> <p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, <u>this site is built on Skeleton and has just over 100 lines of custom CSS.</u></p>
<p>Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3</p> <p>Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3</p>
@ -119,7 +119,7 @@
</div> </div>
<!-- Grid --> <!-- Grid -->
<div class="docs-section"> <div class="docs-section" id="grid">
<h6 class="docs-header">The grid</h6> <h6 class="docs-header">The grid</h6>
<p>The grid is a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. </p> <p>The grid is a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. </p>
<div class="example-grid docs-example"> <div class="example-grid docs-example">
@ -208,7 +208,7 @@
</div> </div>
<!-- Typography --> <!-- Typography -->
<div class="row docs-section"> <div class="row docs-section" id="typography">
<h6 class="docs-header">Typography</h6> <h6 class="docs-header">Typography</h6>
<p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships can be responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Out of the box, Skeleton never changes the <code>&lt;html&gt;</code> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <code>&lt;h1&gt;</code> with <code>5.0rem</code>font-size just means <code>50px</code>.</p> <p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships can be responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Out of the box, Skeleton never changes the <code>&lt;html&gt;</code> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <code>&lt;h1&gt;</code> with <code>5.0rem</code>font-size just means <code>50px</code>.</p>
<div class="docs-example"> <div class="docs-example">
@ -255,7 +255,7 @@
</div> </div>
<!-- Buttons --> <!-- Buttons -->
<div class="row docs-section"> <div class="row docs-section" id="buttons">
<h6 class="docs-header">Buttons</h6> <h6 class="docs-header">Buttons</h6>
<p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a <code>.button</code> class.</p> <p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a <code>.button</code> class.</p>
<div class="docs-example"> <div class="docs-example">
@ -295,7 +295,7 @@
</div> </div>
<!-- Forms --> <!-- Forms -->
<div class="row docs-section"> <div class="row docs-section" id="forms">
<h6 class="docs-header">Forms</h6> <h6 class="docs-header">Forms</h6>
<p>Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.</p> <p>Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.</p>
<div class="docs-example docs-example-forms"> <div class="docs-example docs-example-forms">
@ -363,7 +363,7 @@
</div> </div>
<!-- Lists --> <!-- Lists -->
<div class="docs-section"> <div class="docs-section" id="lists">
<h6 class="docs-header">Lists</h6> <h6 class="docs-header">Lists</h6>
<div class="row docs-example"> <div class="row docs-example">
<div class="six columns"> <div class="six columns">
@ -418,7 +418,7 @@
</div> </div>
<!-- Code --> <!-- Code -->
<div class="row docs-section"> <div class="row docs-section" id="code">
<h6 class="docs-header">Code</h6> <h6 class="docs-header">Code</h6>
<p>Code styling is kept basic just wrap anything in a <code>&lt;code&gt;</code> and it will appear like <code>this</code>. For blocks of code, wrap a <code>&lt;code&gt;</code> with a <code>&lt;pre&gt;</code>.</p> <p>Code styling is kept basic just wrap anything in a <code>&lt;code&gt;</code> and it will appear like <code>this</code>. For blocks of code, wrap a <code>&lt;code&gt;</code> with a <code>&lt;pre&gt;</code>.</p>
<div class="docs-example"> <div class="docs-example">
@ -443,7 +443,7 @@
</div> </div>
<!-- Tables --> <!-- Tables -->
<div class="row docs-section"> <div class="row docs-section" id="tables">
<h6 class="docs-header">Tables</h6> <h6 class="docs-header">Tables</h6>
<p>Be sure to use properly formed table markup with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> when building a <code>table</code>.</p> <p>Be sure to use properly formed table markup with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> when building a <code>table</code>.</p>
<div class="docs-example"> <div class="docs-example">
@ -508,7 +508,7 @@
</div> </div>
<!-- Queries --> <!-- Queries -->
<div class="row docs-section"> <div class="row docs-section" id="queries">
<h6 class="docs-header">Media queries</h6> <h6 class="docs-header">Media queries</h6>
<p>Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets <code>min-width</code>. The other set is desktop-first, meaning it targets <code>max-width</code>. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:</p> <p>Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets <code>min-width</code>. The other set is desktop-first, meaning it targets <code>max-width</code>. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:</p>
<div class="docs-example row"> <div class="docs-example row">
@ -575,7 +575,7 @@
<!-- Utilities and Misc. --> <!-- Utilities and Misc. -->
<div class="row docs-section"> <div class="row docs-section" id="utilities">
<h6 class="docs-header">Utilities</h6> <h6 class="docs-header">Utilities</h6>
<p>Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.</p> <p>Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.</p>
@ -613,19 +613,19 @@
</div> </div>
<!-- Examples --> <!-- Examples -->
<div class="row docs-section"> <div class="row docs-section" id="examples">
<h6 class="docs-header">Examples of Skeleton sites</h6> <h6 class="docs-header">Examples</h6>
</div> </div>
<!-- License --> <!-- License -->
<div class="row docs-section"> <div class="row docs-section" id="license">
<h6 class="docs-header">License</h6> <h6 class="docs-header">License</h6>
<p>All parts of Skeleton are free to use and abuse under the <a href="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <a href="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p> <p>All parts of Skeleton are free to use and abuse under the <a href="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <a href="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p>
<p>Skeleton's version history is available <a href="#">on Github</a>.</p> <p>Skeleton's version history is available <a href="#">on Github</a>.</p>
</div> </div>
<!-- Colophon --> <!-- Colophon -->
<div class="row docs-section"> <div class="row docs-section" id="colophon">
<h6 class="docs-header">Colophon</h6> <h6 class="docs-header">Colophon</h6>
<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> <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>

View File

@ -5,7 +5,9 @@ $(document).ready(function() {
$nav = $('.navbar'), $nav = $('.navbar'),
$body = $('body'), $body = $('body'),
$window = $(window), $window = $(window),
$popoverLink = $('[data-popover]'),
navOffsetTop = $nav.offset().top, navOffsetTop = $nav.offset().top,
$document = $(document),
entityMap = { entityMap = {
"&": "&amp;", "&": "&amp;",
"<": "&lt;", "<": "&lt;",
@ -18,9 +20,45 @@ $(document).ready(function() {
function init() { function init() {
$window.on('scroll', onScroll) $window.on('scroll', onScroll)
$window.on('resize', resize) $window.on('resize', resize)
$popoverLink.on('click', openPopover)
$document.on('click', closePopover)
$('a[href^="#"]').on('click', smoothScroll)
buildSnippets(); buildSnippets();
} }
function smoothScroll(e) {
e.preventDefault();
$(document).off("scroll");
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
}
function openPopover(e) {
e.preventDefault()
var popover = $($(this).data('popover'));
popover.toggleClass('open')
e.stopImmediatePropagation();
}
function closePopover(e) {
if($('.popover.open').length > 0) {
$('.popover').removeClass('open')
}
}
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
function resize() { function resize() {
navOffsetTop = $nav.offset().top navOffsetTop = $nav.offset().top
} }

View File

@ -114,7 +114,7 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: .1rem; letter-spacing: .2rem;
margin-right: 50px; margin-right: 50px;
text-decoration: none; text-decoration: none;
line-height: 6.3rem; line-height: 6.3rem;
@ -128,11 +128,20 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.has-docked-nav .navbar-spacer { .has-docked-nav .navbar-spacer {
display: block; display: block;
} }
/* Re-overiding the width 100% declaration to match size of % based container */
.has-docked-nav .navbar > .container {
width: 80%;
}
.popover.open {
display: block;
}
.popover { .popover {
display: none; display: none;
position: absolute; position: absolute;
@ -143,9 +152,35 @@
border-radius: 4px; border-radius: 4px;
top: 92%; top: 92%;
left: -50%; left: -50%;
-webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
-moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
}
.popover-item:first-child .popover-link:after,
.popover-item:first-child .popover-link:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover-item:first-child .popover-link:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.popover-item:first-child .popover-link:before {
border-color: rgba(238, 238, 238, 0);
border-bottom-color: #eee;
border-width: 11px;
margin-left: -11px;
} }
.popover-list { .popover-list {
padding: 10px 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
@ -154,9 +189,11 @@
margin: 0; margin: 0;
} }
.popover-link { .popover-link {
color: #999; position: relative;
color: #222;
display: block; display: block;
padding: 5px 20px; padding: 8px 20px;
border-bottom: 1px solid #eee;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 1.0rem; font-size: 1.0rem;
@ -164,7 +201,18 @@
text-align: center; text-align: center;
letter-spacing: .1rem; letter-spacing: .1rem;
} }
.popover-item:first-child .popover-link {
border-radius: 4px 4px 0 0;
}
.popover-item:last-child .popover-link {
border-radius: 0 0 4px 4px;
border-bottom-width: 0;
}
.popover-link:hover { .popover-link:hover {
color: #fff; color: #fff;
background: #33C3F0; background: #33C3F0;
} }
.popover-link:hover,
.popover-item:first-child .popover-link:hover:after {
border-bottom-color: #33C3F0;
}

View File

@ -118,8 +118,7 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
*/ */
a { a {
color: #1EAEDB; } color: #1EAEDB; }
a:hover, a:hover {
a:focus {
color: #0FA0CE; } color: #0FA0CE; }