From 2cbda075be05eea07d25d9115e7cf653052fc180 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 03:02:51 -0800 Subject: [PATCH] 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