From 7a68cd5b80a477bbb91818818c8ee2f4c16674ce Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Thu, 20 Nov 2014 16:38:45 -0800 Subject: [PATCH 01/62] first version of 2.0 WIP --- images/frame.svg | 19 ++ index.html | 226 +++++++++++++++--- stylesheets/base.css | 465 +++++++++++++++++--------------------- stylesheets/custom.css | 73 ++++++ stylesheets/normalize.css | 427 ++++++++++++++++++++++++++++++++++ stylesheets/outdated.css | 201 ++++++++++++++++ stylesheets/skeleton.css | 195 +++------------- 7 files changed, 1155 insertions(+), 451 deletions(-) create mode 100644 images/frame.svg create mode 100644 stylesheets/custom.css create mode 100644 stylesheets/normalize.css create mode 100644 stylesheets/outdated.css diff --git a/images/frame.svg b/images/frame.svg new file mode 100644 index 0000000..21350ac --- /dev/null +++ b/images/frame.svg @@ -0,0 +1,19 @@ + + + + Group + Created with Sketch Beta. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 29b1dc1..f0c5b93 100644 --- a/index.html +++ b/index.html @@ -6,28 +6,34 @@ + –––––––––––––––––––––––––––––––––––––––––––––––––– --> Your Page Title Here :) + –––––––––––––––––––––––––––––––––––––––––––––––––– --> + + + + –––––––––––––––––––––––––––––––––––––––––––––––––– --> + + + –––––––––––––––––––––––––––––––––––––––––––––––––– --> @@ -36,41 +42,195 @@ - - - - - + –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-
-

Skeleton

-
Version 1.2
-
-
-
-

About Skeleton?

-

Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.

-
-
-

Three Core Principles

-

Skeleton is built on three core principles:

-
    -
  • A Responsive Grid Down To Mobile: Elegant scaling from a browser to tablets to mobile.
    • -
  • Fast to Start: It's a tool for rapid development with best practices
    • -
  • Style Agnostic: It provides the most basic, beautiful styles, but is meant to be overwritten.
    • -
-
-
-

Docs & Support

-

The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.

+
+

A responsive boilerplate just for the basics.

+ Download +
+
+ + Mobile first and weighing in at measly .5kb +
+
+ + Only styles basic HTML elements +
+
+ + Not a framework, but a jumping off point for devs +
+
+
+ + +
+
+
Why use Skeleton
+

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (<button>, <p>, <nav>, …) can get you really far. For what it's worth, this site is built on Skeleton and only requires ~100 lines of additional CSS.

+
-
+ +
+
+
The grid
+

The grid is just a 12-column fluid grid with a max width of 960px (but this can be changed with one line of CSS). The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

+
+
One
+
Eleven
+
Two
+
Ten
+
Three
+
Nine
+
Four
+
Eight
+
Five
+
Seven
+
Six
+
Six
+
Seven
+
Five
+
Eight
+
Four
+
Nine
+
Three
+
Ten
+
Two
+
Eleven
+
One
+
+
+
+ + +
+
+
Typography
+

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+
+
+
+

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

+
+
+

Heading <h1> 50rem

+

Heading <h2> 42rem

+

Heading <h3> 36rem

+

Heading <h4> 30rem

+
Heading <h5> 24rem
+
Heading <h6> 15rem
+
+
+
+
+
+ + +
+
+
Buttons
+

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

+
+ Anchor button + + Anchor button + +
+
+
+ + +
+
+
Forms
+
+
+ + +
+
+
Lists
+
+
+
    +
  • Unordered lists have basic styles
    • +
  • + They use the circle list style +
      +
    • Nested lists styled to feel right
      • +
    • Can nest either type of list into the other
      • +
    +
    • +
  • Just more list items mama san
    • +
+
+
+
    +
  1. Ordered lists also have basic styles
    2. +
  2. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
      • +
    • Can nest either type of list into the other
      • +
    +
    3. +
  3. Last list item just for the fun
    4. +
+
+
+
+
+ + +
+
+
Code
+

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

+
+ 
.some-class {
  background-color: red
}
+
+
+
+ + +
+
+
Tables
+
+
+ + +
+
+
Media queries
+
+
+ + +
+
+
Miscellaneous
+

hrs, images

