diff --git a/README.md b/README.md index 5914c78..da83064 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Check out for documentation and details. ## Getting started There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.2/Skeleton-2.0.2.zip) +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip) - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) @@ -27,9 +27,9 @@ Skeleton/ ### Why it's awesome -Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. +Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. - Around 400 lines of CSS unminified and with comments -- It's a starting point, not a UI framework +- It's a starting point, not a UI framework - No compiling or installing...just vanilla CSS @@ -53,7 +53,7 @@ All parts of Skeleton are free to use and abuse under the [open-source MIT licen The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted): - [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) -- [Skeleton on SASS](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with SASS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) +- [Skeleton on Sass](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! @@ -65,4 +65,4 @@ Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and desi ## Acknowledgement -Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. \ No newline at end of file +Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..1dab019 --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "skeleton", + "version": "2.0.4", + "homepage": "http://getskeleton.com/", + "repository": { + "type": "git", + "url": "https://github.com/dhg/Skeleton" + }, + "authors": [ + "Dave Gamache (http://davegamache.com/)" + ], + "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", + "main": "css/skeleton.css", + "keywords": [ + "css", + "skeleton", + "responsive", + "boilerplate" + ], + "license": "MIT" +} \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css index 09442ec..f28bf6c 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,15 +1,15 @@ /* -* Skeleton V2.0.2 +* Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 12/15/2014 +* 12/29/2014 */ /* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– +–––––––––––––––––––––––––––––––––––––––––––––––––– - Grid - Base Styles - Typography @@ -29,16 +29,16 @@ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; padding: 0 20px; box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; +.column, +.columns { + width: 100%; + float: left; box-sizing: border-box; } /* For devices larger than 400px */ @@ -55,10 +55,10 @@ .column, .columns { margin-left: 4%; } - .column:first-child, - .columns:first-child { + .column:first-child, + .columns:first-child { margin-left: 0; } - + .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } @@ -116,10 +116,10 @@ /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton +html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } +html { + font-size: 62.5%; } body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; @@ -130,7 +130,7 @@ body { /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; } @@ -157,13 +157,13 @@ p { /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { +a { color: #1EAEDB; } -a:hover { +a:hover { color: #0FA0CE; } -/* Buttons +/* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, @@ -179,7 +179,7 @@ input[type="button"] { font-weight: 600; line-height: 38px; letter-spacing: .1rem; - text-transform: uppercase; + text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; @@ -226,6 +226,7 @@ input[type="button"].button-primary:focus { /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], +input[type="number"], input[type="search"], input[type="text"], input[type="tel"], @@ -240,8 +241,9 @@ select { border-radius: 4px; box-shadow: none; box-sizing: border-box; } -/* Removes awkard default styles on some inputs for iOS */ +/* Removes awkward default styles on some inputs for iOS */ input[type="email"], +input[type="number"], input[type="search"], input[type="text"], input[type="tel"], @@ -256,6 +258,7 @@ textarea { padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, +input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, @@ -284,18 +287,18 @@ label > .label-body { /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { +ul { list-style: circle inside; } -ol { +ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } -ul ul, +ul ul, ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-bottom: 1rem; } @@ -344,7 +347,6 @@ fieldset { margin-bottom: 1.5rem; } pre, blockquote, -form, dl, figure, table, @@ -353,8 +355,6 @@ ul, ol, form { margin-bottom: 2.5rem; } -p { - margin-top: 0; } /* Utilities @@ -378,7 +378,7 @@ hr { margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } - + /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -386,7 +386,7 @@ hr { /* Self Clearing Goodness */ .container:after, .row:after, -.u-cf { +.u-cf { content: ""; display: table; clear: both; } @@ -395,10 +395,10 @@ hr { /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* -Note: The best way to structure the use of media queries is to create the queries +Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. +on small devices, paste the mobile query code up in the buttons section and style it +there. */ diff --git a/index.html b/index.html index 8483478..c81c190 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + @@ -24,7 +24,7 @@ - +