From fbcd84c21fbe71095f7a6fafb9057cca731eddcd Mon Sep 17 00:00:00 2001 From: Anders Olsen Sandvik Date: Tue, 9 Dec 2014 23:40:45 +0100 Subject: [PATCH 01/25] Remove maximum-scale=1 for better usability #173 --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 66349f4..1bcc6be 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -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 02/25] 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 03/25] 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 04/25] 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 05/25] 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 06/25] 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 07/25] 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 08/25] 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 09/25] 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 10/25] 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 11/25] 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 12/25] 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 13/25] 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 14/25] 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 15/25] 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 16/25] 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 17/25] 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 18/25] 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 19/25] 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 20/25] 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 21/25] 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 22/25] 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 23/25] 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 24/25] 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 25/25] 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