diff --git a/README b/README index ffd9b34..8842482 100644 --- a/README +++ b/README @@ -1,3 +1,11 @@ +

Purpose

+

The purpose of this skeleton is to be a framework to jump off from any personal project, site or web app. It's starting very light and will continue to be so, but soon with extensible plugins and an easy to use architecture.

- -Does this just go straight into the GIT description? \ No newline at end of file +

To Do List

+ \ No newline at end of file diff --git a/documentation-assets/docs.css b/documentation-assets/docs.css new file mode 100644 index 0000000..877cab9 --- /dev/null +++ b/documentation-assets/docs.css @@ -0,0 +1,64 @@ +/* +* Skeleton V0.1 +* Created by Dave Gamache +* www.skeleton.gs +* 4/30/2011 +*/ + + +/* Documentation Styles +================================================== */ + div.container { + padding-top: 40px; } + + /* Doc nav */ + nav { + position: fixed; + margin-left: 10px; } + h1#logo { + background: url(images/logo.png); + width: 199px; + height: 198px; + text-indent: -9999px; + margin-bottom: 30px; } + nav ul { + margin-left: 40px; + overflow: hidden; } + nav ul li { + margin-bottom: 10px; } + nav ul li a { + font-size: 15px; + color:#5f5f5f; + 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; } + hr.large { + border: none; + height: 8px; + background: #ebebeb; + margin: 50px 0; } + div.doc-section { + margin: 30px 0; } + + /* Grid */ + #grid .column, + #grid .columns { + background: #111; + height: 25px; + line-height: 25px; + margin-bottom: 10px; + text-align: center; + text-transform: uppercase; + color: #fff; + font-size: 12px; + font-weight: bold; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; } \ No newline at end of file diff --git a/documentation-assets/images/logo.png b/documentation-assets/images/logo.png new file mode 100644 index 0000000..d601128 Binary files /dev/null and b/documentation-assets/images/logo.png differ diff --git a/images/button-gloss.png b/images/button-gloss.png deleted file mode 100644 index 9d6cc59..0000000 Binary files a/images/button-gloss.png and /dev/null differ diff --git a/includes/doc-foot.php b/includes/doc-foot.php deleted file mode 100644 index 77655e6..0000000 --- a/includes/doc-foot.php +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/index.php b/index.php index 27e3456..d8054a4 100644 --- a/index.php +++ b/index.php @@ -1,43 +1,149 @@ - + + + + + + -
-
-

Thellpo

-

This is the best page of all time

-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam est dolor, eleifend vitae condimentum id, viverra vel mauris. Duis lacinia lacinia dictum. In viverra risus ut diam mattis adipiscing. Nam ut cursus odio. Phasellus mattis dolor nec risus mollis in commodo risus vestibulum. Cras bibendum facilisis mauris. Morbi ac turpis vel neque mollis tempor accumsan in quam. Phasellus pulvinar viverra diam.

-
    -
  • This is awesome
  • -
  • This is awesome
  • -
  • This is awesome
  • -
  • This is awesome
  • -
- -
    -
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam est dolor, eleifend vitae condimentum id, viverra vel mauris. Duis lacinia lacinia dictum. In viverra risus ut diam mattis adipiscing. Nam ut cursus odio. Phasellus mattis dolor nec risus mollis in commodo risus vestibulum. Cras bibendum facilisis mauris. Morbi ac turpis vel neque mollis tempor accumsan in quam. Phasellus pulvinar viverra diam.

    - Do It Hansel »
  • -
  • -

    ALPHA

    -

    OMEGA

    -
  • -
-
- -
+ + + + <?= $page_title ?> + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + + + + + + +
+
+ +   +
+
+
+

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

+
+
+
+

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.

+

Heading <h1>

+

Heading <h2>

+

Heading <h3>

+

Heading <h4>

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

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.

+
One
+
Eleven
+
Two
+
Ten
+
Three
+
Nine
+
Four
+
Eight
+
Five
+
Seven
+
Six
+
Six
+
Seven
+
Five
+
Eight
+
Four
+
Nine
+
Three
+
Ten
+
Two
+
Eleven
+
One
+
+
+
+

Tabs

+

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

+
+
+
+

Forms

+

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

+
+
+
+

