From 7a68cd5b80a477bbb91818818c8ee2f4c16674ce Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Thu, 20 Nov 2014 16:38:45 -0800 Subject: [PATCH] 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