diff --git a/Skeleton-1.0.zip b/Skeleton-1.0.zip new file mode 100644 index 0000000..38ad0ac Binary files /dev/null and b/Skeleton-1.0.zip differ diff --git a/documentation-assets/docs.css b/documentation-assets/docs.css index 01030a9..3c76894 100644 --- a/documentation-assets/docs.css +++ b/documentation-assets/docs.css @@ -1,5 +1,5 @@ /* -* Skeleton V0.1 +* Skeleton V1.0 * Created by Dave Gamache * www.skeleton.gs * 4/30/2011 @@ -9,32 +9,46 @@ /* Documentation Styles ================================================== */ div.container { - padding-top: 40px; } + padding-top: 60px; } /* Doc nav */ nav { - margin-left: 10px; - position: fixed; } + position: fixed; + width: inherit; } #logo { - margin-bottom: 30px; } + margin-bottom: 30px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + letter-spacing: -1px; + font-weight: bold; + text-align: right; } nav ul { - margin-left: 40px; - overflow: hidden; } + float: right; } nav ul li { + text-align: right; + display: block; margin-bottom: 10px; } nav ul li a { - font-size: 15px; - color:#5f5f5f; + font-size: 14px; + color: #555; text-decoration: none; - font-weight: normal; } - nav ul li a.active { - font-weight: bold; - color: #000; } - header p { - font-size: 40px; - line-height: 45px; - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #8d8d8d; } + font-weight: bold; + padding: 3px 8px; + position: relative; + right: -8px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; } + nav ul li a:hover { + color: #fff; + background: #222; } + 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; @@ -43,6 +57,9 @@ div.doc-section { margin: 30px 0; } + #whatAndWhy .row { + padding: 30px 0 0; } + #typography blockquote { margin-top: 20px; } @@ -51,34 +68,72 @@ 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: #222; + background: #ddd; height: 25px; line-height: 25px; margin-bottom: 10px; text-align: center; text-transform: uppercase; - color: #fff; + 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; } + + + .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 p { font-size: 25px; line-height: 30px;} + header h1 { font-size: 34px; line-height: 37px; } nav { position: relative; } nav ul { display: none; } - #logo { - width: 100px; - display: block; - margin: 0 auto; } + #logo { text-align: left; } +/* #whatAndWhy img { display: none; } */ + nav .button { display: none; } } /* Mobile Landscape */ @@ -89,8 +144,10 @@ /* Non 960 */ @media only screen and (max-width: 969px) { #logo { - max-width: 130px; } - nav ul { margin-left: 10px; } + font-size: 21px; + margin-bottom: 15px; } + nav .button { + padding: 9px 20px 11px; } } @@ -105,6 +162,7 @@ /* 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) {} @@ -113,10 +171,11 @@ @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) { - header p { - font-size: 25px; - line-height: 30px; } + @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/fast.jpg b/documentation-assets/images/fast.jpg new file mode 100644 index 0000000..0c1f4d1 Binary files /dev/null and b/documentation-assets/images/fast.jpg differ diff --git a/documentation-assets/images/foundation.jpg b/documentation-assets/images/foundation.jpg new file mode 100644 index 0000000..41d1cd9 Binary files /dev/null and b/documentation-assets/images/foundation.jpg differ diff --git a/documentation-assets/images/ipad.jpg b/documentation-assets/images/ipad.jpg new file mode 100644 index 0000000..af0714f Binary files /dev/null and b/documentation-assets/images/ipad.jpg differ diff --git a/documentation-assets/images/iphone.jpg b/documentation-assets/images/iphone.jpg new file mode 100644 index 0000000..63dad35 Binary files /dev/null and b/documentation-assets/images/iphone.jpg differ diff --git a/documentation-assets/images/logo.png b/documentation-assets/images/logo.png deleted file mode 100644 index d601128..0000000 Binary files a/documentation-assets/images/logo.png and /dev/null differ diff --git a/documentation-assets/images/macbook.jpg b/documentation-assets/images/macbook.jpg new file mode 100644 index 0000000..069ac6c Binary files /dev/null and b/documentation-assets/images/macbook.jpg differ diff --git a/documentation-assets/images/resize.png b/documentation-assets/images/resize.png new file mode 100644 index 0000000..5278963 Binary files /dev/null and b/documentation-assets/images/resize.png differ diff --git a/documentation-assets/images/responsive.jpg b/documentation-assets/images/responsive.jpg new file mode 100644 index 0000000..e459d86 Binary files /dev/null and b/documentation-assets/images/responsive.jpg differ diff --git a/index.php b/index.php index 689a942..01a2a85 100644 --- a/index.php +++ b/index.php @@ -26,10 +26,6 @@ - - - @@ -39,15 +35,13 @@ -
-
+
 
