diff --git a/src/404.html b/404.html similarity index 100% rename from src/404.html rename to 404.html diff --git a/documentation-assets/docs.css b/documentation-assets/docs.css deleted file mode 100644 index 6385a7b..0000000 --- a/documentation-assets/docs.css +++ /dev/null @@ -1,190 +0,0 @@ -/* -* Skeleton V1.0 -* Created by Dave Gamache -* www.skeleton.gs -* 4/30/2011 -*/ - - -/* Documentation Styles -================================================== */ - div.container { - padding-top: 60px; } - - /* Doc nav */ - nav { - position: fixed; - width: inherit; } - #logo { - margin-bottom: 30px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - letter-spacing: -1px; - font-weight: bold; - text-align: right; } - nav ul { - float: right; } - nav ul li { - text-align: right; - display: block; - margin-bottom: 10px; } - nav ul li a { - font-size: 14px; - color: #555; - text-decoration: none; - font-weight: bold; - padding: 3px 8px 4px; - position: relative; - right: -8px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; } -/* - nav ul li a:hover { - color: #fff; - background: #333; } -*/ - nav .button { - float: right; } - 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; } - - figure { - float: left; - height: 220px; - margin: 10px 24px 20px 0; - position: relative; } - figure:last-child { - margin-right: 0; } - figure img { - position: absolute; - bottom: 26px; } - figure figcaption { - margin: 0 auto; - position: absolute; - bottom: 0; - font-size: 13px; - line-height: 30px; - font-weight: bold;} - figure.iphone { - width: 119px; } - figure.ipad { - width: 232px; } - figure.laptop { - width: 301px; } - - /* 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; } - - #viewOnGithub { - margin-bottom: 20px; - font-size: 11px; - color: #999; - display: block; } - - - .resize { - position: fixed; - bottom: 0; - right: 0; - height: 80px; - width: 80px; - background: url(images/resize.png); } - - .gist-meta { display: none !important;} - - - /* Mobile */ - @media only screen and (max-width: 767px) { - header h1 { font-size: 34px; line-height: 37px; } - nav { position: relative; } - nav ul { display: none; } - #logo { text-align: left; } -/* #whatAndWhy img { display: none; } */ - nav .button { display: none; } - } - - /* 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: 969px) { - #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: 991px) {} - - /* 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: 991px) 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; } - } - - - \ No newline at end of file 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/ipad.jpg b/documentation-assets/images/ipad.jpg deleted file mode 100644 index af0714f..0000000 Binary files a/documentation-assets/images/ipad.jpg and /dev/null differ diff --git a/documentation-assets/images/iphone.jpg b/documentation-assets/images/iphone.jpg deleted file mode 100644 index 63dad35..0000000 Binary files a/documentation-assets/images/iphone.jpg and /dev/null differ diff --git a/documentation-assets/images/macbook.jpg b/documentation-assets/images/macbook.jpg deleted file mode 100644 index 069ac6c..0000000 Binary files a/documentation-assets/images/macbook.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/src/fonts/README.css b/fonts/README.css similarity index 100% rename from src/fonts/README.css rename to fonts/README.css diff --git a/src/images/favicon.ico b/images/favicon.ico similarity index 100% rename from src/images/favicon.ico rename to images/favicon.ico diff --git a/index.html b/index.html index ae886dc..8c9b460 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,12 @@ ================================================== --> -
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 pieces:
-Skeleton has a familiar, lightweight 960 grid as it's 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 changes 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:
-As I write this, Skeleton is unreleased and I have just started using it in personal projects. In the future, I hope to build a small community around Skeleton - I want to get feedback, make it better and find the holes.
-The ultimate goal is to build the best starting point for front-end development with an emphasis on simple, device-agnostic design.t Help me get there - check out the project on Github or just email me - dhgamache [at] gmail.com - with questions/suggestions.
-The Skeleton download is a zip file (~50kb) containing all the CSS groundwork and JS goodies to get started on any web project.
- Download Skeleton 1.0The file structure for Skeleton is:
-Created by Dave Gamache, 2011 ©
-