Media Queries

+

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

+
+
+
+

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

+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/README.css b/src/fonts/README.css similarity index 100% rename from fonts/README.css rename to src/fonts/README.css diff --git a/src/includes/doc-foot.php b/src/includes/doc-foot.php new file mode 100644 index 0000000..c7fb118 --- /dev/null +++ b/src/includes/doc-foot.php @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/includes/doc-head.php b/src/includes/doc-head.php similarity index 51% rename from includes/doc-head.php rename to src/includes/doc-head.php index 032e5c4..1a0388f 100644 --- a/includes/doc-head.php +++ b/src/includes/doc-head.php @@ -1,7 +1,7 @@ - - - + + + @@ -16,21 +16,23 @@ - + - - - + + + + - - + + + + + + - - - - diff --git a/src/index.php b/src/index.php new file mode 100644 index 0000000..cc9775a --- /dev/null +++ b/src/index.php @@ -0,0 +1,29 @@ + + +
+ +
+
+

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

+
+
+

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

+
+
+ + \ No newline at end of file diff --git a/js/app.js b/src/javascripts/app.js similarity index 83% rename from js/app.js rename to src/javascripts/app.js index 5b5b1e9..2fa1e1f 100644 --- a/js/app.js +++ b/src/javascripts/app.js @@ -1,13 +1,14 @@ -window.scrollTo(0, 1); +/* +* Skeleton V0.1 +* Created by Dave Gamache +* www.skeleton.gs +* 4/30/2011 +*/ $(document).ready(function() { - - /* Use this js doc for all application specific JS */ - - /* TABS --------------------------------- */ - /* Remove if you don't need :) */ - + /* Tabs Activiation + ================================================== */ var tabs = $('ul.tabs'); tabsContent = $('ul.tabs-content') @@ -35,11 +36,11 @@ $(document).ready(function() { } }); - }); + }); - /* PLACEHOLDER FOR FORMS ------------- */ - /* Remove if you don't need :) */ + /* Placeholder + ================================================== $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { @@ -60,6 +61,6 @@ $(document).ready(function() { input.val(''); } }); - }); + }); */ }); \ No newline at end of file diff --git a/js/jquery-1.5.1.min.js b/src/javascripts/jquery-1.5.1.min.js similarity index 100% rename from js/jquery-1.5.1.min.js rename to src/javascripts/jquery-1.5.1.min.js diff --git a/js/modernizr-1.7.min.js b/src/javascripts/modernizr-1.7.min.js similarity index 100% rename from js/modernizr-1.7.min.js rename to src/javascripts/modernizr-1.7.min.js diff --git a/css/forms.css b/src/stylesheets/forms.css similarity index 100% rename from css/forms.css rename to src/stylesheets/forms.css diff --git a/css/future_mobile_base.css b/src/stylesheets/future_mobile_base.css similarity index 100% rename from css/future_mobile_base.css rename to src/stylesheets/future_mobile_base.css diff --git a/src/stylesheets/ie.css b/src/stylesheets/ie.css new file mode 100644 index 0000000..f23423f --- /dev/null +++ b/src/stylesheets/ie.css @@ -0,0 +1,13 @@ +/* +* Skeleton V0.1 +* Created by Dave Gamache +* www.skeleton.gs +* 4/30/2011 +*/ + + +/* Style for IE go here and will be applied to IE6, IE7 & IE8, +but they can also be targeted with body classes .ie or .ie7 */ + + + diff --git a/css/layout.css b/src/stylesheets/layout.css similarity index 95% rename from css/layout.css rename to src/stylesheets/layout.css index b74ff24..6742df5 100644 --- a/css/layout.css +++ b/src/stylesheets/layout.css @@ -3,5 +3,4 @@ * Created by Dave Gamache * www.skeleton.gs * 4/30/2011 -*/ - +*/ \ No newline at end of file diff --git a/css/base.css b/src/stylesheets/skeleton.css similarity index 65% rename from css/base.css rename to src/stylesheets/skeleton.css index 8e27050..fab6be7 100644 --- a/css/base.css +++ b/src/stylesheets/skeleton.css @@ -8,20 +8,20 @@ /* Table of Content ================================================== - @Reset & Basics - @Basic Styles - @Typography - @Links - @Lists - @Tabs - @Grid - @Media Queries */ + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Tabs + #Grid + #Media Queries */ -/* @Reset & Basics (Inspired by E. Meyers) +/* #Reset & Basics (Inspired by E. Meyers) ================================================== */ - html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; @@ -45,25 +45,29 @@ border-spacing: 0; } -/* @Basic Styles +/* #Basic Styles ================================================== */ body { background: #fff; - font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ; + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ } -/* @Typography +/* #Typography ================================================== */ - h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1 } + h1, h2, h3, h4, h5, h6 { + color: #181818; + font-weight: normal; + line-height: 40px; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } - h1 { font-size: 46px; margin-bottom: 4px;} - h2 { font-size: 35px; margin-bottom: 2px; } - h3 { font-size: 28px; } + h1 { font-size: 46px; margin-bottom: 14px;} + h2 { font-size: 35px; margin-bottom: 8px; } + h3 { font-size: 28px; margin-bottom: 4px; } h4 { font-size: 21px; } - h5 { font-size: 18px; } - h6 { font-size: 15px; } + h5 { font-size: 17px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + h6 { font-size: 14px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; } .subheader { color: #777; } p { margin: 0 0 20px; } @@ -81,17 +85,17 @@ blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } - hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } -/* @Links +/* #Links ================================================== */ a, a:visited { color: #333; font-weight: bold; text-decoration: underline; outline: 0; line-height: inherit; } a:hover, a:focus { color: #000; } p a, p a:visited { line-height: inherit; } -/* @List +/* #List ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } @@ -107,11 +111,11 @@ li p { line-height: 21px; } -/* @Grid +/* #Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } - .columns, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } /* Actual Grid */ .container .one.column { width: 40px; } @@ -154,9 +158,45 @@ /* Self Clearing Goodness */ .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns*/ + .clearfix:before, + .clearfix:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + .clearfix:after { + clear: both; } + .clearfix { + zoom: 1; } + + /* Scaling with a Fluid Grid */ + @media screen and (max-width: 959px) { + .container.fluid { max-width: 100%; } + .fluid .column, .fluid .columns { margin-left: 1%; margin-right: 1%; } + + .fluid.container .one.column { width: 4.25%; } + .fluid.container .two.columns { width: 10.5%; } + .fluid.container .three.columns { width: 16.75%; } + .fluid.container .four.columns { width: 23%; } + .fluid.container .five.columns { width: 29.25%; } + .fluid.container .six.columns { width: 35.5%; } + .fluid.container .seven.columns { width: 41.75%; } + .fluid.container .eight.columns { width: 48%; } + .fluid.container .nine.columns { width: 54.25%; } + .fluid.container .ten.columns { width: 60.5%; } + .fluid.container .eleven.columns { width: 66.75%; } + .fluid.container .twelve.columns { width: 73%; } + .fluid.container .thirteen.columns { width: 79.25%; } + .fluid.container .fourteen.columns { width: 85.5%; } + .fluid.container .fifteen.columns { width: 91.75%; } + .fluid.container .sixteen.columns { width: 98%; } + } - -/* @Media Queries +/* #Media Queries ================================================== */ /* Mobile portrait and smaller (code for 320px wide)*/ @@ -167,4 +207,4 @@ /* Tablet Portrait (Code for 768px) */ - @media screen and (max-width: 959px) {} + @media screen and (max-width: 959px) {} \ No newline at end of file diff --git a/css/ui.css b/src/stylesheets/ui.css similarity index 95% rename from css/ui.css rename to src/stylesheets/ui.css index 8d64e11..80d48fb 100644 --- a/css/ui.css +++ b/src/stylesheets/ui.css @@ -8,12 +8,12 @@ /* Table of Content ================================================== - @Tabs - @Buttons */ + #Tabs + #Buttons */ -/* @Tabs (activate in app.js) +/* #Tabs (activate in app.js) ================================================== */ ul.tabs { display: block; @@ -63,14 +63,14 @@
  • */ -/* @Buttons +/* #Buttons ================================================== */ a.button { background: #00a6fc; display: inline-block; padding: 9px 34px 11px; - color: #fff; + color: #fff !important; text-decoration: none; font-weight: bold; line-height: 1;