+
+
+ + + + + + + + + + + +
+–––––––––––––––––––––––––––––––––––––––––––––––––– --> \ No newline at end of file diff --git a/stylesheets/base.css b/stylesheets/base.css index 9ae0270..1df668b 100644 --- a/stylesheets/base.css +++ b/stylesheets/base.css @@ -1,269 +1,230 @@ /* -* Skeleton V1.2 -* Copyright 2011, Dave Gamache +* Skeleton V2.0 +* Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 +* 6/20/2014 */ -/* Table of Content -================================================== - #Reset & Basics - #Basic Styles - #Site Styles - #Typography - #Links - #Lists - #Images - #Buttons - #Forms - #Misc */ +/* Basic Styles +-------------------------------------------------- */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; +} +body { + background: #fff; + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; +} -/* #Reset & Basics (Inspired by E. Meyers) -================================================== */ - html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } - body { - line-height: 1; } - ol, ul { - list-style: none; } - blockquote, q { - quotes: none; } - blockquote:before, blockquote:after, - q:before, q:after { - content: ''; - content: none; } - table { - border-collapse: collapse; - border-spacing: 0; } +/* Typography +-------------------------------------------------- */ +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + margin-top: 0; + margin-bottom: 2rem; +} +h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;} +h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + +/* Links +-------------------------------------------------- */ +a { + color: #1EAEDB; +} +a:hover, +a:focus { + color: #0FA0CE; +} + +/* Buttons +-------------------------------------------------- */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + background-color: #33C3F0; + border-radius: 4px; + color: #FFF; + display: inline-block; + text-align: center; + font-size: 11px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + height: 38px; + line-height: 38px; + padding: 0 30px; + border-width: 0; + letter-spacing: .1rem; + text-transform: uppercase; +} +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover { + background-color: #1EAEDB; + color: #FFF; +} +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + background-color: #1EAEDB; + color: #FFF; + outline: 0; +} + +.button.secondary, +button.secondary, +input[type="submit"].secondary, +input[type="reset"].secondary, +input[type="button"].secondary { + background-color: #B6B6B6; +} +.button.secondary:hover, +button.secondary:hover, +input[type="submit"].secondary:hover, +input[type="reset"].secondary:hover, +input[type="button"].secondary:hover { + background-color: #AAA; + color: #FFF; +} +.button.secondary:focus, +button.secondary:focus, +input[type="submit"].secondary:focus, +input[type="reset"].secondary:focus, +input[type="button"].secondary:focus { + background-color: #AAA; + color: #FFF; + outline: 0; +} + +.button-full-width { + width: 100%; + padding: 0; +} -/* #Basic Styles -================================================== */ - body { - background: #fff; - font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ - -webkit-text-size-adjust: 100%; - } +/* Forms +-------------------------------------------------- */ +input[type="email"], +input[type="search"], +input[type="text"], +input[type="password"], +textarea, +select { + border: 1px solid #B6B6B6; + height: 36px; + padding: 0 10px; + border-radius: 4px; + box-shadow: none; +} +input[type="email"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; +} +label, +legend { + display: block; + font-weight: 600; + margin-bottom: .3rem; +} +input[disabled] { + cursor: not-allowed; + background-color: #EFEFEF; +} +fieldset { + border-width: 0; + padding: 0; +} +input[type="checkbox"] { + display: inline; +} +label span, +legend span { + font-weight: normal; + margin-left: .5rem; +} -/* #Typography -================================================== */ - h1, h2, h3, h4, h5, h6 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } - h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} - h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } - h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } - h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } - h5 { font-size: 17px; line-height: 24px; } - h6 { font-size: 14px; line-height: 21px; } - .subheader { color: #777; } - - p { margin: 0 0 20px 0; } - p img { margin: 0; } - p.lead { font-size: 21px; line-height: 27px; color: #777; } - - em { font-style: italic; } - strong { font-weight: bold; color: #333; } - small { font-size: 80%; } - -/* Blockquotes */ - blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } - blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } - blockquote cite { display: block; font-size: 12px; color: #555; } - blockquote cite:before { content: "\2014 \0020"; } - blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } - - hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } +/* Lists +-------------------------------------------------- */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + padding-left: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; +} -/* #Links -================================================== */ - a, a:visited { color: #333; text-decoration: underline; outline: 0; } - a:hover, a:focus { color: #000; } - p a, p a:visited { line-height: inherit; } - - -/* #Lists -================================================== */ - ul, ol { margin-bottom: 20px; } - ul { list-style: none outside; } - ol { list-style: decimal; } - ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } - ul.square { list-style: square outside; } - ul.circle { list-style: circle outside; } - ul.disc { list-style: disc outside; } - ul ul, ul ol, - ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } - ul ul li, ul ol li, - ol ol li, ol ul li { margin-bottom: 6px; } - li { line-height: 18px; margin-bottom: 12px; } - ul.large li { line-height: 21px; } - li p { line-height: 21px; } - -/* #Images -================================================== */ - - img.scale-with-grid { - max-width: 100%; - height: auto; } - - -/* #Buttons -================================================== */ - - .button, - button, - input[type="submit"], - input[type="reset"], - input[type="button"] { - background: #eee; /* Old browsers */ - background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ - background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ - background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ - background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ - background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ - background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ - border: 1px solid #aaa; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - color: #444; - display: inline-block; - font-size: 11px; - font-weight: bold; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, .75); - cursor: pointer; - margin-bottom: 20px; - line-height: normal; - padding: 8px 10px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - - .button:hover, - button:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover { - color: #222; - background: #ddd; /* Old browsers */ - background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ - background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ - background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ - background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ - background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ - background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ - border: 1px solid #888; - border-top: 1px solid #aaa; - border-left: 1px solid #aaa; } - - .button:active, - button:active, - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active { - border: 1px solid #666; - background: #ccc; /* Old browsers */ - background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ - background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ - background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ - background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ - background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ - background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } - - .button.full-width, - button.full-width, - input[type="submit"].full-width, - input[type="reset"].full-width, - input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - - /* Fix for odd Mozilla border & padding issues */ - button::-moz-focus-inner, - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - -/* #Forms -================================================== */ - - form { - margin-bottom: 20px; } - fieldset { - margin-bottom: 20px; } - input[type="text"], - input[type="password"], - input[type="email"], - textarea, - select { - border: 1px solid #ccc; - padding: 6px 4px; - outline: none; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777; - margin: 0; - width: 210px; - max-width: 100%; - display: block; - margin-bottom: 20px; - background: #fff; } - select { - padding: 0; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - textarea:focus { - border: 1px solid #aaa; - color: #444; - -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); - -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); - box-shadow: 0 0 3px rgba(0,0,0,.2); } - textarea { - min-height: 60px; } - label, - legend { - display: block; - font-weight: bold; - font-size: 13px; } - select { - width: 220px; } - input[type="checkbox"] { - display: inline; } - label span, - legend span { - font-weight: normal; - font-size: 13px; - color: #444; } - -/* #Misc -================================================== */ - .remove-bottom { margin-bottom: 0 !important; } - .half-bottom { margin-bottom: 10px !important; } - .add-bottom { margin-bottom: 20px !important; } +/* Code +-------------------------------------------------- */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; + white-space: nowrap; +} +pre { + padding: 1rem 1.5rem; + background: #F1F1F1; + font-size: 90%; + border: 1px solid #E1E1E1; + border-radius: 4px; +} +/* Spacing +-------------------------------------------------- */ +input, +textarea, +select { + margin-bottom: 1.5rem; +} +p, +hr, +pre, +blockquote, +form, +dl, +figure, +table, +p, +ul, +ol { + margin-bottom: 2.5rem; +} \ No newline at end of file diff --git a/stylesheets/custom.css b/stylesheets/custom.css new file mode 100644 index 0000000..d94655a --- /dev/null +++ b/stylesheets/custom.css @@ -0,0 +1,73 @@ +.container { + width: 760px; +} +.header { + margin-top: 17rem; + text-align: center; +} +.value-props { + margin-top: 15rem; + margin-bottom: 10rem; +} +.docs-header { + text-transform: uppercase; + font-size: 1.4rem; + letter-spacing: .2rem; + font-weight: 600; +} +.docs-section { + border-top: 1px solid #eee; + padding: 6rem 0; +} +.value-img { + display: block; + text-align: center; + margin: 0 auto 1rem; +} +.example-grid .column, +.example-grid .columns { + background: #EEE; + text-align: center; + border-radius: 4px; + font-size: 1rem; + text-transform: uppercase; + height: 30px; + line-height: 30px; + margin-bottom: 1.5rem; + font-weight: 600; + letter-spacing: .1rem; +} +.docs-example .row, +.docs-example.row, +.docs-example pre, +.docs-example pre, +.docs-example .eleven.columns.alpha, +.docs-example .one.column.omega { + margin-bottom: 0; +} +.docs-example h1, +.docs-example h2, +.docs-example h3, +.docs-example h4, +.docs-example h5, +.docs-example h6 { + margin-bottom: 1rem; +} + +.heading-font-size { + font-size: 1.2rem; + color: #999; + letter-spacing: normal; +} + +@media only screen and (max-width: 1200px) { + .container { + width: 90%; + } +} + +@media only screen and (max-width: 800px) { + .container { + width: 85%; + } +} diff --git a/stylesheets/normalize.css b/stylesheets/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/stylesheets/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} \ No newline at end of file diff --git a/stylesheets/outdated.css b/stylesheets/outdated.css new file mode 100644 index 0000000..0a1cb51 --- /dev/null +++ b/stylesheets/outdated.css @@ -0,0 +1,201 @@ +h1, h2, h3, h4, h5, h6 { font-weight: normal; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} + h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } + h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } + h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } + h5 { font-size: 17px; line-height: 24px; } + h6 { font-size: 14px; line-height: 21px; } + .subheader { color: #777; } + + p { margin: 0 0 20px 0; } + p img { margin: 0; } + p.lead { font-size: 21px; line-height: 27px; color: #777; } + + em { font-style: italic; } + strong { font-weight: bold; color: #333; } + small { font-size: 80%; } + +/* Blockquotes */ + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } + + +/* #Links +================================================== */ + a, a:visited { color: #333; text-decoration: underline; outline: 0; } + a:hover, a:focus { color: #000; } + p a, p a:visited { line-height: inherit; } + + +/* #Lists +================================================== */ + ul, ol { margin-bottom: 20px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ul ol, + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } + ul ul li, ul ol li, + ol ol li, ol ul li { margin-bottom: 6px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + li p { line-height: 21px; } + +/* #Images +================================================== */ + + img.scale-with-grid { + max-width: 100%; + height: auto; } + + +/* #Buttons +================================================== */ + + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + background: #eee; /* Old browsers */ + background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ + background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ + background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ + background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ + background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ + background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, .75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover { + color: #222; + background: #ddd; /* Old browsers */ + background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ + background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ + background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ + background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ + background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ + background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; } + + .button:active, + button:active, + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active { + border: 1px solid #666; + background: #ccc; /* Old browsers */ + background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ + background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ + background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ + background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ + background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ + background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } + + .button.full-width, + button.full-width, + input[type="submit"].full-width, + input[type="reset"].full-width, + input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } + + /* Fix for odd Mozilla border & padding issues */ + button::-moz-focus-inner, + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + +/* #Forms +================================================== */ + + form { + margin-bottom: 20px; } + fieldset { + margin-bottom: 20px; } + input[type="text"], + input[type="password"], + input[type="email"], + textarea, + select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; } + select { + padding: 0; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + textarea:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); + box-shadow: 0 0 3px rgba(0,0,0,.2); } + textarea { + min-height: 60px; } + label, + legend { + display: block; + font-weight: bold; + font-size: 13px; } + select { + width: 220px; } + input[type="checkbox"] { + display: inline; } + label span, + legend span { + font-weight: normal; + font-size: 13px; + color: #444; } + +/* #Misc +================================================== */ + .remove-bottom { margin-bottom: 0 !important; } + .half-bottom { margin-bottom: 10px !important; } + .add-bottom { margin-bottom: 20px !important; } diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 5db3d38..c5a2aad 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -21,10 +21,13 @@ /* #Base 960 Grid ================================================== */ - .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } + .container { position: relative; max-width: 960px; margin: 0 auto; padding: 0; } .container .column, - .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .container .columns { float: left; margin-left: 4%; box-sizing: border-box;} .row { margin-bottom: 20px; } + .row .column:first-child, + .row .columns:first-child { margin-left: 0; } + /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } @@ -32,178 +35,38 @@ /* Base Grid */ .container .one.column, - .container .one.columns { width: 40px; } - .container .two.columns { width: 100px; } - .container .three.columns { width: 160px; } - .container .four.columns { width: 220px; } - .container .five.columns { width: 280px; } - .container .six.columns { width: 340px; } - .container .seven.columns { width: 400px; } - .container .eight.columns { width: 460px; } - .container .nine.columns { width: 520px; } - .container .ten.columns { width: 580px; } - .container .eleven.columns { width: 640px; } - .container .twelve.columns { width: 700px; } - .container .thirteen.columns { width: 760px; } - .container .fourteen.columns { width: 820px; } - .container .fifteen.columns { width: 880px; } - .container .sixteen.columns { width: 940px; } + .container .one.columns { width: 4.66666666667%; } + .container .two.columns { width: 13.3333333333%; } + .container .three.columns { width: 22%; } + .container .four.columns { width: 30.6666666667%; } + .container .five.columns { width: 39.3333333333%; } + .container .six.columns { width: 48%; } + .container .seven.columns { width: 56.6666666667%; } + .container .eight.columns { width: 65.3333333333%; } + .container .nine.columns { width: 74.0%; } + .container .ten.columns { width: 82.6666666667%; } + .container .eleven.columns { width: 91.3333333333%; } + .container .twelve.columns { width: 100%; } - .container .one-third.column { width: 300px; } - .container .two-thirds.column { width: 620px; } - - /* Offsets */ - .container .offset-by-one { padding-left: 60px; } - .container .offset-by-two { padding-left: 120px; } - .container .offset-by-three { padding-left: 180px; } - .container .offset-by-four { padding-left: 240px; } - .container .offset-by-five { padding-left: 300px; } - .container .offset-by-six { padding-left: 360px; } - .container .offset-by-seven { padding-left: 420px; } - .container .offset-by-eight { padding-left: 480px; } - .container .offset-by-nine { padding-left: 540px; } - .container .offset-by-ten { padding-left: 600px; } - .container .offset-by-eleven { padding-left: 660px; } - .container .offset-by-twelve { padding-left: 720px; } - .container .offset-by-thirteen { padding-left: 780px; } - .container .offset-by-fourteen { padding-left: 840px; } - .container .offset-by-fifteen { padding-left: 900px; } + .container .one-third.column { width: 30.6666666667%; } + .container .two-thirds.column { width: 48%; } /* #Tablet (Portrait) ================================================== */ - /* Note: Design for a width of 768px */ +@media only screen and (max-width: 1200px) { + .container { + width: 85%; + } +} - @media only screen and (min-width: 768px) and (max-width: 959px) { - .container { width: 768px; } - .container .column, - .container .columns { margin-left: 10px; margin-right: 10px; } - .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } - .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } - .alpha.omega { margin-left: 0; margin-right: 0; } - - .container .one.column, - .container .one.columns { width: 28px; } - .container .two.columns { width: 76px; } - .container .three.columns { width: 124px; } - .container .four.columns { width: 172px; } - .container .five.columns { width: 220px; } - .container .six.columns { width: 268px; } - .container .seven.columns { width: 316px; } - .container .eight.columns { width: 364px; } - .container .nine.columns { width: 412px; } - .container .ten.columns { width: 460px; } - .container .eleven.columns { width: 508px; } - .container .twelve.columns { width: 556px; } - .container .thirteen.columns { width: 604px; } - .container .fourteen.columns { width: 652px; } - .container .fifteen.columns { width: 700px; } - .container .sixteen.columns { width: 748px; } - - .container .one-third.column { width: 236px; } - .container .two-thirds.column { width: 492px; } - - /* Offsets */ - .container .offset-by-one { padding-left: 48px; } - .container .offset-by-two { padding-left: 96px; } - .container .offset-by-three { padding-left: 144px; } - .container .offset-by-four { padding-left: 192px; } - .container .offset-by-five { padding-left: 240px; } - .container .offset-by-six { padding-left: 288px; } - .container .offset-by-seven { padding-left: 336px; } - .container .offset-by-eight { padding-left: 384px; } - .container .offset-by-nine { padding-left: 432px; } - .container .offset-by-ten { padding-left: 480px; } - .container .offset-by-eleven { padding-left: 528px; } - .container .offset-by-twelve { padding-left: 576px; } - .container .offset-by-thirteen { padding-left: 624px; } - .container .offset-by-fourteen { padding-left: 672px; } - .container .offset-by-fifteen { padding-left: 720px; } - } - - -/* #Mobile (Portrait) -================================================== */ - - /* Note: Design for a width of 320px */ - - @media only screen and (max-width: 767px) { - .container { width: 300px; } - .container .columns, - .container .column { margin: 0; } - - .container .one.column, - .container .one.columns, - .container .two.columns, - .container .three.columns, - .container .four.columns, - .container .five.columns, - .container .six.columns, - .container .seven.columns, - .container .eight.columns, - .container .nine.columns, - .container .ten.columns, - .container .eleven.columns, - .container .twelve.columns, - .container .thirteen.columns, - .container .fourteen.columns, - .container .fifteen.columns, - .container .sixteen.columns, - .container .one-third.column, - .container .two-thirds.column { width: 300px; } - - /* Offsets */ - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { padding-left: 0; } - - } - - -/* #Mobile (Landscape) -================================================== */ - - /* Note: Design for a width of 480px */ - - @media only screen and (min-width: 480px) and (max-width: 767px) { - .container { width: 420px; } - .container .columns, - .container .column { margin: 0; } - - .container .one.column, - .container .one.columns, - .container .two.columns, - .container .three.columns, - .container .four.columns, - .container .five.columns, - .container .six.columns, - .container .seven.columns, - .container .eight.columns, - .container .nine.columns, - .container .ten.columns, - .container .eleven.columns, - .container .twelve.columns, - .container .thirteen.columns, - .container .fourteen.columns, - .container .fifteen.columns, - .container .sixteen.columns, - .container .one-third.column, - .container .two-thirds.column { width: 420px; } - } +@media only screen and (max-width: 800px) { + .container { + width: 80%; + } +} /* #Clearing From 2cbda075be05eea07d25d9115e7cf653052fc180 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 03:02:51 -0800 Subject: [PATCH 02/62] one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles --- images/apple-touch-icon-114x114.png | Bin 10118 -> 0 bytes images/apple-touch-icon-72x72.png | Bin 3872 -> 0 bytes images/apple-touch-icon.png | Bin 2469 -> 0 bytes images/feathers.svg | 6 + index.html | 428 +++++++++++++++++++--------- stylesheets/base.css | 230 --------------- stylesheets/custom.css | 104 ++++--- stylesheets/layout.css | 58 ---- stylesheets/outdated.css | 201 ------------- stylesheets/skeleton.css | 420 +++++++++++++++++++++------ 10 files changed, 696 insertions(+), 751 deletions(-) delete mode 100644 images/apple-touch-icon-114x114.png delete mode 100644 images/apple-touch-icon-72x72.png delete mode 100644 images/apple-touch-icon.png create mode 100644 images/feathers.svg delete mode 100644 stylesheets/base.css delete mode 100644 stylesheets/layout.css delete mode 100644 stylesheets/outdated.css diff --git a/images/apple-touch-icon-114x114.png b/images/apple-touch-icon-114x114.png deleted file mode 100644 index 88a9d5e85cebcbb50947c480a380b213c700998b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10118 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 diff --git a/images/apple-touch-icon-72x72.png b/images/apple-touch-icon-72x72.png deleted file mode 100644 index bbca145e51c41c1c9a5ed0fdb3170fef7eefd7e3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3872 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 j#mX7;vP + + + + + \ No newline at end of file diff --git a/index.html b/index.html index f0c5b93..2467652 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,11 @@ - - - - + - Your Page Title Here :) + Your Page Title Here @@ -23,21 +20,12 @@ - - - - - - - @@ -46,189 +34,347 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-

A responsive boilerplate just for the basics.

- Download +

A dead simple, responsive boilerplate.

+ Download
- - Mobile first and weighing in at measly .5kb + + Super light at less than a kb & built with mobile in mind.
- Only styles basic HTML elements + Styles designed to be a starting point, not a UI framework.
- Not a framework, but a jumping off point for devs + No compiling or installing necessary. Just vanilla CSS.
+ + -
-
-
Why use Skeleton
-

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (<button>, <p>, <nav>, …) can get you really far. For what it's worth, this site is built on Skeleton and only requires ~100 lines of additional CSS.

-
+
+
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 less than 100 lines of custom CSS.

+

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

+ + + + +
-
-
-
The grid
-

The grid is just a 12-column fluid grid with a max width of 960px (but this can be changed with one line of CSS). The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

-
-
One
-
Eleven
-
Two
-
Ten
-
Three
-
Nine
-
Four
-
Eight
-
Five
-
Seven
-
Six
-
Six
-
Seven
-
Five
-
Eight
-
Four
-
Nine
-
Three
-
Ten
-
Two
-
Eleven
-
One
+
+
The grid
+

The grid is just a 12-column fluid grid with a max width of 960px, but the max can be changed with one line of CSS. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

+
+
+
One
+
Eleven
-
+
+
Two
+
Ten
+
+
+
Three
+
Nine
+
+
+
Four
+
Eight
+
+
+
Five
+
Seven
+
+
+
Six
+
Six
+
+
+
Seven
+
Five
+
+
+
Eight
+
Four
+
+
+
Nine
+
Three
+
+
+
Ten
+
Two
+
+
+
Eleven
+
One
+
+
+ + + +
+	
+		

+			

+				
One

+				
Eleven

+			

+			

+				
Two

+				
Ten

+			

+			
+			

+				
Ten

+				
Two

+			

+			

+				
Eleven

+				
One

+			

 		

+	
+
+ + + +
-
-
-
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

-
-
-
-

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

-

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

-
-
-

Heading <h1> 50rem

-

Heading <h2> 42rem

-

Heading <h3> 36rem

-

Heading <h4> 30rem

-
Heading <h5> 24rem
-
Heading <h6> 15rem
-
+
+
Typography
+

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+
+
+
+

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

+
+
+

Heading <h1> 50rem

+

Heading <h2> 42rem

+

Heading <h3> 36rem

+

Heading <h4> 30rem

+
Heading <h5> 24rem
+
Heading <h6> 15rem
+ +
+	
+		

+			

+				
One

+				
Eleven

+			

+		

+	
+
+
-
-
-
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

-
- Anchor button - - Anchor button - -
+
+
Buttons
+

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

+
+ Anchor button + + Anchor button +
-
-
-
Forms
+
+
Forms
+

Forms are a huge pain, but hopefully these styles make it a bit easier.

+
+
+
+
+ + +
+
+ + +
+ + + + +
+
-
-
-
Lists
-
-
-
    -
  • Unordered lists have basic styles
    • -
  • - They use the circle list style -
      -
    • Nested lists styled to feel right
      • -
    • Can nest either type of list into the other
      • -
    -
    • -
  • Just more list items mama san
    • -
-
-
-
    -
  1. Ordered lists also have basic styles
    2. -
  2. - They use the decimal list style -
      -
    • Ordered and unordered can be nested
      • -
    • Can nest either type of list into the other
      • -
    -
    3. -
  3. Last list item just for the fun
    4. -
-
+
+
Lists
+
+
+
    +
  • Unordered lists have basic styles
    • +
  • + They use the circle list style +
      +
    • Nested lists styled to feel right
      • +
    • Can nest either type of list into the other
      • +
    +
    • +
  • Just more list items mama san
    • +
+
+
+
    +
  1. Ordered lists also have basic styles
    2. +
  2. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
      • +
    • Can nest either type of list into the other
      • +
    +
    3. +
  3. Last list item just for the fun
    4. +
-
-
-
Code
-

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

-
- 
.some-class {
  background-color: red
}
-
+
+
Code
+

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

+
+ 
.some-class {
  background-color: red
}
-
-
-
Tables
+
+
Tables
+

Only most basic styling for tabular data. Remember to always use a proper table structure – check the code example if you're not sure about it.

+
+ + + + + + + + + + + + + + + + + + + + + + + +
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
-
-
-
Media queries
+
+
Media queries
+

Skeleton uses media queries to serve the 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 is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. The sizes for the queries are:

+
+
+
    +
  • Desktop HD: 1200px
    • +
  • Desktop: 1000px
    • +
  • Tablet: 750px
    • +
+
+
+
    +
  • Phablet: 550px
    • +
  • Mobile: 400px
    • +
+
- -
-
-
Miscellaneous
-

hrs, images

-
+ +
+
Examples of Skeleton sites
+ +
+
License & Log
+

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

+
- - - - - - - - +
+ + + Show + Hide + code + +
+ + + diff --git a/stylesheets/base.css b/stylesheets/base.css deleted file mode 100644 index 1df668b..0000000 --- a/stylesheets/base.css +++ /dev/null @@ -1,230 +0,0 @@ -/* -* Skeleton V2.0 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 6/20/2014 -*/ - - -/* Basic Styles --------------------------------------------------- */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; -} -body { - background: #fff; - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; -} - - -/* Typography --------------------------------------------------- */ -h1, h2, h3, h4, h5, h6 { - font-weight: 300; - margin-top: 0; - margin-bottom: 2rem; -} -h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Links --------------------------------------------------- */ -a { - color: #1EAEDB; -} -a:hover, -a:focus { - color: #0FA0CE; -} - -/* Buttons --------------------------------------------------- */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - background-color: #33C3F0; - border-radius: 4px; - color: #FFF; - display: inline-block; - text-align: center; - font-size: 11px; - font-weight: 600; - text-decoration: none; - cursor: pointer; - height: 38px; - line-height: 38px; - padding: 0 30px; - border-width: 0; - letter-spacing: .1rem; - text-transform: uppercase; -} -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background-color: #1EAEDB; - color: #FFF; -} -.button:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - background-color: #1EAEDB; - color: #FFF; - outline: 0; -} - -.button.secondary, -button.secondary, -input[type="submit"].secondary, -input[type="reset"].secondary, -input[type="button"].secondary { - background-color: #B6B6B6; -} -.button.secondary:hover, -button.secondary:hover, -input[type="submit"].secondary:hover, -input[type="reset"].secondary:hover, -input[type="button"].secondary:hover { - background-color: #AAA; - color: #FFF; -} -.button.secondary:focus, -button.secondary:focus, -input[type="submit"].secondary:focus, -input[type="reset"].secondary:focus, -input[type="button"].secondary:focus { - background-color: #AAA; - color: #FFF; - outline: 0; -} - -.button-full-width { - width: 100%; - padding: 0; -} - - -/* Forms --------------------------------------------------- */ -input[type="email"], -input[type="search"], -input[type="text"], -input[type="password"], -textarea, -select { - border: 1px solid #B6B6B6; - height: 36px; - padding: 0 10px; - border-radius: 4px; - box-shadow: none; -} -input[type="email"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; -} -label, -legend { - display: block; - font-weight: 600; - margin-bottom: .3rem; -} -input[disabled] { - cursor: not-allowed; - background-color: #EFEFEF; -} -fieldset { - border-width: 0; - padding: 0; -} -input[type="checkbox"] { - display: inline; -} -label span, -legend span { - font-weight: normal; - margin-left: .5rem; -} - - -/* Lists --------------------------------------------------- */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; -} - - -/* Code --------------------------------------------------- */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; - white-space: nowrap; -} -pre { - padding: 1rem 1.5rem; - background: #F1F1F1; - font-size: 90%; - border: 1px solid #E1E1E1; - border-radius: 4px; -} - - -/* Spacing --------------------------------------------------- */ -input, -textarea, -select { - margin-bottom: 1.5rem; -} -p, -hr, -pre, -blockquote, -form, -dl, -figure, -table, -p, -ul, -ol { - margin-bottom: 2.5rem; -} \ No newline at end of file diff --git a/stylesheets/custom.css b/stylesheets/custom.css index d94655a..518d341 100644 --- a/stylesheets/custom.css +++ b/stylesheets/custom.css @@ -1,29 +1,24 @@ .container { - width: 760px; -} + max-width: 760px; } .header { - margin-top: 17rem; - text-align: center; -} + margin-top: 18rem; + text-align: center; } .value-props { margin-top: 15rem; - margin-bottom: 10rem; -} + margin-bottom: 10rem; } .docs-header { text-transform: uppercase; font-size: 1.4rem; letter-spacing: .2rem; - font-weight: 600; -} + font-weight: 600; } .docs-section { border-top: 1px solid #eee; - padding: 6rem 0; -} + padding: 4rem 0; + margin-bottom: 0;} .value-img { display: block; text-align: center; - margin: 0 auto 1rem; -} + margin: 0 auto 1rem;} .example-grid .column, .example-grid .columns { background: #EEE; @@ -33,41 +28,78 @@ text-transform: uppercase; height: 30px; line-height: 30px; - margin-bottom: 1.5rem; + margin-bottom: .75rem; font-weight: 600; - letter-spacing: .1rem; -} + letter-spacing: .1rem; } .docs-example .row, -.docs-example.row, -.docs-example pre, -.docs-example pre, -.docs-example .eleven.columns.alpha, -.docs-example .one.column.omega { - margin-bottom: 0; -} +.docs-example.row { + margin-bottom: 0; } .docs-example h1, .docs-example h2, .docs-example h3, .docs-example h4, .docs-example h5, .docs-example h6 { - margin-bottom: 1rem; -} - + margin-bottom: 1rem; } .heading-font-size { font-size: 1.2rem; color: #999; - letter-spacing: normal; + letter-spacing: normal; } +.code-example { + margin-top: 0; + margin-bottom: 0; + display: none; } +.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 only screen and (max-width: 1200px) { - .container { - width: 90%; - } -} - -@media only screen and (max-width: 800px) { - .container { - width: 85%; +@media (min-width: 550px) { + .example-grid .column, + .example-grid .columns { + margin-bottom: 1.5rem; } + .docs-section { + padding: 6rem 0; } + .example-send-yourself-copy { + float: right; + margin-top: 12px; } } diff --git a/stylesheets/layout.css b/stylesheets/layout.css deleted file mode 100644 index b99f451..0000000 --- a/stylesheets/layout.css +++ /dev/null @@ -1,58 +0,0 @@ -/* -* Skeleton V1.2 -* Copyright 2011, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 -*/ - -/* Table of Content -================================================== - #Site Styles - #Page Styles - #Media Queries - #Font-Face */ - -/* #Site Styles -================================================== */ - -/* #Page Styles -================================================== */ - -/* #Media Queries -================================================== */ - - /* Smaller than standard 960 (devices and browsers) */ - @media only screen and (max-width: 959px) {} - - /* Tablet Portrait size to standard 960 (devices and browsers) */ - @media only screen and (min-width: 768px) and (max-width: 959px) {} - - /* All Mobile Sizes (devices and browser) */ - @media only screen and (max-width: 767px) {} - - /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ - @media only screen and (min-width: 480px) and (max-width: 767px) {} - - /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ - @media only screen and (max-width: 479px) {} - - -/* #Font-Face -================================================== */ -/* This is the proper syntax for an @font-face file - Just create a "fonts" folder at the root, - copy your FontName into code below and remove - comment brackets */ - -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ \ No newline at end of file diff --git a/stylesheets/outdated.css b/stylesheets/outdated.css deleted file mode 100644 index 0a1cb51..0000000 --- a/stylesheets/outdated.css +++ /dev/null @@ -1,201 +0,0 @@ -h1, h2, h3, h4, h5, h6 { font-weight: normal; } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } - h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} - h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } - h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } - h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } - h5 { font-size: 17px; line-height: 24px; } - h6 { font-size: 14px; line-height: 21px; } - .subheader { color: #777; } - - p { margin: 0 0 20px 0; } - p img { margin: 0; } - p.lead { font-size: 21px; line-height: 27px; color: #777; } - - em { font-style: italic; } - strong { font-weight: bold; color: #333; } - small { font-size: 80%; } - -/* Blockquotes */ - blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } - blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } - blockquote cite { display: block; font-size: 12px; color: #555; } - blockquote cite:before { content: "\2014 \0020"; } - blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } - - hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } - - -/* #Links -================================================== */ - a, a:visited { color: #333; text-decoration: underline; outline: 0; } - a:hover, a:focus { color: #000; } - p a, p a:visited { line-height: inherit; } - - -/* #Lists -================================================== */ - ul, ol { margin-bottom: 20px; } - ul { list-style: none outside; } - ol { list-style: decimal; } - ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } - ul.square { list-style: square outside; } - ul.circle { list-style: circle outside; } - ul.disc { list-style: disc outside; } - ul ul, ul ol, - ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } - ul ul li, ul ol li, - ol ol li, ol ul li { margin-bottom: 6px; } - li { line-height: 18px; margin-bottom: 12px; } - ul.large li { line-height: 21px; } - li p { line-height: 21px; } - -/* #Images -================================================== */ - - img.scale-with-grid { - max-width: 100%; - height: auto; } - - -/* #Buttons -================================================== */ - - .button, - button, - input[type="submit"], - input[type="reset"], - input[type="button"] { - background: #eee; /* Old browsers */ - background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ - background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ - background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ - background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ - background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ - background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ - border: 1px solid #aaa; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - color: #444; - display: inline-block; - font-size: 11px; - font-weight: bold; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, .75); - cursor: pointer; - margin-bottom: 20px; - line-height: normal; - padding: 8px 10px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - - .button:hover, - button:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover { - color: #222; - background: #ddd; /* Old browsers */ - background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ - background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ - background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ - background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ - background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ - background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ - border: 1px solid #888; - border-top: 1px solid #aaa; - border-left: 1px solid #aaa; } - - .button:active, - button:active, - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active { - border: 1px solid #666; - background: #ccc; /* Old browsers */ - background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ - background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ - background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ - background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ - background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ - background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } - - .button.full-width, - button.full-width, - input[type="submit"].full-width, - input[type="reset"].full-width, - input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - - /* Fix for odd Mozilla border & padding issues */ - button::-moz-focus-inner, - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - -/* #Forms -================================================== */ - - form { - margin-bottom: 20px; } - fieldset { - margin-bottom: 20px; } - input[type="text"], - input[type="password"], - input[type="email"], - textarea, - select { - border: 1px solid #ccc; - padding: 6px 4px; - outline: none; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777; - margin: 0; - width: 210px; - max-width: 100%; - display: block; - margin-bottom: 20px; - background: #fff; } - select { - padding: 0; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - textarea:focus { - border: 1px solid #aaa; - color: #444; - -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); - -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); - box-shadow: 0 0 3px rgba(0,0,0,.2); } - textarea { - min-height: 60px; } - label, - legend { - display: block; - font-weight: bold; - font-size: 13px; } - select { - width: 220px; } - input[type="checkbox"] { - display: inline; } - label span, - legend span { - font-weight: normal; - font-size: 13px; - color: #444; } - -/* #Misc -================================================== */ - .remove-bottom { margin-bottom: 0 !important; } - .half-bottom { margin-bottom: 10px !important; } - .add-bottom { margin-bottom: 20px !important; } diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index c5a2aad..e9fae80 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -1,105 +1,355 @@ /* -* Skeleton V1.2 -* Copyright 2011, Dave Gamache +* Skeleton V2.0 +* Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 +* 11/25/2014 */ -/* Table of Contents -================================================== - #Base 960 Grid - #Tablet (Portrait) - #Mobile (Portrait) - #Mobile (Landscape) - #Clearing */ +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* #Base 960 Grid -================================================== */ +.container { + position: relative; + width: 80%; + max-width: 960px; + margin: 0 auto; + padding: 0; } +.container .column, +.container .columns { + float: left; + width: 100%; + box-sizing: border-box; } +.row { + margin-bottom: 20px; } +.row .column:first-child, +.row .columns:first-child { + margin-left: 0; } - .container { position: relative; max-width: 960px; margin: 0 auto; padding: 0; } - .container .column, - .container .columns { float: left; margin-left: 4%; box-sizing: border-box;} - .row { margin-bottom: 20px; } - .row .column:first-child, - .row .columns:first-child { margin-left: 0; } +@media (min-width: 550px) { + + .container .column, + .container .columns { + margin-left: 4%; } + + .container .one.column, + .container .one.columns { width: 4.66666666667%; } + .container .two.columns { width: 13.3333333333%; } + .container .three.columns { width: 22%; } + .container .four.columns { width: 30.6666666667%; } + .container .five.columns { width: 39.3333333333%; } + .container .six.columns { width: 48%; } + .container .seven.columns { width: 56.6666666667%; } + .container .eight.columns { width: 65.3333333333%; } + .container .nine.columns { width: 74.0%; } + .container .ten.columns { width: 82.6666666667%; } + .container .eleven.columns { width: 91.3333333333%; } + .container .twelve.columns { width: 100%; margin-left: 0; } + .container .one-third.column { width: 30.6666666667%; } + .container .two-thirds.column { width: 65.3333333333%; } - /* Nested Column Classes */ - .column.alpha, .columns.alpha { margin-left: 0; } - .column.omega, .columns.omega { margin-right: 0; } + .container .one-half.column { width: 48%; } - /* Base Grid */ - .container .one.column, - .container .one.columns { width: 4.66666666667%; } - .container .two.columns { width: 13.3333333333%; } - .container .three.columns { width: 22%; } - .container .four.columns { width: 30.6666666667%; } - .container .five.columns { width: 39.3333333333%; } - .container .six.columns { width: 48%; } - .container .seven.columns { width: 56.6666666667%; } - .container .eight.columns { width: 65.3333333333%; } - .container .nine.columns { width: 74.0%; } - .container .ten.columns { width: 82.6666666667%; } - .container .eleven.columns { width: 91.3333333333%; } - .container .twelve.columns { width: 100%; } - - .container .one-third.column { width: 30.6666666667%; } - .container .two-thirds.column { width: 48%; } - - - -/* #Tablet (Portrait) -================================================== */ - -@media only screen and (max-width: 1200px) { - .container { - width: 85%; - } -} - -@media only screen and (max-width: 800px) { - .container { - width: 80%; - } } -/* #Clearing -================================================== */ +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } +body { + background: #fff; + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } - /* Self Clearing Goodness */ - .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } - /* Use clearfix class on parent to clear nested columns, - or wrap each row of columns in a
*/ - .clearfix:before, - .clearfix:after, - .row:before, - .row:after { - content: '\0020'; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - .row:after, - .clearfix:after { - clear: both; } - .row, - .clearfix { - zoom: 1; } +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + margin-top: 0; + margin-bottom: 2rem; } +h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;} +h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - /* You can also use a
to clear columns */ - .clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; - } + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } +a:hover, +a:focus { + color: #0FA0CE; } + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + background-color: transparent; + border-radius: 4px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + border: 1px solid #bbb; + height: 38px; + line-height: 38px; + padding: 0 30px; + letter-spacing: .1rem; + text-transform: uppercase; + white-space: nowrap; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + border-color: #888; + color: #333; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + border-color: #33C3F0; + background-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + background-color: #1EAEDB; + border-color: #1EAEDB; + color: #FFF; } + + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="search"], +input[type="text"], +input[type="password"], +textarea, +select { + border: 1px solid #D1D1D1; + height: 36px; + padding: 0 10px; + border-radius: 4px; + box-shadow: none; } +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } +label, +legend { + display: block; + font-weight: 600; + margin-bottom: .5rem; } +input[disabled] { + cursor: not-allowed; + background-color: #EFEFEF; } +fieldset { + border-width: 0; + padding: 0; } +input[type="checkbox"] { + display: inline; } +label > .label-body { + font-weight: normal; + margin-left: .5rem; + display: inline-block; } + + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + margin-top: 0; + padding-left: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; + white-space: nowrap; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: normal; } + + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } + + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +p, +hr, +pre, +blockquote, +form, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons secion and style it +there. +*/ + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than phablet */ +@media (min-width: 550px) {} + +/* Larger than mobile */ +@media (min-width: 400px) {} + +/* Smaller than Desktop HD */ +@media (max-width: 1199px) {} + +/* Smaller than desktop */ +@media (max-width: 999px) {} + +/* Smaller than tablet */ +@media (max-width: 749px) {} + +/* Smaller than phablet */ +@media (max-width: 549px) {} + +/* Smaller than mobile */ +@media (max-width: 399px) {} \ No newline at end of file From 4785e60a39bd11858006b433b3f1f00400ea47c7 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 11:30:23 -0800 Subject: [PATCH 03/62] adding some real code styling to the docs to make them legible and starting to add the docs code content --- index.html | 683 +++++++++++++------------- scripts/site.js | 58 +++ stylesheets/custom.css | 8 +- stylesheets/github-prettify-theme.css | 149 ++++++ 4 files changed, 564 insertions(+), 334 deletions(-) create mode 100644 scripts/site.js create mode 100644 stylesheets/github-prettify-theme.css diff --git a/index.html b/index.html index 2467652..b219e70 100644 --- a/index.html +++ b/index.html @@ -2,381 +2,400 @@ - - - Your Page Title Here - - + + Your Page Title Here + + - - + - - + - - - + + - - + + + + + + + + - + - -
-
-

A dead simple, responsive boilerplate.

- Download -
-
- - Super light at less than a kb & built with mobile in mind. -
-
- - Styles designed to be a starting point, not a UI framework. -
-
- - No compiling or installing necessary. Just vanilla CSS. -
-
-
+ +
+
+

A dead simple, responsive boilerplate.

+ Download +
+
+ + Super light at less than a kb & built with mobile in mind. +
+
+ + Styles designed to be a starting point, not a UI framework. +
+
+ + No compiling or installing necessary. Just vanilla CSS. +
+
+
- - -
-
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 less than 100 lines of custom CSS.

-

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

- - - - - -
+ +
+
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 less than 100 lines of custom CSS.

+

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

+ + + + + +
- -
-
The grid
-

The grid is just a 12-column fluid grid with a max width of 960px, but the max can be changed with one line of CSS. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

-
-
-
One
-
Eleven
-
-
-
Two
-
Ten
-
-
-
Three
-
Nine
-
-
-
Four
-
Eight
-
-
-
Five
-
Seven
-
-
-
Six
-
Six
-
-
-
Seven
-
Five
-
-
-
Eight
-
Four
-
-
-
Nine
-
Three
-
-
-
Ten
-
Two
-
-
-
Eleven
-
One
-
-
- + +
+
The grid
+

The grid is just a 12-column fluid grid with a max width of 960px, 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 responsive implementation much, much easier. Go ahead, resize the browser.

+
+
+
One
+
Eleven
+
+
+
Two
+
Ten
+
+
+
Three
+
Nine
+
+
+
Four
+
Eight
+
+
+
Five
+
Seven
+
+
+
Six
+
Six
+
+
+
Seven
+
Five
+
+
+
Eight
+
Four
+
+
+
Nine
+
Three
+
+
+
Ten
+
Two
+
+
+
Eleven
+
One
+
+
+ 
-	
-		

-			

-				
One

-				
Eleven

-			

-			

-				
Two

-				
Ten

-			

-			
-			

-				
Ten

-				
Two

-			

-			

-				
Eleven

-				
One

-			

-		

-	
+
+

+  
+  
+  

+    
One

+    
Eleven

+  

+
+  
+  

+    
Two

+    
Ten

+  

+
+  
+  

+    
1/3

+    
2/3

+  

+  

+    
1/2

+    
1/2

+  

+
+

+
+
+
- -
- -
-
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

-
-
-
-

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

-

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

-
-
-

Heading <h1> 50rem

-

Heading <h2> 42rem

-

Heading <h3> 36rem

-

Heading <h4> 30rem

-
Heading <h5> 24rem
-
Heading <h6> 15rem
-
-
-
- +
+ + +
+
Typography
+

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+
+
+
+

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

+
+
+

Heading <h1> 50rem

+

Heading <h2> 42rem

+

Heading <h3> 36rem

+

Heading <h4> 30rem

+
Heading <h5> 24rem
+
Heading <h6> 15rem
+
+
+
+ + + 
-	
-		

-			

-				
One

-				
Eleven

-			

-		

-	
+
+
Heading

+
Heading

+
Heading

+
Heading

+
Heading

+
Heading

+
+
+
The base type is 15px over 1.6 line height (24px)

+
+
+Bolded
+Italicized
+Colored
+Underlined
+
-
- -
-
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

-
- Anchor button - - Anchor button - -
-
- -
-
Forms
-

Forms are a huge pain, but hopefully these styles make it a bit easier.

-
-
-
-
- - -
-
- - -
- - - - -
-
-
-
+
- -
-
Lists
-
-
-
    -
  • Unordered lists have basic styles
    • -
  • - They use the circle list style -
      -
    • Nested lists styled to feel right
      • -
    • Can nest either type of list into the other
      • -
    -
    • -
  • Just more list items mama san
    • -
-
-
-
    -
  1. Ordered lists also have basic styles
    2. -
  2. - They use the decimal list style -
      -
    • Ordered and unordered can be nested
      • -
    • Can nest either type of list into the other
      • -
    -
    3. -
  3. Last list item just for the fun
    4. -
-
-
-
+ +
+
Buttons
+

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent.

+
+
+ Anchor button + + + +
+
+ Anchor button + + + +
+
- -
-
Code
-

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

-
- 
.some-class {
  background-color: red
}
-
-
- -
-
Tables
-

Only most basic styling for tabular data. Remember to always use a proper table structure – check the code example if you're not sure about it.

-
- - - - - - - - - - - - - - - - - - - - - - - -
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
-
-
+ +
+
+Anchor button
+
+
+
 
-		
-		

-			
Media queries

-			
Skeleton uses media queries to serve the 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 is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. The sizes for the queries are:

-			

-				

-					
    
-						
  • Desktop HD: 1200px
    • 
-						
  • Desktop: 1000px
    • 
-						
  • Tablet: 750px
    • 
-					
					
-				

-				

-					
    
-						
  • Phablet: 550px
    • 
-						
  • Mobile: 400px
    • 
-					
					
-				

-			

-		

+
+Anchor button
+
+
+
+
+
+ - -
-
Examples of Skeleton sites
-
- -
-
License & Log
-

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

-
+
-
- - - Show - Hide - code - -
+ +
+
Forms
+

Forms are a huge pain, but hopefully these styles make it a bit easier.

+
+
+
+
+ + +
+
+ + +
+ + + + +
+
+
+
-
+ +
+
Lists
+
+
+
    +
  • Unordered lists have basic styles
    • +
  • + They use the circle list style +
      +
    • Nested lists styled to feel right
      • +
    • Can nest either type of list into the other
      • +
    +
    • +
  • Just more list items mama san
    • +
+
+
+
    +
  1. Ordered lists also have basic styles
    2. +
  2. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
      • +
    • Can nest either type of list into the other
      • +
    +
    3. +
  3. Last list item just for the fun
    4. +
+
+
+
- - + +
+
License & Log
+

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

+
+
+ + + Code + hidden + visible + +
+ +
+ –––––––––––––––––––––––––––––––––––––––––––––––––– --> \ No newline at end of file diff --git a/scripts/site.js b/scripts/site.js new file mode 100644 index 0000000..0a74ea3 --- /dev/null +++ b/scripts/site.js @@ -0,0 +1,58 @@ +$(document).ready(function() { + + // Variables + var codeIsActive = true, + $codeSnippets = $('.code-example-body'), + $sections = $('.docs-section'), + $window = $(window), + entityMap = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', + "/": '/' + } + + function init() { + $('.code-toggler').on('click', toggleCode) + buildSnippets(); + } + + function escapeHtml(string) { + return String(string).replace(/[&<>"'\/]/g, function (s) { + return entityMap[s]; + }); + } + + function buildSnippets() { + $codeSnippets.each(function() { + var newContent = escapeHtml($(this).html()) + $(this).html(newContent) + }) + } + + 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(); + +}); \ No newline at end of file diff --git a/stylesheets/custom.css b/stylesheets/custom.css index 518d341..005eaab 100644 --- a/stylesheets/custom.css +++ b/stylesheets/custom.css @@ -32,7 +32,8 @@ font-weight: 600; letter-spacing: .1rem; } .docs-example .row, -.docs-example.row { +.docs-example.row, +.docs-example form { margin-bottom: 0; } .docs-example h1, .docs-example h2, @@ -46,10 +47,13 @@ color: #999; letter-spacing: normal; } .code-example { - margin-top: 0; + margin-top: 1.5rem; margin-bottom: 0; display: none; } +.code-example-body { + white-space: pre; +} .code-snippets-visible .code-example { display: block; } diff --git a/stylesheets/github-prettify-theme.css b/stylesheets/github-prettify-theme.css new file mode 100644 index 0000000..7dd0a0d --- /dev/null +++ b/stylesheets/github-prettify-theme.css @@ -0,0 +1,149 @@ +/* GitHub Theme */ +.prettyprint { + background: #fff; + font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; + font-size: 1.2rem; + padding: 2.5rem 3rem; + -webkit-font-smoothing: antialiased; +} + +.pln { + color: #333333; +} + +@media screen { + .str { + color: #dd1144; + } + + .kwd { + color: #333333; + } + + .com { + color: #999988; + } + + .typ { + color: #445588; + } + + .lit { + color: #445588; + } + + .pun { + color: #333333; + } + + .opn { + color: #333333; + } + + .clo { + color: #333333; + } + + .tag { + color: navy; + } + + .atn { + color: teal; + } + + .atv { + color: #dd1144; + } + + .dec { + color: #333333; + } + + .var { + color: teal; + } + + .fun { + color: #990000; + } +} +@media print, projection { + .str { + color: #006600; + } + + .kwd { + color: #006; + font-weight: bold; + } + + .com { + color: #600; + font-style: italic; + } + + .typ { + color: #404; + font-weight: bold; + } + + .lit { + color: #004444; + } + + .pun, .opn, .clo { + color: #444400; + } + + .tag { + color: #006; + font-weight: bold; + } + + .atn { + color: #440044; + } + + .atv { + color: #006600; + } +} +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin-top: 0; + margin-bottom: 0; +} + +/* IE indents via margin-left */ +li.L0, +li.L1, +li.L2, +li.L3, +li.L4, +li.L5, +li.L6, +li.L7, +li.L8, +li.L9 { + /* */ +} + +/* Alternate shading for lines */ +li.L1, +li.L3, +li.L5, +li.L7, +li.L9 { + /* */ +} + +/* My additional styles */ + +/*li.L0, li.L1, li.L2, li.L3, +li.L5, li.L6, li.L7, li.L8 +{ list-style-type: decimal !important }*/ + +.prettyprint li { + margin-bottom: .3rem; +} \ No newline at end of file From c8a28fcda2e3047288039a76660b73cef36b6ab4 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 12:59:46 -0800 Subject: [PATCH 04/62] adding readme and small cleanup --- README.md | 52 +++++++++++ index.html | 184 ++++++++++++++++++++++++++++++++++++--- stylesheets/custom.css | 2 + stylesheets/skeleton.css | 24 ++--- 4 files changed, 238 insertions(+), 24 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..17c7fbc --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# [Skeleton](http://getskeleton.com) +Skeleton is a simple, responsive boilerplate to kickstart any responsive project. + +Check out for documentation and details. + +## Getting started + +There are a couple ways to download Skeleton: +- [Download the tarball from Github](). +- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`. + + +### What's in the download? + +The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. + +``` +skeleton/ +├── index.html +├── css/ +│ ├── normalize.min.css +│ ├── skeleton.css +│ └── skeleton.min.css +└── images/ + └── favicon.ico +``` + +### Why it's awesome + +Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. +- Minified, it's less than a kb +- It's a starting point, not a UI framework +- No compiling or installing...just vanilla CSS + + +## Browser support + +- Chrome +- Firefox 5+ +- Opera +- Safari 6+ +- IE 8+ + + +## Acknowledgement + +Skeleton was created by [Dave Gamache](https://twitter.com/dhg). + + +## License + +All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php). \ No newline at end of file diff --git a/index.html b/index.html index b219e70..5a92fc0 100644 --- a/index.html +++ b/index.html @@ -259,23 +259,64 @@
- - + +
- - + +
- - - -
+ + + +
+ + + +
+
+

+  

+    

+      
+      
+    

+    

+      
+      
+    

+  

+  
+  
+  
+  
+

+
+
+
+
+
+
+ + +
@@ -309,6 +350,28 @@
+ + + +
+
    
+  
  • Item 1
    • 
+  
  • 
+    Item 2
+    
      
+      
    • Item 2.1
      • 
+      
    • Item 2.2
      • 
+    
    
+  
    • 
+  
  • Item 3
    • 
+

+
+
+
+
+ + +
@@ -316,14 +379,30 @@
Code

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code> tag with a <pre> tag.

- 
.some-class {
  background-color: red
}
+
.some-class {
+  background-color: red;
+}
+ + + +
+
.some-class {
+  background-color: red;
+}

+
+
+
+
+ + +
Tables
-

Only most basic styling for tabular data. Remember to always use a proper table structure – check the code example if you're not sure about it.

+

Only super basic styling for tabular data. Using properly formed table markup with <thead> and <tbody> is important here.

@@ -350,6 +429,39 @@
+ + + +
+
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward

+
+
+ + +
@@ -371,6 +483,51 @@
+ + + +
+/* Mobile first queries */
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+/* Desktop first queries */
+
+/* Smaller than Desktop HD */
+@media (max-width: 1199px) {}
+
+/* Smaller than desktop */
+@media (max-width: 999px) {}
+
+/* Smaller than tablet */
+@media (max-width: 749px) {}
+
+/* Smaller than phablet */
+@media (max-width: 549px) {}
+
+/* Smaller than mobile */
+@media (max-width: 399px) {}
+
+/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
+
+
+ + +
@@ -382,6 +539,7 @@
License & Log

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

+

Skeleton's version history is available on Github.

diff --git a/stylesheets/custom.css b/stylesheets/custom.css index 005eaab..8725f58 100644 --- a/stylesheets/custom.css +++ b/stylesheets/custom.css @@ -53,6 +53,8 @@ } .code-example-body { white-space: pre; + /*overflow: auto;*/ + word-wrap: break-word } .code-snippets-visible .code-example { display: block; diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index e9fae80..5dae9af 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -185,7 +185,8 @@ select { height: 36px; padding: 0 10px; border-radius: 4px; - box-shadow: none; } + box-shadow: none; + background: #fff; } textarea { min-height: 65px; padding-top: 6px; @@ -249,7 +250,7 @@ code { pre > code { display: block; padding: 1rem 1.5rem; - white-space: normal; } + white-space: pre; } /* Tables @@ -324,20 +325,21 @@ on small devices, paste the mobile query code up in the buttons secion and style there. */ -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} +/* Larger than mobile */ +@media (min-width: 400px) {} /* Larger than phablet */ @media (min-width: 550px) {} -/* Larger than mobile */ -@media (min-width: 400px) {} +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {} /* Smaller than Desktop HD */ @media (max-width: 1199px) {} From 90a2980999f1a30e36fc506481b5c2bfb0dd6296 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 13:01:14 -0800 Subject: [PATCH 05/62] updating readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 17c7fbc..05e4fb8 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the tarball from Github](). -- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`. +- [Download the tarball](). +- Clone the repo: `git clone https://github.com/dhg/Skeleton.git`. ### What's in the download? @@ -44,7 +44,7 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few ## Acknowledgement -Skeleton was created by [Dave Gamache](https://twitter.com/dhg). +Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. ## License From 0c19f0646944ad53a774122dc36bc73a8cc1ea4a Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 13:02:19 -0800 Subject: [PATCH 06/62] updating readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 05e4fb8..628d36c 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the tarball](). -- Clone the repo: `git clone https://github.com/dhg/Skeleton.git`. +- [Download the zip](https://github.com/dhg/Skeleton/archive/v-2.0.zip) +- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` ### What's in the download? From 4f8392275a52384e4281aa0f71f23c041e6784e1 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 18:26:32 -0800 Subject: [PATCH 07/62] removing old icons and adding new. Adding colophon. Cleaning up a few other things probably --- images/favicon.ico | Bin 1150 -> 0 bytes images/favicon.png | Bin 0 -> 1156 bytes images/feather.svg | 12 +++++ images/feathers.svg | 6 --- images/frame.svg | 19 -------- images/pens.svg | 21 +++++++++ images/watch.svg | 18 ++++++++ index.html | 94 ++++++++++++++++++++++++++++++--------- stylesheets/custom.css | 20 ++++++--- stylesheets/skeleton.css | 51 ++++++++++++++++----- 10 files changed, 178 insertions(+), 63 deletions(-) delete mode 100644 images/favicon.ico create mode 100644 images/favicon.png create mode 100644 images/feather.svg delete mode 100644 images/feathers.svg delete mode 100644 images/frame.svg create mode 100644 images/pens.svg create mode 100644 images/watch.svg diff --git a/images/favicon.ico b/images/favicon.ico deleted file mode 100644 index 821c69175467b68fb452fe951d9c8f64ab439b54..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1150 zcmb_cF{*<=5M9MUARxhnUj-9T)Yc+5Fc(PS8SK(pS*NhE)FXHS3v0WSIYAB(@C5Vs z?PtVqk|N;B?2NPf-nAvF1{*Fx?Gkr+b!2q6M#G9@#AdFh0ZXVax=8o_j3|K~aX zjh}<#+j^_jO6i{BEX$(P>7)$t^c-4YzVFj^yB&H*?s~n_bRqYS19;eezo+GLNokrY zXkFJseZ*LC9KUcd9^UgjDvE;IwxzLV;IP0A4LoPWV?4*M>rxnolq3n2Wl7KHQ{gcW z?qS?Nid4s@OV5_e81lZKE7|;_DhaAFaz`e agC_LBxVb#f41AyBxoUmlnf?#Heg6d*C!a0= diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7a3c81c1e32b4e4224452cf8261a585480caa0ea GIT binary patch literal 1156 zcmV-~1bh35P)Px(K1oDDR9FeUS6ygSR}lVo-6obMX;utd(pYw*xM;*axQ4d&FA%IGA~hPSg!&Re z%!{H3LD7)Nf>mf~DXa7+587b*Vq0rT+y^!IQ_&TXVq{}Xg2tsmWK$E{Rg$dV+}vF6 z#`_m=J8(F2&&-)`&YW}R%yq#z<@o*n3YW{ZhEo=^6_YQP>FIPj!A@E?`I7?!182!U zWwRxhod!YQaJ$|6s8`2UV5hIjAF*$nn3!mxGk;snv2q|c5D4ty$oVx(v2fUKIJzp%YyG-;+|bmTJITBB&Z-~d;>l)!%wq-3T*Hu{5vvj{FwB`QX)d;Q(oi9$K)StVkW z6c!eyhlhvdszTWU_0aWF=-{;b&=3w|^@mIFWhm}D9??d2iK8!I63Xsg){iGSF*2TdhFu$i_?LHwo`odIDct3 zl;>}naw>Tj*DjvJug8wyM9k^>l~=UK#Tzg}dsgRKg9|nMfVQ0#T)#Obt{lbsjm=KC zVN{<9&8@1ESY$JTRl9KNN*u|Qv3ha&CbWO;=u(M+wDT=6zzcm;gX)@ER92Rw`1u6^ zQrGcW*?Pnb=IDo*jCv#jQpq@?hQmh@t_x|pv91$n-nJ1Rl)Z;jcTGZ~X&W*LaiH5! zG<`7Cge@yqU_;B#h((X1slEn5pQ_|r0k7m_jb4F+oG#kkE+&IdSaNl0b4{3V^d>gw z648{}SSkh2Y<>K>1Mzm0RqdHlG41&@uX6K2kXK1+I7_;Js~2Mi8q>jn2l#QHJvdE0 z5^Q;n$C-@YV!zzLzBY8VvmM`_z722DTolcD9r>@y6QZXvB;s8-v}p~#%cyzuIvIRx zGMPN7yoNJ-j#VQ*A42oyVT4&EKYs-GVsWQ;U&{E*=U7ZKBepOj?#=KqOCNM#KPzP^ z^(PAw6-UbOb9CaRRKjMy6Z|s4Kc-wM)AgC~359DZkm@yCG^k=|{|I^qASDtNs)?Qr zC&XrzVCYw;976qo@am!bUw%xqs#xy?E7noApQL)_c!=j>`km9OoAQjN6bD~$&+BRL zA0tIW2UNvzDV^y=D; + + + feather + Created with Sketch Beta. + + + + + + + \ No newline at end of file diff --git a/images/feathers.svg b/images/feathers.svg deleted file mode 100644 index cc2fdb7..0000000 --- a/images/feathers.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/images/frame.svg b/images/frame.svg deleted file mode 100644 index 21350ac..0000000 --- a/images/frame.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Group - Created with Sketch Beta. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/images/pens.svg b/images/pens.svg new file mode 100644 index 0000000..8f94436 --- /dev/null +++ b/images/pens.svg @@ -0,0 +1,21 @@ + + + + pens + Created with Sketch Beta. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/watch.svg b/images/watch.svg new file mode 100644 index 0000000..b6b16c6 --- /dev/null +++ b/images/watch.svg @@ -0,0 +1,18 @@ + + + + watch + Created with Sketch Beta. + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5a92fc0..8b3f602 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Your Page Title Here + Skeleton: Responsive CSS Boilerplate @@ -33,6 +33,7 @@ + @@ -41,20 +42,24 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-

A dead simple, responsive boilerplate.

+

A dead simple, responsive boilerplate.

Download
-
- - Super light at less than a kb & built with mobile in mind. +
+ + Light as a feather at less than a kb & built with mobile in mind. +
-
- +
+ + + Styles designed to be a starting point, not a UI framework.
-
- - No compiling or installing necessary. Just vanilla CSS. +
+ + + Quick to start with zero compiling or installing necessary.
@@ -66,8 +71,8 @@
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 less than 100 lines of custom CSS.

-

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

+

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.

+

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

@@ -78,7 +83,7 @@
The grid
-

The grid is just a 12-column fluid grid with a max width of 960px, 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 responsive implementation much, much easier. Go ahead, resize the browser.

+

The grid is a 12-column fluid grid with a max width of 960px, 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.

One
@@ -167,11 +172,11 @@
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

-

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

@@ -214,7 +219,7 @@
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent.

+

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary 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 .button class.

Anchor button @@ -254,7 +259,7 @@
Forms
-

Forms are a huge pain, but hopefully these styles make it a bit easier.

+

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.

@@ -377,7 +382,7 @@
Code
-

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code> tag with a <pre> tag.

+

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
   background-color: red;
@@ -402,7 +407,7 @@
     
     

       
Tables

-      
Only super basic styling for tabular data. Using properly formed table markup with <thead> and <tbody> is important here.

+      
Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

       

         
@@ -467,7 +472,7 @@
     

       
Media queries

-      
Skeleton uses media queries to serve the 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 is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. The sizes for the queries are:

+      
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 min-width. The other set is desktop-first, meaning  it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

       

         

           
    
@@ -528,6 +533,45 @@
 
 
 
+    

+
+
+    
+    

+      
Utilities

+      
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.

+
+
+
+
+/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+/* Clear a float */
+.u-cf { 
+  content: "";
+  display: table;
+  clear: both; }
+
+

+
+
+
     

 
     
@@ -535,13 +579,19 @@
       
Examples of Skeleton sites

     

 
-    
+    
     

-      
License & Log

+      
License

       
All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

       
Skeleton's version history is available on Github.

     

 
+    
+    

+      
Colophon

+      
Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

+    

+
     

       
       
diff --git a/stylesheets/custom.css b/stylesheets/custom.css
index 8725f58..7c87a17 100644
--- a/stylesheets/custom.css
+++ b/stylesheets/custom.css
@@ -1,11 +1,14 @@
 .container {
   max-width: 760px; }
 .header {
-  margin-top: 18rem;
+  margin-top: 6rem;
   text-align: center; }
+.value-prop {
+  margin-top: 1rem;
+}
 .value-props {
-  margin-top: 15rem;
-  margin-bottom: 10rem; }
+  margin-top: 4rem;
+  margin-bottom: 4rem; }
 .docs-header {
   text-transform: uppercase;
   font-size: 1.4rem;
@@ -18,7 +21,7 @@
 .value-img {
   display: block;
   text-align: center;
-  margin: 0 auto 1rem;}
+  margin: 2.5rem auto 0; }
 .example-grid .column,
 .example-grid .columns {
   background: #EEE;
@@ -99,6 +102,13 @@
   display: none; }
 
 @media (min-width: 550px) {
+  .header {
+    margin-top: 18rem; }
+  .value-props {
+    margin-top: 9rem;
+    margin-bottom: 7rem; }
+  .value-img {
+    margin-bottom: 1rem; }
   .example-grid .column,
   .example-grid .columns {
     margin-bottom: 1.5rem; }
@@ -108,4 +118,4 @@
     float: right;
     margin-top: 12px;
   }
-}
+}
\ No newline at end of file
diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css
index 5dae9af..cbe037d 100644
--- a/stylesheets/skeleton.css
+++ b/stylesheets/skeleton.css
@@ -96,13 +96,23 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: 300;
 	margin-top: 0;
 	margin-bottom: 2rem; }
