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 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 diff --git a/README.md b/README.md index e49c9d6..5914c78 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/Skeleton.2.0.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 @@ -46,12 +46,21 @@ 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). + + +## 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) + +Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! ## 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 diff --git a/css/skeleton.css b/css/skeleton.css index e7b7d1a..09442ec 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,10 +1,10 @@ /* -* Skeleton V2.0 +* 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/9/2014 +* 12/15/2014 */ @@ -30,65 +30,85 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; - width: 80%; + width: 100%; max-width: 960px; margin: 0 auto; - padding: 0; } -.container .column, -.container .columns { - float: left; - width: 100%; + padding: 0 20px; box-sizing: border-box; } -.row { - margin-bottom: 2rem; } -.row .column:first-child, -.row .columns:first-child { - margin-left: 0; } +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } +} /* For devices larger than 550px */ @media (min-width: 550px) { - - .container .column, - .container .columns { + .container { + width: 80%; } + .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 .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%; } + .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 .offset-by-one-third.column { margin-left: 34.6666666667%; } - .container .offset-by-two-thirds.column { 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 .offset-by-one-half.column { margin-left: 52%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } } @@ -111,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; } @@ -151,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, @@ -177,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, @@ -186,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, @@ -198,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 @@ -208,24 +228,29 @@ 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 { - border: 1px solid #D1D1D1; - height: 36px; + height: 38px; 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; } -/* Removes awkard default styles on some inputs */ + 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; - appearance: none; -} + appearance: none; } textarea { min-height: 65px; padding-top: 6px; @@ -233,6 +258,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 { @@ -241,18 +268,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 @@ -262,8 +289,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, @@ -280,10 +307,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; @@ -330,7 +357,6 @@ p { margin-top: 0; } - /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { @@ -351,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 –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -371,7 +397,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 +415,4 @@ there. @media (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} \ No newline at end of file +@media (min-width: 1200px) {} diff --git a/index.html b/index.html index 66349f4..8483478 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,11 @@ - + - + @@ -43,4 +43,4 @@ - \ No newline at end of file +