diff --git a/documentation-assets/Skeleton-Grid.psd.zip b/documentation-assets/Skeleton-Grid.psd.zip deleted file mode 100644 index abfa147..0000000 Binary files a/documentation-assets/Skeleton-Grid.psd.zip and /dev/null differ diff --git a/documentation-assets/docs.css b/documentation-assets/docs.css deleted file mode 100644 index 893c1d7..0000000 --- a/documentation-assets/docs.css +++ /dev/null @@ -1,200 +0,0 @@ -/* -* Skeleton V1.0.3 -* Copyright 2011, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 7/17/2011 -*/ - - -/* Documentation Styles -================================================== */ - div.container { - padding-top: 60px; } - - /* Doc nav */ - nav { - position: fixed; - width: 160px; } - #logo { - margin-bottom: 20px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - letter-spacing: -1px; - font-weight: bold; } - nav ul { - float: left; } - nav ul li { - display: block; - margin-bottom: 10px; } - nav ul li a, - nav ul li a:visited, - nav ul li a:active { - font-size: 14px; - color: #555; - text-decoration: none; - font-weight: bold; } - nav ul li a:hover, - nav ul li a:focus { - color: #222; } - header h1 { - font-size: 52px; - line-height: 61px; - letter-spacing: -1px; - font-weight: normal; - font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; } - hr.large { - border: none; - height: 8px; - background: #ebebeb; - margin: 50px 0; } - div.doc-section { - margin: 30px 0; } - - #whatAndWhy .row { - padding: 30px 0 0; } - - #typography blockquote { - margin-top: 20px; } - - .hidden-code a { - font-size: 12px; - color: #999; } - .hidden-code>div { - display: none; } - - - /* Grid */ - #grid .column, - #grid .columns { - background: #ddd; - height: 25px; - line-height: 25px; - margin-bottom: 10px; - text-align: center; - text-transform: uppercase; - color: #555; - font-size: 12px; - font-weight: bold; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; } - #grid .column:hover, - #grid .columns:hover { - background: #bbb; - color: #333; } - #grid .example-grid { overflow: hidden; } - - .post-button-note, - .post-button-note a { - font-size: 11px; - color: #999; } - - #examples .four.columns a { - text-decoration: none; - } - #examples .four.columns a:hover { - text-decoration: underline; - } - - - .resize { - position: fixed; - bottom: 0; - right: 0; - height: 80px; - width: 80px; - background: url(images/resize.png); } - - - img { - max-width: 100%; - height: auto; } - - .gist-meta { display: none !important;} - - ul ul ul li { margin-bottom: 3px; } - - .twitter-share-button { margin-bottom: -18px; } - -.carbonad, -.carbonad-image, -.carbonad-text, -.carbonad-tag { - background: none !important; - border: none !important; - margin-left: 0 !important; -} -.carbonad-tag { - margin-top: 6px !important; - padding-top: 0 !important; -} -.carbonad-text { - height: auto !important; -} -.carbonad-image { - margin-top: 0 !important; -} - - - /* Mobile */ - @media only screen and (max-width: 767px) { - header h1 { font-size: 34px; line-height: 37px; } - nav { position: relative; } - nav ul, - .carbonad { - display: none; - } - #logo { text-align: left; } - #examples .four.columns { - padding-top: 30px; - } - } - - /* Mobile Landscape */ - @media only screen and (min-width: 480px) and (max-width: 767px) { - nav ul { - display: none; - } - } - - /* Non 960 */ - @media only screen and (max-width: 959px) { - #logo { - font-size: 21px; - margin-bottom: 15px; } - nav .button { - padding: 9px 20px 11px; } - } - - /* iPad Portrait/Browser */ - @media only screen and (min-width: 768px) and (max-width: 959px) { - nav { - width: 124px; } - } - - /* Mobile/Browser */ - @media only screen and (max-width: 767px) {} - - /* Mobile Landscape/Browser */ - @media only screen and (min-width: 480px) and (max-width: 767px) {} - - /* Anything smaller than standard 960 */ - @media only screen and (max-width: 959px) {} - - - /* iPad Portrait Only */ - @media only screen and (min-width: 768px) and (max-width: 959px) and (max-device-width: 1000px) {} - - /* Mobile Only */ - @media only screen and (max-width: 767px) and (max-device-width: 1000px) {} - - /* Mobile Landscape Only */ - @media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {} - - /* Anything smaller than standard 960 on a device */ - @media only screen and (max-width: 959px) and (max-device-width: 1000px) { - .resize { display: none; } - } - - diff --git a/documentation-assets/images/artisticly.jpg b/documentation-assets/images/artisticly.jpg deleted file mode 100644 index 18a641d..0000000 Binary files a/documentation-assets/images/artisticly.jpg and /dev/null differ diff --git a/documentation-assets/images/blink182.jpg b/documentation-assets/images/blink182.jpg deleted file mode 100644 index 564fd12..0000000 Binary files a/documentation-assets/images/blink182.jpg and /dev/null differ diff --git a/documentation-assets/images/eleventhedition.jpg b/documentation-assets/images/eleventhedition.jpg deleted file mode 100644 index bb90c5c..0000000 Binary files a/documentation-assets/images/eleventhedition.jpg and /dev/null differ diff --git a/documentation-assets/images/fast.jpg b/documentation-assets/images/fast.jpg deleted file mode 100644 index 0c1f4d1..0000000 Binary files a/documentation-assets/images/fast.jpg and /dev/null differ diff --git a/documentation-assets/images/foundation.jpg b/documentation-assets/images/foundation.jpg deleted file mode 100644 index 41d1cd9..0000000 Binary files a/documentation-assets/images/foundation.jpg and /dev/null differ diff --git a/documentation-assets/images/resize.png b/documentation-assets/images/resize.png deleted file mode 100644 index 5278963..0000000 Binary files a/documentation-assets/images/resize.png and /dev/null differ diff --git a/documentation-assets/images/responsive.jpg b/documentation-assets/images/responsive.jpg deleted file mode 100644 index e459d86..0000000 Binary files a/documentation-assets/images/responsive.jpg and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 36d95e7..0000000 --- a/index.html +++ /dev/null @@ -1,434 +0,0 @@ - - - - - -
- - - -Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:
-Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!
-Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.
-Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.
-Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!
-The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.
---This is a blockquote style example. It stands out, but is awesome
- Dave Gamache, Skeleton Creator -
Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.
- Click Me For Action -Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.
-Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go.
-Skeleton uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:
-Do you have feedback, questions or thoughts about Skeleton - hit me up at hi@getskeleton.com and I will get back to you as soon as I can :)
- -Skeleton has been tested across as many devices and browsers as I could get my hands on:
-There is a small hiccup though - older non-CSS3 browsers aren't going to respond to the media-queries and thus will be served the standard 960 grid even if they are resized. In the spirit of graceful degradation though, I'm going to let this be instead of trying to implement a JS solution. If you are interested in one though, try the respond.js polyfill.
-Notes on IE: We all know sometimes IE doesn't behave, so through the genius of conditional CSS I've added a class of "ie" to all versions of the browser, as well as specific targets for each (i.e. "ie6", "ie7", "ie8"). It's not a perfect world, but hopefully this will help make naughty IE behave.
-All parts of Skeleton are free to use and abuse under the open-source MIT license. The full licensing language can be found here: http://www.opensource.org/licenses/mit-license.php.
-More importantly, I would love to have a small community of contributors to Skeleton, so please feel free to jump over the Skeleton Github page and contribute to make Skeleton a better boilerplate for everyone! I would also love to know if you built a site on Skeleton - I'm planning on tying a gallery into these docs, so just shoot me the URL at hi@getskeleton.com
-Skeleton has been in the wild for quite a few months now and reception has been pretty awesome so far. Nothing pleases me more than receiving emails about projects using Skeleton or constructive feedback (this is really the reason Skeleton gets better). Here is a quick list of some of the most awesome sites using Skeleton:
- -Skeleton also has been extended in a number of ways! These are the extensions I've heard of so far!
-The Skeleton download is a zip file (~25kb) containing all the CSS groundwork and JS goodies to get started on any web project.
- Download Skeleton 1.1 from Github - - Download Skeleton PSD Template - -The file structure for Skeleton is:
-Created by Dave Gamache, 2011 ©
- I want to thank @smileyj68 for all the inspiration and for helping me get to a place to create Skeleton, @mdo for being a boss, giving awesome feedback and helping me get Skeleton out of the door, the whole HTML5 Boilerplate project/team that served as an indispensable resource, 960.gs for a great starting point and their PSD template and @ashleybatz for putting up with my late night coding and shenanigans.
Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
-Skeleton is built on three core principles:
-The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.
-