-h1 { font-size: 5.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.6rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 2.4rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
 
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -183,10 +193,19 @@ textarea,
 select {
 	border: 1px solid #D1D1D1;
 	height: 36px;
-	padding: 0 10px;
+	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
 	border-radius: 4px;
 	box-shadow: none;
   background: #fff; }
+/* Removes awkard default styles on some inputs */
+input[type="email"],
+input[type="search"],
+input[type="text"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
 textarea {
 	min-height: 65px;
 	padding-top: 6px;
@@ -204,13 +223,11 @@ legend {
   display: block;
   font-weight: 600;
   margin-bottom: .5rem; }
-input[disabled] {
-	cursor: not-allowed;
-	background-color: #EFEFEF; }
 fieldset {
 	border-width: 0;
 	padding: 0; }
-input[type="checkbox"] {
+input[type="checkbox"],
+input[type="radio"] {
   display: inline; }
 label > .label-body {
   font-weight: normal;
@@ -279,7 +296,6 @@ select,
 fieldset {
 	margin-bottom: 1.5rem; }
 p,
-hr,
 pre,
 blockquote,
 form,
@@ -293,17 +309,30 @@ form {
 	margin-bottom: 2.5rem; }
 
 
+
 /* Utilities
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .u-full-width {
   width: 100%;
   box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
 .u-pull-right {
 	float: right; }
 .u-pull-left {
 	float: left; }
 
 
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1;
+}
+
 /* Clearing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 

From a4ab5f6f4ea15bcf257d6fd47c56ce138e78ebbb Mon Sep 17 00:00:00 2001
From: Dave Gamache 
Date: Mon, 1 Dec 2014 20:05:29 -0800
Subject: [PATCH 08/62] starting to implement a docking nav?

---
 index.html             |  61 ++++++++++++++-----
 scripts/site.js        |  43 ++++++-------
 stylesheets/custom.css | 135 ++++++++++++++++++++++++++++-------------
 3 files changed, 156 insertions(+), 83 deletions(-)

diff --git a/index.html b/index.html
index 8b3f602..b79177e 100644
--- a/index.html
+++ b/index.html
@@ -48,25 +48,63 @@
         

           
           Light as a feather at less than a kb & built with mobile in mind.
-          
         

         

           
-          
-          
           Styles designed to be a starting point, not a UI framework.
         

         

           
-          
           Quick to start with zero compiling or installing necessary.
         

       

     
 
-    
+    

+    
 
     
     

@@ -592,15 +630,6 @@
       
Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

     

 
-    

-      
-      
-        Code
-        hidden
-        visible
-      
-    

-
   

-    

+    

       
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.

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

@@ -119,7 +119,7 @@
     

 
     
-    

+    

       
The grid

       
The grid is a 12-column fluid grid with a max width of 960px, 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. 

       

@@ -208,7 +208,7 @@
     
    
 
     
-    

+    

       
Typography

       
Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

       

@@ -255,7 +255,7 @@
     

 
     
-    

+    

       
Buttons

       
Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary 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 .button class.

       

@@ -295,7 +295,7 @@
     
  
 
     
-    

+    

       
Forms

       
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.

       

@@ -363,7 +363,7 @@
     

 
     
-    

+    

       
Lists

       

         

@@ -418,7 +418,7 @@
     

 
     
-    

+    

       
Code

       
Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

       

@@ -443,7 +443,7 @@
     

 
     
-    

+    

       
Tables

       
Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

       

@@ -508,7 +508,7 @@
     

 
     
-    

+    

       
Media queries

       
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 min-width. The other set is desktop-first, meaning  it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

       

@@ -575,7 +575,7 @@
 
 
     
-    

+    

       
Utilities

       
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.

 
@@ -613,19 +613,19 @@
     

 
     
-    

-      
Examples of Skeleton sites

+    

+      
Examples

     

 
     
-    

+    

       
License

       
All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

       
Skeleton's version history is available on Github.

     

 
     
-    

+    

       
Colophon

       
Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

     

diff --git a/scripts/site.js b/scripts/site.js
index 09877b2..59f8c65 100644
--- a/scripts/site.js
+++ b/scripts/site.js
@@ -5,7 +5,9 @@ $(document).ready(function() {
       $nav = $('.navbar'),
       $body = $('body'),
       $window = $(window),
+      $popoverLink = $('[data-popover]'),
       navOffsetTop = $nav.offset().top,
+      $document = $(document),
       entityMap = {
         "&": "&",
         "<": "<",
@@ -18,9 +20,45 @@ $(document).ready(function() {
   function init() {
     $window.on('scroll', onScroll)
     $window.on('resize', resize)
+    $popoverLink.on('click', openPopover)
+    $document.on('click', closePopover)
+    $('a[href^="#"]').on('click', smoothScroll)
     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() {
     navOffsetTop = $nav.offset().top
   }
diff --git a/stylesheets/custom.css b/stylesheets/custom.css
index 55743f4..04a4c19 100644
--- a/stylesheets/custom.css
+++ b/stylesheets/custom.css
@@ -114,7 +114,7 @@
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: .1rem;
+  letter-spacing: .2rem;
   margin-right: 50px;
   text-decoration: none;
   line-height: 6.3rem;
@@ -128,11 +128,20 @@
   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;
@@ -143,9 +152,35 @@
   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: 10px 0;
+  padding: 0;
   margin: 0;
   list-style: none;
 }
@@ -154,9 +189,11 @@
   margin: 0;
 }
 .popover-link {
-  color: #999;
+  position: relative;
+  color: #222;
   display: block;
-  padding: 5px 20px;
+  padding: 8px 20px;
+  border-bottom: 1px solid #eee;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 1.0rem;
@@ -164,7 +201,18 @@
   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 cbe037d..1d6020b 100644
--- a/stylesheets/skeleton.css
+++ b/stylesheets/skeleton.css
@@ -118,8 +118,7 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a { 
 	color: #1EAEDB; }
-a:hover,
-a:focus { 
+a:hover { 
 	color: #0FA0CE; }
 
 

From 28d510e72851a15797948d11a239ac4ebdc64cd5 Mon Sep 17 00:00:00 2001
From: Dave Gamache 
Date: Mon, 8 Dec 2014 11:28:38 -0800
Subject: [PATCH 10/62] 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

---
 README.md                |  13 +-
 index.html               |   9 +-
 scripts/site.js          |   2 +-
 stylesheets/custom.css   | 260 ++++++++++++++++++---------------------
 stylesheets/skeleton.css |   1 +
 5 files changed, 135 insertions(+), 150 deletions(-)

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 @@
             

           
           
  • Examples
    • 
+          
  • Support
    • 
           
  • License
    • 
           
  • Colophon
    • 
         
@@ -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
    
       
       
@@ -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,

From ca48ff0d723af88fd3a61e2a24e3192a797715a7 Mon Sep 17 00:00:00 2001
From: Dave Gamache 
Date: Mon, 8 Dec 2014 11:29:14 -0800
Subject: [PATCH 11/62] found anchor

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6ea7a03..11ed052 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few
 - No compiling or installing...just vanilla CSS
 
 
-## Browser support {#browserSupport}
+## Browser support
 
 - Chrome latest
 - Firefox latest

From baec02aeb57894abffd1045769c4000b1d94e510 Mon Sep 17 00:00:00 2001
From: Dave Gamache 
Date: Mon, 8 Dec 2014 12:36:15 -0800
Subject: [PATCH 12/62] creating the downloadish page

---
 README.md                                     |  16 +-
 {stylesheets => css}/normalize.css            |   0
 {stylesheets => css}/skeleton.css             |   0
 {stylesheets => docs/css}/custom.css          |   0
 .../css}/github-prettify-theme.css            |   0
 {images => docs/images}/feather.svg           |   0
 {images => docs/images}/pens.svg              |   0
 {images => docs/images}/watch.svg             |   0
 docs/index.html                               | 644 ++++++++++++++++++
 {scripts => docs/js}/site.js                  |   3 +
 index.html                                    | 610 +----------------
 11 files changed, 663 insertions(+), 610 deletions(-)
 rename {stylesheets => css}/normalize.css (100%)
 rename {stylesheets => css}/skeleton.css (100%)
 rename {stylesheets => docs/css}/custom.css (100%)
 rename {stylesheets => docs/css}/github-prettify-theme.css (100%)
 rename {images => docs/images}/feather.svg (100%)
 rename {images => docs/images}/pens.svg (100%)
 rename {images => docs/images}/watch.svg (100%)
 create mode 100644 docs/index.html
 rename {scripts => docs/js}/site.js (96%)

diff --git a/README.md b/README.md
index 11ed052..fe0b5b4 100644
--- a/README.md
+++ b/README.md
@@ -43,11 +43,17 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few
 
 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
-
-Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.
-
 
 ## License
 
-All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php).
\ No newline at end of file
+All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php).
+
+
+## Colophon
+
+Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux.
+
+
+## Acknowledgement
+
+Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.
\ No newline at end of file
diff --git a/stylesheets/normalize.css b/css/normalize.css
similarity index 100%
rename from stylesheets/normalize.css
rename to css/normalize.css
diff --git a/stylesheets/skeleton.css b/css/skeleton.css
similarity index 100%
rename from stylesheets/skeleton.css
rename to css/skeleton.css
diff --git a/stylesheets/custom.css b/docs/css/custom.css
similarity index 100%
rename from stylesheets/custom.css
rename to docs/css/custom.css
diff --git a/stylesheets/github-prettify-theme.css b/docs/css/github-prettify-theme.css
similarity index 100%
rename from stylesheets/github-prettify-theme.css
rename to docs/css/github-prettify-theme.css
diff --git a/images/feather.svg b/docs/images/feather.svg
similarity index 100%
rename from images/feather.svg
rename to docs/images/feather.svg
diff --git a/images/pens.svg b/docs/images/pens.svg
similarity index 100%
rename from images/pens.svg
rename to docs/images/pens.svg
diff --git a/images/watch.svg b/docs/images/watch.svg
similarity index 100%
rename from images/watch.svg
rename to docs/images/watch.svg
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..2d90b69
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,644 @@
+
+
+
+
+  
+  
+  Skeleton: Responsive CSS Boilerplate
+  
+  
+
+  
+  
+
+  
+  
+
+  
+  
+  
+  
+
+  
+  
+  
+  
+  
+
+  
+  
+
+
+
+
+  
+  
    
+    
    
+      
    A dead simple, responsive boilerplate.
    
+      Download
+      
    
+        
    
+          
+          Light as a feather at less than a kb & built with mobile in mind.
+        
    
+        
    
+          
+          Styles designed to be a starting point, not a UI framework.
+        
    
+        
    
+          
+          Quick to start with zero compiling or installing necessary.
+        
    
+      
    
+    
    
+
+    
    
+    
+
+    
+    
    
+      
    Is Skeleton for you?
    
+      
    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
    
+      
+      
+      
+      
+      
+    
    
+
+    
+    
    
+      
    The grid
    
+      
    The grid is a 12-column fluid grid with a max width of 960px, 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. 
    
+      
    
+        
    
+          
    One
    
+          
    Eleven
    
+        
    
+        
    
+          
    Two
    
+          
    Ten
    
+        
    
+        
    
+          
    Three
    
+          
    Nine
    
+        
    
+        
    
+          
    Four
    
+          
    Eight
    
+        
    
+        
    
+          
    Five
    
+          
    Seven
    
+        
    
+        
    
+          
    Six
    
+          
    Six
    
+        
    
+        
    
+          
    Seven
    
+          
    Five
    
+        
    
+        
    
+          
    Eight
    
+          
    Four
    
+        
    
+        
    
+          
    Nine
    
+          
    Three
    
+        
    
+        
    
+          
    Ten
    
+          
    Two
    
+        
    
+        
    
+          
    Eleven
    
+          
    One
    
+        
    
+      
    
+      
+
+
+
    +
+
    
+  
+  
+  
    
+    
    One
    
+    
    Eleven
    
+  
    
+
+  
+  
    
+    
    Two
    
+    
    Ten
    
+  
    
+
+  
+  
    
+    
    1/3
    
+    
    2/3
    
+  
    
+  
    
+    
    1/2
    
+    
    1/2
    
+  
    
+
+
    
+
+
+    
+
    
+
+
+
+    
        
+
+    
+    
    
+      
    Typography
    
+      
    Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.
    
+      
    
+        
    
+          
    
+            
    The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.
    
+            
    Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.
    
+          
    
+          
    
+            
    Heading <h1> 50rem
    
+            
    Heading <h2> 42rem
    
+            
    Heading <h3> 36rem
    
+            
    Heading <h4> 30rem
    
+            
    Heading <h5> 24rem
    
+            
    Heading <h6> 15rem
    
+          
    
+        
    
+      
    
+
+
+
+
    +
+
    Heading
    
+
    Heading
    
+
    Heading
    
+
    Heading
    
+
    Heading
    
+
    Heading
    
+
+
+
    The base type is 15px over 1.6 line height (24px)
    
+
+
+Bolded
+Italicized
+Colored
+Underlined
+    
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Buttons
    
+      
    Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary 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 .button class.
    
+      
    
+        
    
+          Anchor button
+          
+          
+          
+        
    
+        
    
+          Anchor button
+          
+          
+          
+        
    
+      
    
+
+
+
+
    +
+Anchor button
+
+
+
+
+
+Anchor button
+
+
+
+
+
    
+
+
+
+    
      
+
+    
+    
    
+      
    Forms
    
+      
    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.
    
+      
    
+        
+          
    
+            
    
+              
+              
+            
    
+            
    
+              
+              
+            
    
+          
    
+          
+          
+          
+          
+        
+      
    
+
+
+
+
    +
+
    
+  
    
+    
    
+      
+      
+    
    
+    
    
+      
+      
+    
    
+  
    
+  
+  
+  
+  
+
+
+
+
+
+    
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Lists
    
+      
    
+        
    
+          
      
+            
    • Unordered lists have basic styles
      • 
+            
    • 
+              They use the circle list style
+              
        
+                
      • Nested lists styled to feel right
        • 
+                
      • Can nest either type of list into the other
        • 
+              
      
+            
      • 
+            
    • Just more list items mama san
      • 
+          
    
+        
    
+        
    
+          
      
+            
    1. Ordered lists also have basic styles
      2. 
+            
    2. 
+              They use the decimal list style
+              
        
+                
      • Ordered and unordered can be nested
        • 
+                
      • Can nest either type of list into the other
        • 
+              
      
+            
      3. 
+            
    3. Last list item just for the fun
      4. 
+          
    
+        
    
+      
    
+
+
+
+
    +
      
+  
    • Item 1
      • 
+  
    • 
+    Item 2
+    
        
+      
      • Item 2.1
        • 
+      
      • Item 2.2
        • 
+    
      
+  
      • 
+  
    • Item 3
      • 
+
    
+
+
+    
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Code
    
+      
    Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
    
+      
    
+
    .some-class {
+  background-color: red;
+}
    
+      
    
+
+
+
+
    +
    .some-class {
+  background-color: red;
+}
    
+
+
+    
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Tables
    
+      
    Be sure to use properly formed table markup with <thead> and <tbody> when building a table.
    
+      
    
+        
    
           
     
 
 
    
+          
+            
+              
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+          
+        
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    
+      
    
+
+
+
+
    +
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    
+    
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Media queries
    
+      
    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 min-width. The other set is desktop-first, meaning  it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:
    
+      
    
+        
    
+          
      
+            
    • Desktop HD: 1200px
      • 
+            
    • Desktop: 1000px
      • 
+            
    • Tablet: 750px
      • 
+          
             
+        
    
+        
    
+          
      
+            
    • Phablet: 550px
      • 
+            
    • Mobile: 400px
      • 
+          
             
+        
    
+      
    
+
+
+
+
    +/* Mobile first queries */
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+/* Desktop first queries */
+
+/* Smaller than Desktop HD */
+@media (max-width: 1199px) {}
+
+/* Smaller than desktop */
+@media (max-width: 999px) {}
+
+/* Smaller than tablet */
+@media (max-width: 749px) {}
+
+/* Smaller than phablet */
+@media (max-width: 549px) {}
+
+/* Smaller than mobile */
+@media (max-width: 399px) {}
+
+/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
+
+
    
+
+
+
+    
    
+
+
+    
+    
    
+      
    Utilities
    
+      
    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.
    
+
+
+
+
    +/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+/* Clear a float */
+.u-cf { 
+  content: "";
+  display: table;
+  clear: both; }
+
+
    
+
+
+
+    
    
+
+    
+    
    
+      
    Examples
    
+    
    
+
+
    + + + + \ No newline at end of file diff --git a/scripts/site.js b/docs/js/site.js similarity index 96% rename from scripts/site.js rename to docs/js/site.js index e22bf43..3cb76e5 100644 --- a/scripts/site.js +++ b/docs/js/site.js @@ -42,6 +42,7 @@ $(document).ready(function() { function openPopover(e) { e.preventDefault() + closePopover(); var popover = $($(this).data('popover')); popover.toggleClass('open') e.stopImmediatePropagation(); @@ -60,7 +61,9 @@ $(document).ready(function() { }); function resize() { + $body.removeClass('has-docked-nav') navOffsetTop = $nav.offset().top + onScroll() } function onScroll() { diff --git a/index.html b/index.html index 2d3176e..6c29fa5 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Skeleton: Responsive CSS Boilerplate + Your page title here :) @@ -19,624 +19,24 @@ - - - + + - - - - - +
    -
    -

    A dead simple, responsive boilerplate.

    - Download -
    -
    - - Light as a feather at less than a kb & built with mobile in mind. -
    -
    - - Styles designed to be a starting point, not a UI framework. -
    -
    - - Quick to start with zero compiling or installing necessary. -
    -
    -
    - -
    - - - -
    -
    Is Skeleton for you?
    -

    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

    - - - - - -
    - - -
    -
    The grid
    -

    The grid is a 12-column fluid grid with a max width of 960px, 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.

    -
    -
    -
    One
    -
    Eleven
    -
    -
    -
    Two
    -
    Ten
    -
    -
    -
    Three
    -
    Nine
    -
    -
    -
    Four
    -
    Eight
    -
    -
    -
    Five
    -
    Seven
    -
    -
    -
    Six
    -
    Six
    -
    -
    -
    Seven
    -
    Five
    -
    -
    -
    Eight
    -
    Four
    -
    -
    -
    Nine
    -
    Three
    -
    -
    -
    Ten
    -
    Two
    -
    -
    -
    Eleven
    -
    One
    -
    -
    - - - -
    -
-
    
-  
-  
-  
    
-    
    One
    
-    
    Eleven
    
-  
    
-
-  
-  
    
-    
    Two
    
-    
    Ten
    
-  
    
-
-  
-  
    
-    
    1/3
    
-    
    2/3
    
-  
    
-  
    
-    
    1/2
    
-    
    1/2
    
-  
    
-
-
    
-
-
-    
-
    - - - -
    - - -
    -
    Typography
    -

    Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

    -
    -
    -
    -

    The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

    -

    Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

    -
    -
    -

    Heading <h1> 50rem

    -

    Heading <h2> 42rem

    -

    Heading <h3> 36rem

    -

    Heading <h4> 30rem

    -
    Heading <h5> 24rem
    -
    Heading <h6> 15rem
    -
    -
    -
    - - - -
    -
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
-
-
    The base type is 15px over 1.6 line height (24px)
    
-
-
-Bolded
-Italicized
-Colored
-Underlined
-    
-
    - - - -
    - - -
    -
    Buttons
    -

    Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary 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 .button class.

    -
    -
    - Anchor button - - - -
    -
    - Anchor button - - - -
    -
    - - - -
    -
-Anchor button
-
-
-
-
-
-Anchor button
-
-
-
-
-
    - - - -
    - - -
    -
    Forms
    -

    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.

    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - - - -
    -
    - - - -
    -
-
    
-  
    
-    
    
-      
-      
-    
    
-    
    
-      
-      
-    
    
-  
    
-  
-  
-  
-  
-
    
-
-
-
-
-    
-
    - - - -
    - - -
    -
    Lists
    -
    -
    -
      -
    • Unordered lists have basic styles
      • -
    • - They use the circle list style -
        -
      • Nested lists styled to feel right
        • -
      • Can nest either type of list into the other
        • -
      -
      • -
    • Just more list items mama san
      • -
    -
    -
    -
      -
    1. Ordered lists also have basic styles
      2. -
    2. - They use the decimal list style -
        -
      • Ordered and unordered can be nested
        • -
      • Can nest either type of list into the other
        • -
      -
      3. -
    3. Last list item just for the fun
      4. -
    -
    -
    - - - -
    -
      
-  
    • Item 1
      • 
-  
    • 
-    Item 2
-    
        
-      
      • Item 2.1
        • 
-      
      • Item 2.2
        • 
-    
      
-  
      • 
-  
    • Item 3
      • 
-
    
-
-
-    
-
    - - - -
    - - -
    -
    Code
    -

    Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

    -
    -
    .some-class {
-  background-color: red;
-}
    -
    - - - -
    -
    .some-class {
-  background-color: red;
-}
    
-
-
-    
-
    - - - -
    - - -
    -
    Tables
    -

    Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    -
    - - - -
    -
-  
-    
-      
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-  
-
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    
-    
-
    - - - -
    - - -
    -
    Media queries
    -

    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 min-width. The other set is desktop-first, meaning it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

    -
    -
    -
      -
    • Desktop HD: 1200px
      • -
    • Desktop: 1000px
      • -
    • Tablet: 750px
      • -
    -
    -
    -
      -
    • Phablet: 550px
      • -
    • Mobile: 400px
      • -
    -
    -
    - - - -
    -/* Mobile first queries */
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}
-
-
-/* Desktop first queries */
-
-/* Smaller than Desktop HD */
-@media (max-width: 1199px) {}
-
-/* Smaller than desktop */
-@media (max-width: 999px) {}
-
-/* Smaller than tablet */
-@media (max-width: 749px) {}
-
-/* Smaller than phablet */
-@media (max-width: 549px) {}
-
-/* Smaller than mobile */
-@media (max-width: 399px) {}
-
-/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
-
-
    - - - -
    - - - -
    -
    Utilities
    -

    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.

    - - - -
    -/* Utility Classes */
-
-/* Make element full width */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-
-/* Make sure elements don't run outside containers (great for images in columns) */
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-
-/* Float either direction */
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
-
-/* Clear a float */
-.u-cf { 
-  content: "";
-  display: table;
-  clear: both; }
-
-
    - - - -
    - - -
    -
    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
    -

    All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

    -

    Skeleton's version history is available on Github.

    -
    - - -
    -
    Colophon
    -

    Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

    -
    - +

    DOWNLOAD THING

    - feather - Created with Sketch Beta. - - - - - - - \ No newline at end of file diff --git a/docs/images/pens.svg b/docs/images/pens.svg deleted file mode 100644 index 8f94436..0000000 --- a/docs/images/pens.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - pens - Created with Sketch Beta. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/images/watch.svg b/docs/images/watch.svg deleted file mode 100644 index b6b16c6..0000000 --- a/docs/images/watch.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - watch - Created with Sketch Beta. - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 2d90b69..0000000 --- a/docs/index.html +++ /dev/null @@ -1,644 +0,0 @@ - - - - - - - Skeleton: Responsive CSS Boilerplate - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -

    A dead simple, responsive boilerplate.

    - Download -
    -
    - - Light as a feather at less than a kb & built with mobile in mind. -
    -
    - - Styles designed to be a starting point, not a UI framework. -
    -
    - - Quick to start with zero compiling or installing necessary. -
    -
    -
    - -
    - - - -
    -
    Is Skeleton for you?
    -

    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

    - - - - - -
    - - -
    -
    The grid
    -

    The grid is a 12-column fluid grid with a max width of 960px, 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.

    -
    -
    -
    One
    -
    Eleven
    -
    -
    -
    Two
    -
    Ten
    -
    -
    -
    Three
    -
    Nine
    -
    -
    -
    Four
    -
    Eight
    -
    -
    -
    Five
    -
    Seven
    -
    -
    -
    Six
    -
    Six
    -
    -
    -
    Seven
    -
    Five
    -
    -
    -
    Eight
    -
    Four
    -
    -
    -
    Nine
    -
    Three
    -
    -
    -
    Ten
    -
    Two
    -
    -
    -
    Eleven
    -
    One
    -
    -
    - - - -
    -
-
    
-  
-  
-  
    
-    
    One
    
-    
    Eleven
    
-  
    
-
-  
-  
    
-    
    Two
    
-    
    Ten
    
-  
    
-
-  
-  
    
-    
    1/3
    
-    
    2/3
    
-  
    
-  
    
-    
    1/2
    
-    
    1/2
    
-  
    
-
-
    
-
-
-    
-
    - - - -
    - - -
    -
    Typography
    -

    Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

    -
    -
    -
    -

    The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

    -

    Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

    -
    -
    -

    Heading <h1> 50rem

    -

    Heading <h2> 42rem

    -

    Heading <h3> 36rem

    -

    Heading <h4> 30rem

    -
    Heading <h5> 24rem
    -
    Heading <h6> 15rem
    -
    -
    -
    - - - -
    -
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
    Heading
    
-
-
-
    The base type is 15px over 1.6 line height (24px)
    
-
-
-Bolded
-Italicized
-Colored
-Underlined
-    
-
    - - - -
    - - -
    -
    Buttons
    -

    Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary 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 .button class.

    -
    -
    - Anchor button - - - -
    -
    - Anchor button - - - -
    -
    - - - -
    -
-Anchor button
-
-
-
-
-
-Anchor button
-
-
-
-
-
    - - - -
    - - -
    -
    Forms
    -

    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.

    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - - - -
    -
    - - - -
    -
-
    
-  
    
-    
    
-      
-      
-    
    
-    
    
-      
-      
-    
    
-  
    
-  
-  
-  
-  
-
    
-
-
-
-
-    
-
    - - - -
    - - -
    -
    Lists
    -
    -
    -
      -
    • Unordered lists have basic styles
      • -
    • - They use the circle list style -
        -
      • Nested lists styled to feel right
        • -
      • Can nest either type of list into the other
        • -
      -
      • -
    • Just more list items mama san
      • -
    -
    -
    -
      -
    1. Ordered lists also have basic styles
      2. -
    2. - They use the decimal list style -
        -
      • Ordered and unordered can be nested
        • -
      • Can nest either type of list into the other
        • -
      -
      3. -
    3. Last list item just for the fun
      4. -
    -
    -
    - - - -
    -
      
-  
    • Item 1
      • 
-  
    • 
-    Item 2
-    
        
-      
      • Item 2.1
        • 
-      
      • Item 2.2
        • 
-    
      
-  
      • 
-  
    • Item 3
      • 
-
    
-
-
-    
-
    - - - -
    - - -
    -
    Code
    -

    Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

    -
    -
    .some-class {
-  background-color: red;
-}
    -
    - - - -
    -
    .some-class {
-  background-color: red;
-}
    
-
-
-    
-
    - - - -
    - - -
    -
    Tables
    -

    Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    -
    - - - -
    -
-  
-    
-      
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-  
-
    NameAgeSexLocation
    Dave Gamache26MaleSan Francisco
    Dwayne Johnson42MaleHayward
    
-    
-
    - - - -
    - - -
    -
    Media queries
    -

    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 min-width. The other set is desktop-first, meaning it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

    -
    -
    -
      -
    • Desktop HD: 1200px
      • -
    • Desktop: 1000px
      • -
    • Tablet: 750px
      • -
    -
    -
    -
      -
    • Phablet: 550px
      • -
    • Mobile: 400px
      • -
    -
    -
    - - - -
    -/* Mobile first queries */
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}
-
-
-/* Desktop first queries */
-
-/* Smaller than Desktop HD */
-@media (max-width: 1199px) {}
-
-/* Smaller than desktop */
-@media (max-width: 999px) {}
-
-/* Smaller than tablet */
-@media (max-width: 749px) {}
-
-/* Smaller than phablet */
-@media (max-width: 549px) {}
-
-/* Smaller than mobile */
-@media (max-width: 399px) {}
-
-/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
-
-
    - - - -
    - - - -
    -
    Utilities
    -

    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.

    - - - -
    -/* Utility Classes */
-
-/* Make element full width */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-
-/* Make sure elements don't run outside containers (great for images in columns) */
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-
-/* Float either direction */
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
-
-/* Clear a float */
-.u-cf { 
-  content: "";
-  display: table;
-  clear: both; }
-
-
    - - - -
    - - -
    -
    Examples
    -
    - -
    - - - - \ No newline at end of file diff --git a/docs/js/site.js b/docs/js/site.js deleted file mode 100644 index 3cb76e5..0000000 --- a/docs/js/site.js +++ /dev/null @@ -1,94 +0,0 @@ -$(document).ready(function() { - - // Variables - var $codeSnippets = $('.code-example-body'), - $nav = $('.navbar'), - $body = $('body'), - $window = $(window), - $popoverLink = $('[data-popover]'), - navOffsetTop = $nav.offset().top, - $document = $(document), - entityMap = { - "&": "&", - "<": "<", - ">": ">", - '"': '"', - "'": ''', - "/": '/' - } - - function init() { - $window.on('scroll', onScroll) - $window.on('resize', resize) - $popoverLink.on('click', openPopover) - $document.on('click', closePopover) - $('a[href^="#"]').on('click', smoothScroll) - 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 - }, 0, 'swing', function () { - window.location.hash = target; - $(document).on("scroll", onScroll); - }); - } - - function openPopover(e) { - e.preventDefault() - closePopover(); - 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() { - $body.removeClass('has-docked-nav') - navOffsetTop = $nav.offset().top - onScroll() - } - - 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]; - }); - } - - function buildSnippets() { - $codeSnippets.each(function() { - var newContent = escapeHtml($(this).html()) - $(this).html(newContent) - }) - } - - - init(); - -}); \ No newline at end of file diff --git a/index.html b/index.html index 6c29fa5..66349f4 100644 --- a/index.html +++ b/index.html @@ -22,10 +22,6 @@ - - - @@ -36,7 +32,12 @@
    -

    DOWNLOAD THING

    +
    +
    +

    Basic Page

    +

    This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.

    +
    +
    - + @@ -43,4 +43,4 @@ - \ No newline at end of file + From f091647f7c9283dea8aa630e0efc58c498e0284d Mon Sep 17 00:00:00 2001 From: Jake Henshall Date: Wed, 10 Dec 2014 09:47:46 +0000 Subject: [PATCH 18/62] Spelling Mistake Spelling Mistake on Line 373 says secion instead of section. --- css/skeleton.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index e7b7d1a..4cc0c94 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -330,7 +330,6 @@ p { margin-top: 0; } - /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { @@ -371,7 +370,7 @@ hr { /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons secion and style it +on small devices, paste the mobile query code up in the buttons section and style it there. */ @@ -389,4 +388,4 @@ there. @media (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} \ No newline at end of file +@media (min-width: 1200px) {} From 0858fce5a449ee85fae5e94e1d62ec211555ca56 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 11:20:19 -0800 Subject: [PATCH 19/62] fixing issue with grid offsets not working with certain other classes --- css/skeleton.css | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index e7b7d1a..1b53f70 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -72,23 +72,22 @@ .container .one-half.column { width: 48%; } /* Offsets */ - .container .offset-by-one.column, - .container .offset-by-one.columns { margin-left: 8.66666666667%; } - .container .offset-by-two.column { margin-left: 17.3333333333%; } - .container .offset-by-three.column { margin-left: 26%; } - .container .offset-by-four.column { margin-left: 34.6666666667%; } - .container .offset-by-five.column { margin-left: 43.3333333333%; } - .container .offset-by-six.column { margin-left: 52%; } - .container .offset-by-seven.column { margin-left: 60.6666666667%; } - .container .offset-by-eight.column { margin-left: 69.3333333333%; } - .container .offset-by-nine.column { margin-left: 78.0%; } - .container .offset-by-ten.column { margin-left: 86.6666666667%; } - .container .offset-by-eleven.column { margin-left: 95.3333333333%; } + .container .row .offset-by-one { margin-left: 8.66666666667%; } + .container .row .offset-by-two { margin-left: 17.3333333333%; } + .container .row .offset-by-three { margin-left: 26%; } + .container .row .offset-by-four { margin-left: 34.6666666667%; } + .container .row .offset-by-five { margin-left: 43.3333333333%; } + .container .row .offset-by-six { margin-left: 52%; } + .container .row .offset-by-seven { margin-left: 60.6666666667%; } + .container .row .offset-by-eight { margin-left: 69.3333333333%; } + .container .row .offset-by-nine { margin-left: 78.0%; } + .container .row .offset-by-ten { margin-left: 86.6666666667%; } + .container .row .offset-by-eleven { margin-left: 95.3333333333%; } - .container .offset-by-one-third.column { margin-left: 34.6666666667%; } - .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } + .container .row .offset-by-one-third { margin-left: 34.6666666667%; } + .container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } - .container .offset-by-one-half.column { margin-left: 52%; } + .container .row .offset-by-one-half { margin-left: 52%; } } From 1e19814b5178714137f5b10f0c70f0de6cf63b0b Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 11:23:26 -0800 Subject: [PATCH 20/62] rolling back cause there was a tiny issue --- css/skeleton.css | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 1b53f70..e7b7d1a 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -72,22 +72,23 @@ .container .one-half.column { width: 48%; } /* Offsets */ - .container .row .offset-by-one { margin-left: 8.66666666667%; } - .container .row .offset-by-two { margin-left: 17.3333333333%; } - .container .row .offset-by-three { margin-left: 26%; } - .container .row .offset-by-four { margin-left: 34.6666666667%; } - .container .row .offset-by-five { margin-left: 43.3333333333%; } - .container .row .offset-by-six { margin-left: 52%; } - .container .row .offset-by-seven { margin-left: 60.6666666667%; } - .container .row .offset-by-eight { margin-left: 69.3333333333%; } - .container .row .offset-by-nine { margin-left: 78.0%; } - .container .row .offset-by-ten { margin-left: 86.6666666667%; } - .container .row .offset-by-eleven { margin-left: 95.3333333333%; } + .container .offset-by-one.column, + .container .offset-by-one.columns { margin-left: 8.66666666667%; } + .container .offset-by-two.column { margin-left: 17.3333333333%; } + .container .offset-by-three.column { margin-left: 26%; } + .container .offset-by-four.column { margin-left: 34.6666666667%; } + .container .offset-by-five.column { margin-left: 43.3333333333%; } + .container .offset-by-six.column { margin-left: 52%; } + .container .offset-by-seven.column { margin-left: 60.6666666667%; } + .container .offset-by-eight.column { margin-left: 69.3333333333%; } + .container .offset-by-nine.column { margin-left: 78.0%; } + .container .offset-by-ten.column { margin-left: 86.6666666667%; } + .container .offset-by-eleven.column { margin-left: 95.3333333333%; } - .container .row .offset-by-one-third { margin-left: 34.6666666667%; } - .container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } + .container .offset-by-one-third.column { margin-left: 34.6666666667%; } + .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } - .container .row .offset-by-one-half { margin-left: 52%; } + .container .offset-by-one-half.column { margin-left: 52%; } } From 32372eb1a1ece1ded8152db2b8da339a79680c4a Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 11:28:11 -0800 Subject: [PATCH 21/62] updating really quickly in the master branch even though I should create separate branch. Grid issue with offsets and column vs. columns --- css/skeleton.css | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index e7b7d1a..4d885ae 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,5 +1,5 @@ /* -* Skeleton V2.0 +* Skeleton V2.0.1 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. @@ -72,23 +72,22 @@ .container .one-half.column { width: 48%; } /* Offsets */ - .container .offset-by-one.column, - .container .offset-by-one.columns { margin-left: 8.66666666667%; } - .container .offset-by-two.column { margin-left: 17.3333333333%; } - .container .offset-by-three.column { margin-left: 26%; } - .container .offset-by-four.column { margin-left: 34.6666666667%; } - .container .offset-by-five.column { margin-left: 43.3333333333%; } - .container .offset-by-six.column { margin-left: 52%; } - .container .offset-by-seven.column { margin-left: 60.6666666667%; } - .container .offset-by-eight.column { margin-left: 69.3333333333%; } - .container .offset-by-nine.column { margin-left: 78.0%; } - .container .offset-by-ten.column { margin-left: 86.6666666667%; } - .container .offset-by-eleven.column { margin-left: 95.3333333333%; } + .container .row .offset-by-one { margin-left: 8.66666666667%; } + .container .row .offset-by-two { margin-left: 17.3333333333%; } + .container .row .offset-by-three { margin-left: 26%; } + .container .row .offset-by-four { margin-left: 34.6666666667%; } + .container .row .offset-by-five { margin-left: 43.3333333333%; } + .container .row .offset-by-six { margin-left: 52%; } + .container .row .offset-by-seven { margin-left: 60.6666666667%; } + .container .row .offset-by-eight { margin-left: 69.3333333333%; } + .container .row .offset-by-nine { margin-left: 78.0%; } + .container .row .offset-by-ten { margin-left: 86.6666666667%; } + .container .row .offset-by-eleven { margin-left: 95.3333333333%; } - .container .offset-by-one-third.column { margin-left: 34.6666666667%; } - .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } + .container .row .offset-by-one-third { margin-left: 34.6666666667%; } + .container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } - .container .offset-by-one-half.column { margin-left: 52%; } + .container .row .offset-by-one-half { margin-left: 52%; } } From ce24c09177b29544ad437b854c3b9e6c67f35be0 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 11:48:54 -0800 Subject: [PATCH 22/62] updating the date of the license --- css/skeleton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 4d885ae..0db8df9 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -4,7 +4,7 @@ * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 12/9/2014 +* 12/11/2014 */ From 958fc2f009365412737924145df2c4e213908995 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 11:56:44 -0800 Subject: [PATCH 23/62] updating to the 2.0.1 link on README link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e49c9d6..f7bca29 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0/Skeleton.2.0.zip) +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.1/Skeleton-2.0.1.zip) - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` From eed018bd688d65cdd66dfda5174dec97ee8d3b64 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 12:14:30 -0800 Subject: [PATCH 24/62] fixing the noun project link in the README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f7bca29..ca0a713 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ All parts of Skeleton are free to use and abuse under the [open-source MIT licen ## Colophon -Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux. +Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](http://thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux. ## Acknowledgement From b01cf390e0fe32c514994ce4b59d4252497d1177 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 14:12:14 -0800 Subject: [PATCH 25/62] improving Google fonts protocol in the docs --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1bcc6be..8483478 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + From 284e0acc3dc127d7dbc59865600977c5976caf5b Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 14:48:25 -0800 Subject: [PATCH 26/62] adding license to repo --- LICENSE.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE.md diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..32a62b3 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2011-2014 Dave Gamache + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file From d0008ad160088a67c80ba465b3606131bbde9a32 Mon Sep 17 00:00:00 2001 From: dhg Date: Thu, 11 Dec 2014 14:49:12 -0800 Subject: [PATCH 27/62] adding the link from the readme under license to Skeleton license --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ca0a713..b85c2d5 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ The above list is non-exhaustive. Skeleton works perfectly with almost all older ## License -All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php). +All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md). ## Colophon From b941bed80ff0d319fc334b21ee39b57f66e7e5b3 Mon Sep 17 00:00:00 2001 From: John Hope Date: Fri, 12 Dec 2014 19:44:21 +0000 Subject: [PATCH 28/62] Add .DS_Store to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file From 2992a0be54d35e68ba5ac655e71451cbc7ffe4a6 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 15:59:27 -0800 Subject: [PATCH 29/62] decreasing the specificity of all grid items, changing small grid sizes to rely on container padding so it flexes to near full width of viewport sub-550px --- css/skeleton.css | 96 +++++++++++++++++++++++++++--------------------- 1 file changed, 55 insertions(+), 41 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 244e2f2..88940dd 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -30,64 +30,78 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; - width: 80%; + width: 100%; max-width: 960px; margin: 0 auto; - padding: 0; } -.container .column, -.container .columns { + padding: 0 20px; + box-sizing: border-box; } +.column, +.columns { float: left; width: 100%; box-sizing: border-box; } -.row { - margin-bottom: 2rem; } -.row .column:first-child, -.row .columns:first-child { - margin-left: 0; } /* For devices larger than 550px */ @media (min-width: 550px) { - .container .column, - .container .columns { + .column, + .columns { margin-left: 4%; } + + .column:first-child, + .columns:first-child { + margin-left: 0; } - .container .one.column, - .container .one.columns { width: 4.66666666667%; } - .container .two.columns { width: 13.3333333333%; } - .container .three.columns { width: 22%; } - .container .four.columns { width: 30.6666666667%; } - .container .five.columns { width: 39.3333333333%; } - .container .six.columns { width: 48%; } - .container .seven.columns { width: 56.6666666667%; } - .container .eight.columns { width: 65.3333333333%; } - .container .nine.columns { width: 74.0%; } - .container .ten.columns { width: 82.6666666667%; } - .container .eleven.columns { width: 91.3333333333%; } - .container .twelve.columns { width: 100%; margin-left: 0; } + .one.column, + .one.columns { width: 4.66666666667%; } + .two.columns { width: 13.3333333333%; } + .three.columns { width: 22%; } + .four.columns { width: 30.6666666667%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 48%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 65.3333333333%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.3333333333%; } + .twelve.columns { width: 100%; margin-left: 0; } - .container .one-third.column { width: 30.6666666667%; } - .container .two-thirds.column { width: 65.3333333333%; } + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } - .container .one-half.column { width: 48%; } + .one-half.column { width: 48%; } /* Offsets */ - .container .row .offset-by-one { margin-left: 8.66666666667%; } - .container .row .offset-by-two { margin-left: 17.3333333333%; } - .container .row .offset-by-three { margin-left: 26%; } - .container .row .offset-by-four { margin-left: 34.6666666667%; } - .container .row .offset-by-five { margin-left: 43.3333333333%; } - .container .row .offset-by-six { margin-left: 52%; } - .container .row .offset-by-seven { margin-left: 60.6666666667%; } - .container .row .offset-by-eight { margin-left: 69.3333333333%; } - .container .row .offset-by-nine { margin-left: 78.0%; } - .container .row .offset-by-ten { margin-left: 86.6666666667%; } - .container .row .offset-by-eleven { margin-left: 95.3333333333%; } + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } - .container .row .offset-by-one-third { margin-left: 34.6666666667%; } - .container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - .container .row .offset-by-one-half { margin-left: 52%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } } From c099903a837886c299388045229b2a3c7247bc93 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:05:08 -0800 Subject: [PATCH 30/62] adding the forgotten max-width property to container above 550px --- css/skeleton.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/skeleton.css b/css/skeleton.css index 88940dd..daa83a2 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -43,6 +43,10 @@ /* For devices larger than 550px */ @media (min-width: 550px) { + + .container { + width: 90%; + } .column, .columns { From 06b819aeb9081470d05461cb1cfdce571b03ec67 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:10:56 -0800 Subject: [PATCH 31/62] changing the .container to feel appropriately sized on mobile/tablet devices. A very small update to grid that makes it all feel a little less constrained on smaller sizes --- css/skeleton.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index daa83a2..78a98fe 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -41,17 +41,20 @@ width: 100%; box-sizing: border-box; } +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 90%; } +} + /* For devices larger than 550px */ @media (min-width: 550px) { - .container { - width: 90%; - } - + padding: 0; + width: 80%; } .column, .columns { margin-left: 4%; } - .column:first-child, .columns:first-child { margin-left: 0; } From febee0bc9bc6f5f5ad2c671354382eefe197c0c2 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:14:27 -0800 Subject: [PATCH 32/62] moving the padding: 0 down to the 400px query --- css/skeleton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 78a98fe..675a9f9 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -44,13 +44,13 @@ /* For devices larger than 400px */ @media (min-width: 400px) { .container { + padding: 0; width: 90%; } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { - padding: 0; width: 80%; } .column, .columns { From 3b9f339b2a35de4fc64aefeb0e2ba74df4655a0c Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:16:36 -0800 Subject: [PATCH 33/62] shrinking the % width of the 400-550px column since it felt a little crowded --- css/skeleton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 675a9f9..e3ebdc9 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -45,7 +45,7 @@ @media (min-width: 400px) { .container { padding: 0; - width: 90%; } + width: 85%; } } /* For devices larger than 550px */ From 2144cee05bfbec8207c18398a0e006d4fbcd0966 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:25:32 -0800 Subject: [PATCH 34/62] changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/ --- css/skeleton.css | 60 ++++++++++++++++++++++++------------------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index e3ebdc9..c68035e 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -37,15 +37,15 @@ box-sizing: border-box; } .column, .columns { - float: left; width: 100%; + float: left; box-sizing: border-box; } /* For devices larger than 400px */ @media (min-width: 400px) { .container { - padding: 0; - width: 85%; } + width: 85%; + padding: 0; } } /* For devices larger than 550px */ @@ -131,9 +131,9 @@ body { /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { - font-weight: 300; margin-top: 0; - margin-bottom: 2rem; } + margin-bottom: 2rem; + font-weight: 300; } h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } @@ -171,21 +171,21 @@ input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; - background-color: transparent; - border-radius: 4px; + height: 38px; + padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; - text-decoration: none; - cursor: pointer; - border: 1px solid #bbb; - height: 38px; line-height: 38px; - padding: 0 30px; letter-spacing: .1rem; text-transform: uppercase; + text-decoration: none; white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; box-sizing: border-box; } .button:hover, button:hover, @@ -197,8 +197,8 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { - border-color: #888; color: #333; + border-color: #888; outline: 0; } .button.button-primary, button.button-primary, @@ -206,8 +206,8 @@ input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; - border-color: #33C3F0; - background-color: #33C3F0; } + background-color: #33C3F0; + border-color: #33C3F0; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, @@ -218,9 +218,9 @@ button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { + color: #FFF; background-color: #1EAEDB; - border-color: #1EAEDB; - color: #FFF; } + border-color: #1EAEDB; } /* Forms @@ -231,12 +231,12 @@ input[type="text"], input[type="password"], textarea, select { - border: 1px solid #D1D1D1; height: 36px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; border-radius: 4px; - box-shadow: none; - background: #fff; } + box-shadow: none; } /* Removes awkard default styles on some inputs */ input[type="email"], input[type="search"], @@ -261,18 +261,18 @@ select:focus { label, legend { display: block; - font-weight: 600; - margin-bottom: .5rem; } + margin-bottom: .5rem; + font-weight: 600; } fieldset { - border-width: 0; - padding: 0; } + padding: 0; + border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; - font-weight: normal; - margin-left: .5rem; } + margin-left: .5rem; + font-weight: normal; } /* Lists @@ -282,8 +282,8 @@ ul { ol { list-style: decimal inside; } ol, ul { - margin-top: 0; - padding-left: 0; } + padding-left: 0; + margin-top: 0; } ul ul, ul ol, ol ol, @@ -300,10 +300,10 @@ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; + white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; - border-radius: 4px; - white-space: nowrap; } + border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; From c34806e863afa0f0059fa44864e625cff04b2048 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:49:25 -0800 Subject: [PATCH 35/62] adding support for input['tel'] and input['url'] and cleaning up a few other form styles --- css/skeleton.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index c68035e..8eee5c7 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -228,6 +228,8 @@ input[type="button"].button-primary:focus { input[type="email"], input[type="search"], input[type="text"], +input[type="tel"], +input[type="url"], input[type="password"], textarea, select { @@ -236,11 +238,15 @@ select { background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; - box-shadow: none; } -/* Removes awkard default styles on some inputs */ + box-shadow: none; + box-sizing: border-box; } +/* Removes awkard default styles on some inputs for iOS */ input[type="email"], input[type="search"], input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; @@ -253,6 +259,8 @@ textarea { input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { From 3b39c4ae2b68facf69188c18aa9a41b3afe707d8 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 16:53:01 -0800 Subject: [PATCH 36/62] fixing the height of inputs --- css/skeleton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 8eee5c7..2bbf547 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -233,7 +233,7 @@ input[type="url"], input[type="password"], textarea, select { - height: 36px; + height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; From 0ff548aa2cff8d2f2153db531b83062c4a0a861a Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 17:08:16 -0800 Subject: [PATCH 37/62] updating the version/date info in header of file --- css/skeleton.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 2bbf547..3a8bd66 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,10 +1,10 @@ /* -* Skeleton V2.0.1 +* Skeleton V2.0.2 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 12/11/2014 +* 12/15/2014 */ From 328a8be46ca78b412834e886dd5bdcc0d7d60939 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 17:15:55 -0800 Subject: [PATCH 38/62] cleaning up small indentation and spacing --- css/skeleton.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 3a8bd66..09442ec 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -250,8 +250,7 @@ input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; - appearance: none; -} + appearance: none; } textarea { min-height: 65px; padding-top: 6px; @@ -378,8 +377,8 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; -} + border-top: 1px solid #E1E1E1; } + /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ From cc531df4557603b26fa43b470a477b29ce7df685 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 17:33:01 -0800 Subject: [PATCH 39/62] adding the new download link and note about cloning not being latest release) --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b85c2d5..c4b392e 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.1/Skeleton-2.0.1.zip) -- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.2/Skeleton-2.0.2.zip) +- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) ### What's in the download? @@ -15,20 +15,20 @@ There are a couple ways to download Skeleton: The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. ``` -skeleton/ +Skeleton/ ├── index.html ├── css/ │ ├── normalize.min.css │ └── skeleton.css -├── images/ -│ └── favicon.ico -└── README.md +└── images/ + └── favicon.ico + ``` ### Why it's awesome Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. -- Minified, it's less than a kb +- Around 400 lines of CSS unminified and with comments - It's a starting point, not a UI framework - No compiling or installing...just vanilla CSS From 8d4dc1cef68c3beadd2823f8dd9641efc7086978 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 19:23:18 -0800 Subject: [PATCH 40/62] adding the less/sass skeleton links to the readme --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index c4b392e..c95f402 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,13 @@ The above list is non-exhaustive. Skeleton works perfectly with almost all older All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md). +## Extensions + +The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted): +- [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) +- [Skeleton on SASS](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with SASS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) + + ## Colophon Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](http://thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux. From f307ba424f428e8ca07bf1ff90809cd5aeb2674d Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 15 Dec 2014 19:32:40 -0800 Subject: [PATCH 41/62] adding the email addy so others can submit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index c95f402..5914c78 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,8 @@ The following are extensions to Skeleton built by the community. They are not of - [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) - [Skeleton on SASS](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with SASS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) +Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! + ## Colophon From 7ec6fa5a7d1703ddda620bd4153537e571619aad Mon Sep 17 00:00:00 2001 From: Anton Antonov Date: Tue, 16 Dec 2014 21:58:03 +0200 Subject: [PATCH 42/62] Cherry picked a typo --- css/skeleton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 09442ec..5e855bc 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -240,7 +240,7 @@ select { border-radius: 4px; box-shadow: none; box-sizing: border-box; } -/* Removes awkard default styles on some inputs for iOS */ +/* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="search"], input[type="text"], From d8615808cf78d03e6c6d7f31289fac6fc97ee143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Per=20Sandstr=C3=B6m?= Date: Wed, 17 Dec 2014 19:58:12 +0100 Subject: [PATCH 43/62] Remove ending / in favicon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Making things more consistent and the feather even lighter… --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8483478..9e25abe 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ - + From 17cf331e8976e847d071986a6323dbc377723e5b Mon Sep 17 00:00:00 2001 From: Jina Bolton Date: Wed, 17 Dec 2014 14:48:52 -0800 Subject: [PATCH 44/62] Switch SASS to Sass. :) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5914c78..8143c17 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ All parts of Skeleton are free to use and abuse under the [open-source MIT licen The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted): - [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) -- [Skeleton on SASS](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with SASS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) +- [Skeleton on Sass](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! @@ -65,4 +65,4 @@ Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and desi ## Acknowledgement -Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. \ No newline at end of file +Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. From ffebc65ec81d2ea5d7c5003291b092b24ec0adfe Mon Sep 17 00:00:00 2001 From: smpaq Date: Sun, 21 Dec 2014 12:05:58 -0500 Subject: [PATCH 45/62] Removing redundant selector --- css/skeleton.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/skeleton.css b/css/skeleton.css index 5e855bc..d60b7bf 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -344,7 +344,6 @@ fieldset { margin-bottom: 1.5rem; } pre, blockquote, -form, dl, figure, table, From 6ce993fddf8a44bc07d20739f5202550b512041a Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 22 Dec 2014 11:27:56 -0800 Subject: [PATCH 46/62] adding a test version of bower.json, though I'm sure it's wrong for now --- bower.json | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..1275352 --- /dev/null +++ b/bower.json @@ -0,0 +1,28 @@ +{ + "name": "skeleton", + "version": "2.0.2", + "homepage": "http://getskeleton.com/", + "repository": { + "type": "git", + "url": "https://github.com/dhg/Skeleton" + }, + "authors": [ + "Dave Gamache (http://davegamache.com/)" + ], + "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", + "main": "css/skeleton.css", + "dependencies": { + "normalize.css": "3.0.2" + }, + "keywords": [ + "css", + "skeleton", + "responsive", + "boilerplate" + ], + "license": "MIT", + "ignore": [ + ".gitignore", + "*.md" + ], +} \ No newline at end of file From 2a7e6adcbc6ecd1a80b4fecdc9ee9ed5315cf80c Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 22 Dec 2014 11:29:31 -0800 Subject: [PATCH 47/62] removing test now that I get what's going on :) --- bower.json | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 bower.json diff --git a/bower.json b/bower.json deleted file mode 100644 index 1275352..0000000 --- a/bower.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "skeleton", - "version": "2.0.2", - "homepage": "http://getskeleton.com/", - "repository": { - "type": "git", - "url": "https://github.com/dhg/Skeleton" - }, - "authors": [ - "Dave Gamache (http://davegamache.com/)" - ], - "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", - "main": "css/skeleton.css", - "dependencies": { - "normalize.css": "3.0.2" - }, - "keywords": [ - "css", - "skeleton", - "responsive", - "boilerplate" - ], - "license": "MIT", - "ignore": [ - ".gitignore", - "*.md" - ], -} \ No newline at end of file From 3c3dd7c6e2fee6406a13f7c82f9884e98a6672ce Mon Sep 17 00:00:00 2001 From: Jim Gallaher Date: Mon, 22 Dec 2014 20:09:28 -0600 Subject: [PATCH 48/62] add separate minified version of normalize.css --- css/normalize.min.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 css/normalize.min.css diff --git a/css/normalize.min.css b/css/normalize.min.css new file mode 100644 index 0000000..c6043c3 --- /dev/null +++ b/css/normalize.min.css @@ -0,0 +1 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} From ee71477681cfc4beb10def86cd428eefd344312c Mon Sep 17 00:00:00 2001 From: Jim Gallaher Date: Mon, 22 Dec 2014 20:13:59 -0600 Subject: [PATCH 49/62] remove normlize.min.css --- css/normalize.min.css | 1 - 1 file changed, 1 deletion(-) delete mode 100644 css/normalize.min.css diff --git a/css/normalize.min.css b/css/normalize.min.css deleted file mode 100644 index c6043c3..0000000 --- a/css/normalize.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} From ef8c1471d93ab9aa83d0b1d0dc77e136768198ea Mon Sep 17 00:00:00 2001 From: Jim Gallaher Date: Tue, 23 Dec 2014 22:13:36 -0600 Subject: [PATCH 50/62] replace single quotes to double on index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9e25abe..c81c190 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + From 0ed08360458fb35ad6bc7a917d1d2f1c90e36863 Mon Sep 17 00:00:00 2001 From: Niclas Darville Date: Fri, 26 Dec 2014 22:00:00 +0100 Subject: [PATCH 51/62] Added missing CSS rule for input[type="number"] --- css/skeleton.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/skeleton.css b/css/skeleton.css index d60b7bf..5ad0a84 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -226,6 +226,7 @@ input[type="button"].button-primary:focus { /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], +input[type="number"], input[type="search"], input[type="text"], input[type="tel"], @@ -242,6 +243,7 @@ select { box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], +input[type="number"], input[type="search"], input[type="text"], input[type="tel"], @@ -256,6 +258,7 @@ textarea { padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, +input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, From 0f7d8cba762f8a57470a42445904024cd04fc9f6 Mon Sep 17 00:00:00 2001 From: Ben Hinchley Date: Sat, 27 Dec 2014 23:35:30 +1100 Subject: [PATCH 52/62] duplicate rule --- css/skeleton.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 5e855bc..daef8e6 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -353,8 +353,6 @@ ul, ol, form { margin-bottom: 2.5rem; } -p { - margin-top: 0; } /* Utilities From 08b0f50159a51de5b1c456988f227ea10cce6a7c Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 08:47:24 -0800 Subject: [PATCH 53/62] removing all trailing whitespaces --- css/skeleton.css | 65 +++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 31 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 4b5851c..3ea7a0e 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -9,7 +9,7 @@ /* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– +–––––––––––––––––––––––––––––––––––––––––––––––––– - Grid - Base Styles - Typography @@ -29,16 +29,16 @@ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; padding: 0 20px; box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; +.column, +.columns { + width: 100%; + float: left; box-sizing: border-box; } /* For devices larger than 400px */ @@ -55,10 +55,10 @@ .column, .columns { margin-left: 4%; } - .column:first-child, - .columns:first-child { + .column:first-child, + .columns:first-child { margin-left: 0; } - + .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } @@ -116,10 +116,10 @@ /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton +html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } +html { + font-size: 62.5%; } body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; @@ -130,7 +130,7 @@ body { /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; } @@ -157,13 +157,13 @@ p { /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { +a { color: #1EAEDB; } -a:hover { +a:hover { color: #0FA0CE; } -/* Buttons +/* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, @@ -179,7 +179,7 @@ input[type="button"] { font-weight: 600; line-height: 38px; letter-spacing: .1rem; - text-transform: uppercase; + text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; @@ -229,6 +229,7 @@ input[type="email"], input[type="search"], input[type="text"], input[type="tel"], +input[type="number"], input[type="url"], input[type="password"], textarea, @@ -245,6 +246,7 @@ input[type="email"], input[type="search"], input[type="text"], input[type="tel"], +input[type="number"], input[type="url"], input[type="password"], textarea { @@ -259,6 +261,7 @@ input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, +input[type="number"], input[type="url"]:focus, input[type="password"]:focus, textarea:focus, @@ -284,18 +287,18 @@ label > .label-body { /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { +ul { list-style: circle inside; } -ol { +ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } -ul ul, +ul ul, ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-bottom: 1rem; } @@ -375,7 +378,7 @@ hr { margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } - + /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -383,7 +386,7 @@ hr { /* Self Clearing Goodness */ .container:after, .row:after, -.u-cf { +.u-cf { content: ""; display: table; clear: both; } @@ -392,10 +395,10 @@ hr { /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* -Note: The best way to structure the use of media queries is to create the queries +Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. +on small devices, paste the mobile query code up in the buttons section and style it +there. */ From 412758bc640ed04dd3b655cddc50dd8825702d0d Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 08:48:23 -0800 Subject: [PATCH 54/62] merging in the removing trailing whitespaces --- css/skeleton.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 615616c..1977728 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -230,7 +230,6 @@ input[type="number"], input[type="search"], input[type="text"], input[type="tel"], -input[type="number"], input[type="url"], input[type="password"], textarea, @@ -248,7 +247,6 @@ input[type="number"], input[type="search"], input[type="text"], input[type="tel"], -input[type="number"], input[type="url"], input[type="password"], textarea { @@ -264,7 +262,6 @@ input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, -input[type="number"], input[type="url"]:focus, input[type="password"]:focus, textarea:focus, From 3b84c54db3bec4380e4fc68f61331f83dc2443e8 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:33:17 -0800 Subject: [PATCH 55/62] gonna try to add bower stuff --- bower.json | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..b561ba5 --- /dev/null +++ b/bower.json @@ -0,0 +1,27 @@ +{ + "name": "skeleton", + "version": "2.0.2", + "homepage": "http://getskeleton.com/", + "repository": { + "type": "git", + "url": "https://github.com/dhg/Skeleton" + }, + "authors": [ + "Dave Gamache (http://davegamache.com/)" + ], + "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", + "main": [ + "css/skeleton.css", + "index.html", + ], + "dependencies": { + "normalize.css": "3.x.x" + }, + "keywords": [ + "css", + "skeleton", + "responsive", + "boilerplate" + ], + "license": "MIT" +} \ No newline at end of file From c8160592856a9e91e14ded2d81dcac47f96076d8 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:37:33 -0800 Subject: [PATCH 56/62] updating to 2.0.3 --- css/skeleton.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 1977728..8599d40 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,10 +1,10 @@ /* -* Skeleton V2.0.2 +* Skeleton V2.0.3 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 12/15/2014 +* 12/29/2014 */ From 5648a06d46dfbbd2ac4b89d7b3bb64f778566946 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:44:51 -0800 Subject: [PATCH 57/62] updating readme to new 2.0.3 download --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8143c17..702e9d3 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.2/Skeleton-2.0.2.zip) +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.3/Skeleton-2.0.3.zip) - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) @@ -27,9 +27,9 @@ Skeleton/ ### Why it's awesome -Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. +Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. - Around 400 lines of CSS unminified and with comments -- It's a starting point, not a UI framework +- It's a starting point, not a UI framework - No compiling or installing...just vanilla CSS From 23d67f119e6b060f357cc40bf7aea6f0eb58c20b Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:47:15 -0800 Subject: [PATCH 58/62] updating the bower json and going to test it more extensively now --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index b561ba5..629d4c7 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "skeleton", - "version": "2.0.2", + "version": "2.0.3", "homepage": "http://getskeleton.com/", "repository": { "type": "git", From 6fccc024ba5113d154005cc8c0639731dadb7433 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:48:28 -0800 Subject: [PATCH 59/62] small typo in bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 629d4c7..48411c5 100644 --- a/bower.json +++ b/bower.json @@ -12,7 +12,7 @@ "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", "main": [ "css/skeleton.css", - "index.html", + "index.html" ], "dependencies": { "normalize.css": "3.x.x" From 6101a6652ed26eaea839cdbfa26028396838a40d Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 09:55:22 -0800 Subject: [PATCH 60/62] think I get how bower works and for now shouldn't have to even add normalize --- bower.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/bower.json b/bower.json index 48411c5..cf7ef21 100644 --- a/bower.json +++ b/bower.json @@ -10,13 +10,7 @@ "Dave Gamache (http://davegamache.com/)" ], "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", - "main": [ - "css/skeleton.css", - "index.html" - ], - "dependencies": { - "normalize.css": "3.x.x" - }, + "main": "css/skeleton.css", "keywords": [ "css", "skeleton", From 0d0adf7b4473f947ceb3ff7d1e249a0252f6dd47 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 10:19:54 -0800 Subject: [PATCH 61/62] updating the master branch for the new point release --- README.md | 2 +- bower.json | 2 +- css/skeleton.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 702e9d3..e908feb 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.3/Skeleton-2.0.3.zip) +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.5/Skeleton-2.0.5.zip) - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) diff --git a/bower.json b/bower.json index cf7ef21..3c2b667 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "skeleton", - "version": "2.0.3", + "version": "2.0.5", "homepage": "http://getskeleton.com/", "repository": { "type": "git", diff --git a/css/skeleton.css b/css/skeleton.css index 8599d40..788f224 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,5 +1,5 @@ /* -* Skeleton V2.0.3 +* Skeleton V2.0.5 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. From 88f03612b05f093e3f235ced77cf89d3a8fcf846 Mon Sep 17 00:00:00 2001 From: dhg Date: Mon, 29 Dec 2014 10:29:28 -0800 Subject: [PATCH 62/62] fixing all the weird versioning I just had to do --- README.md | 2 +- bower.json | 2 +- css/skeleton.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e908feb..da83064 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.5/Skeleton-2.0.5.zip) +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip) - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) diff --git a/bower.json b/bower.json index 3c2b667..1dab019 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "skeleton", - "version": "2.0.5", + "version": "2.0.4", "homepage": "http://getskeleton.com/", "repository": { "type": "git", diff --git a/css/skeleton.css b/css/skeleton.css index 788f224..f28bf6c 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,5 +1,5 @@ /* -* Skeleton V2.0.5 +* Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license.