removing nav on mobile, moving nav into mobile first query, changing …

…the docs a bit, adding support section, testing out markdown IDs as links for README
codehiker · Dec 8, 2014 · 28d510e · 28d510e
1 parent 7e293bd
commit 28d510e
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -33,14 +33,15 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few
 - No compiling or installing...just vanilla CSS
 
 
-## Browser support
+## Browser support {#browserSupport}
 
-- Chrome
-- Firefox 5+
-- Opera 
-- Safari 6+
-- IE 8+
+- Chrome latest
+- Firefox latest
+- Opera latest
+- Safari latest
+- IE latest
 
+The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.
 
 ## Acknowledgement
 

diff --git a/index.html b/index.html
@@ -100,6 +100,7 @@ <h2 class="title">A dead simple, responsive boilerplate.</h2>
             </div>
           </li>
           <li class="navbar-item"><a class="navbar-link" href="#examples">Examples</a></li>
+          <li class="navbar-item"><a class="navbar-link" href="#support">Support</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">Colophon</a></li>
         </ul>
@@ -109,7 +110,7 @@ <h2 class="title">A dead simple, responsive boilerplate.</h2>
     <!-- Why use Skeleton -->
     <div class="docs-section" id="intro">
       <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 overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. 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>
       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.getskeleton.com" data-text="Skeleton - A dead simple, responsive boilerplate." data-via="dhg" data-related="dhg">Tweet</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
@@ -617,6 +618,12 @@ <h6 class="docs-header">Utilities</h6>
       <h6 class="docs-header">Examples</h6>
     </div>
 
+    <!-- Support -->
+    <div class="row docs-section" id="support">
+      <h6 class="docs-header">Support</h6>
+      <p>Skeleton supports all latest versions of major browsers (both on desktops and mobile devices). That said, it basically works with any version of Chrome, Firefox, Opera, or Safari and as far back as IE9.</p>
+    </div>
+
     <!-- License -->
     <div class="row docs-section" id="license">
       <h6 class="docs-header">License</h6>

diff --git a/scripts/site.js b/scripts/site.js
@@ -34,7 +34,7 @@ $(document).ready(function() {
     $target = $(target);
     $('html, body').stop().animate({
         'scrollTop': $target.offset().top-40
-    }, 500, 'swing', function () {
+    }, 0, 'swing', function () {
         window.location.hash = target;
         $(document).on("scroll", onScroll);
     });

diff --git a/stylesheets/custom.css b/stylesheets/custom.css
@@ -4,8 +4,7 @@
   margin-top: 6rem;
   text-align: center; }
 .value-prop {
-  margin-top: 1rem;
-}
+  margin-top: 1rem; }
 .value-props {
   margin-top: 4rem;
   margin-bottom: 4rem; }
@@ -51,13 +50,15 @@
   letter-spacing: normal; }
 .code-example {
   margin-top: 1.5rem;
-  margin-bottom: 0;
-}
+  margin-bottom: 0; }
 .code-example-body {
   white-space: pre;
-  word-wrap: break-word
+  word-wrap: break-word }
+.navbar {
+  display: none;
 }
 
+/* Larger than phone */
 @media (min-width: 550px) {
   .header {
     margin-top: 18rem; }
@@ -77,142 +78,117 @@
   }
 }
 
+/* Larger than tablet */
+@media (min-width: 750px) {
+  /* Navbar */
+  .navbar + .docs-section {
+    border-top-width: 0; }
+  .navbar,
+  .navbar-spacer {
+    display: block;
+    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: .2rem;
+    margin-right: 35px;
+    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; }
+  /* Re-overiding the width 100% declaration to match size of % based container */
+  .has-docked-nav .navbar > .container {
+    width: 80%; }
 
-
-
-
-
-
-.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: .2rem;
-  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;
-}
-/* Re-overiding the width 100% declaration to match size of % based container */
-.has-docked-nav .navbar > .container {
-  width: 80%;
-}
-
-
-
-.popover.open {
-  display: block;
-}
-.popover {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #fff;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  top: 92%;
-  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 {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-.popover-item {
-  padding: 0;
-  margin: 0;
-}
-.popover-link {
-  position: relative;
-  color: #222;
-  display: block;
-  padding: 8px 20px;
-  border-bottom: 1px solid #eee;
-  text-decoration: none;
-  text-transform: uppercase;
-  font-size: 1.0rem;
-  font-weight: 600;
-  text-align: center;
-  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 {
-  color: #fff;
-  background: #33C3F0;
-}
-.popover-link:hover,
-.popover-item:first-child .popover-link:hover:after {
-  border-bottom-color: #33C3F0;
+  /* Popover */
+  .popover.open {
+    display: block;
+  }
+  .popover {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    top: 92%;
+    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 {
+    padding: 0;
+    margin: 0;
+    list-style: none; }
+  .popover-item {
+    padding: 0;
+    margin: 0; }
+  .popover-link {
+    position: relative;
+    color: #222;
+    display: block;
+    padding: 8px 20px;
+    border-bottom: 1px solid #eee;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 1.0rem;
+    font-weight: 600;
+    text-align: center;
+    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 {
+    color: #fff;
+    background: #33C3F0; }
+  .popover-link:hover,
+  .popover-item:first-child .popover-link:hover:after {
+    border-bottom-color: #33C3F0; }
 }
diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css
@@ -46,6 +46,7 @@
 .row .columns:first-child { 
 	margin-left: 0; }
 
+/* For devices larger than 550px */
 @media (min-width: 550px) {
 
   .container .column,