-
+
-

Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.

+

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

-

What & Why

-

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices

-
-
-
-

Basics

-

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices

-
-
-
-

Typography

-

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.

-
-

Heading <h1>

-

Heading <h2>

-

Heading <h3>

-

Heading <h4>

-
Heading <h5>
-
Heading <h6>
+

What Is It?

+

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:

+
+
+ responsive +
+
+
Responsive Grid Down To Mobile
+

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!

+
-
-
-

This is a blockquote style example. It stands out, but is awesome

- Dave Gamache, Skeleton Creator -
+
+
+ responsive +
+
+
Fast to Start
+

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.

+
+
+
+
+ responsive +
+
+
Style Agnostic
+

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.

+
+ +
+
-

Grid

-

Skeleton's base grid is a simpler variation of the 960 grid system. The syntax is simpler and is just as effective cross browser and across devices, but the awesome part is that it also has the flexibility to go mobile like a champ. The option is yours to have the site scale fluidly or to have a scaled fixed grid.

+

The Grid

+

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!

One
Eleven
@@ -122,7 +152,26 @@
Code Example - + +
+
+
+
+

Typography

+

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.

+
+

Heading <h1>

+

Heading <h2>

+

Heading <h3>

+

Heading <h4>

+
Heading <h5>
+
Heading <h6>
+
+
+
+

This is a blockquote style example. It stands out, but is awesome

+ Dave Gamache, Skeleton Creator +
@@ -133,7 +182,7 @@ Dismiss Changes
Code Example - +
@@ -152,14 +201,14 @@
Code Example - +

Forms

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.

-
+
@@ -213,10 +262,43 @@

The Future

-

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices

+

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. Help me get there - check out the project on Github or just email me (dhgamache [at] gmail.com) with questions/suggestions.

+
+
+
+

Download

+

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.0 +

The file structure for Skeleton is:

+
    +
  • index.html: The base html page that includes the necessary initial markup
    • +
  • + stylesheets (folder) +
      +
    • base.css: Basic styles of Skeleton
      • +
    • skeleton.css: The glorious Skeleton grid
      • +
    • layout.css: Empty file made for your site specific styles
      • +
    • ie.css: Empty CSS file for IE specific needs
      • +
    +
    • +
  • + javascripts (folder) +
      +
    • jquery-1.5.1.min.js: jQuery is served the Google CDN, but I've provided a local fallback
      • +
    • app.css: Contains code for activating tabs and should house all of your sites JS
      • +
    • Plugins (folder): An empty directory for your jQuery plugins
      • +
    +
    • +
  • + images (folder) +
    • +
+ +
@@ -231,10 +313,21 @@ \ No newline at end of file diff --git a/src/javascripts/app.js b/src/javascripts/app.js index bb07d59..f89f91a 100644 --- a/src/javascripts/app.js +++ b/src/javascripts/app.js @@ -1,5 +1,5 @@ /* -* Skeleton V0.1 +* Skeleton V1.0 * Created by Dave Gamache * www.skeleton.gs * 4/30/2011 @@ -9,9 +9,11 @@ $(document).ready(function() { /* iPhone fix to scroll away iPhone browser chrome */ - if(window.width < '800px') { +/* + if(window.width < '500px') { setTimeout(function(){window.scrollTo(0, 1);}, 100); } +*/ /* Tabs Activiation ================================================== */ diff --git a/src/javascripts/modernizr-1.7.min.js b/src/javascripts/modernizr-1.7.min.js deleted file mode 100644 index 6f54850..0000000 --- a/src/javascripts/modernizr-1.7.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// Modernizr v1.7 www.modernizr.com -window.Modernizr=function(a,b,c){function G(){e.input=function(a){for(var b=0,c=a.length;b7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c