diff --git a/README.md b/README.md index 628d36c..6ea7a03 100644 --- 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 index d2e0210..2d3176e 100644 --- a/index.html +++ b/index.html @@ -100,6 +100,7 @@ + @@ -109,7 +110,7 @@
Is Skeleton for you?
-

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, this site is built on Skeleton and has just over 100 lines of custom CSS.

+

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, this site is built on Skeleton and has just over 100 lines of custom CSS.

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3

Tweet @@ -617,6 +618,12 @@
Examples
+ +
+
Support
+

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.

+
+
License
diff --git a/scripts/site.js b/scripts/site.js index 59f8c65..e22bf43 100644 --- 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 index 04a4c19..b84838a 100644 --- 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; } } \ No newline at end of file diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 1d6020b..27d4b0a 100644 --- 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,