BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

started building out the documentation and trying to include a fluid grid (but nesting seems impossible)

Browse Source
This commit is contained in:
Dave Gamache 2011-05-03 07:36:26 -07:00
parent 48b90f6bb5
commit 887f2f4d86
19 changed files with 373 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README
View File

@ -1,3 +1,11 @@
<h3>Purpose</h3>
<p>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.</p>
Does this just go straight into the GIT description?
<h3>To Do List<h3>
<ul>
<li>Forms</li>
<li>Refine Buttons</li>
<li>Browser Testing</li>
<li>Mobile Grid and Styles</li>
<li>Documentation</li>
</ul>

64
documentation-assets/docs.css Normal file
View File

@ -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; }

BIN
documentation-assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
images/button-gloss.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 B

9
includes/doc-foot.php
View File

@ -1,9 +0,0 @@
<!-- JS
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="js/modernizr-1.7.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

180
index.php
View File

@ -1,43 +1,149 @@
<? $title = "Page Title";
include("includes/doc-head.php"); ?>
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<div class="container">
<div class="sixteen columns header">
<h1>Thellpo</h1>
<p class="lead">This is the best page of all time</p>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
<title><?= $page_title ?></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=960" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
<link rel="stylesheet" href="src/stylesheets/ui.css">
<link rel="stylesheet" href="src/stylesheets/layout.css">
<link rel="stylesheet" href="documentation-assets/docs.css">
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
<!-- JS (see footer for rest)
================================================== -->
<script src="src/javascripts/modernizr-1.7.min.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="container fluid">
<div class="four columns">
<nav>
<h1 id="logo">Skeleton</h1>
<ul>
<li><a class="active" href="#whatAndWhy">What & Why</a></li>
<li><a href="#basics">Basics</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#grid">Grid</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#mediaQueries">Media Queries</a></li>
<li><a href="#theFuture">The Future</a></li>
</ul>
</nav>
&nbsp;
</div>
<div class="twelve columns">
<header>
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
</header>
<hr class="large" />
<div class="doc-section" id="whyAndWhat">
<h3>What &amp; Why</h3>
<p>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</p>
</div>
<hr />
<div class="doc-section" id="basics">
<h3>Basics</h3>
<p>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</p>
</div>
<div class="eleven columns primary">
<p>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. </p>
<ul class="disc">
<li>This is awesome</li>
<li>This is awesome</li>
<li>This is awesome</li>
<li>This is awesome</li>
</ul>
<ul class="tabs">
<li><a class="active" href="#info1">Info 1</a></li>
<li><a href="#info2">Info 2</a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="info1"><p>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 <a href="">risus vestibulum</a>. Cras bibendum facilisis mauris. Morbi ac turpis vel neque mollis tempor accumsan in quam. Phasellus pulvinar viverra diam. </p>
<a href="" class="charcoal round nice button">Do It Hansel &raquo;</a></li>
<li id="info2">
<div class="eight columns alpha"><p>ALPHA</p></div>
<div class="three columns omega"><p>OMEGA</p></div>
</li>
</ul>
<hr />
<div class="doc-section" id="typography">
<h3>Typography</h3>
<p>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.</p>
<h1>Heading &lt;h1&gt;</h1>
<h2>Heading &lt;h2&gt;</h2>
<h3>Heading &lt;h3&gt;</h3>
<h4>Heading &lt;h4&gt;</h4>
<h5>Heading &lt;h5&gt;</h5>
<h6>Heading &lt;h6&gt;</h6>
</div>
<div class="five columns sidebar">
<h3>Sidebar</h3>
<p>This is some paragraph about something important although utimately it doesn't amatter</p>
<ul class="square">
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li><a href="">Hello</a></li>
</ul>
<hr />
<div class="doc-section clearfix" id="grid">
<h3>Grid</h3>
<p>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.</p>
<div class="one column alpha">One</div>
<div class="eleven columns omega">Eleven</div>
<div class="two columns alpha">Two</div>
<div class="ten columns omega">Ten</div>
<div class="three columns alpha">Three</div>
<div class="nine columns omega">Nine</div>
<div class="four columns alpha">Four</div>
<div class="eight columns omega">Eight</div>
<div class="five columns alpha">Five</div>
<div class="seven columns omega">Seven</div>
<div class="six columns alpha">Six</div>
<div class="six columns omega">Six</div>
<div class="seven columns alpha">Seven</div>
<div class="five columns omega">Five</div>
<div class="eight columns alpha">Eight</div>
<div class="four columns omega">Four</div>
<div class="nine columns alpha">Nine</div>
<div class="three columns omega">Three</div>
<div class="ten columns alpha">Ten</div>
<div class="two columns omega">Two</div>
<div class="eleven columns alpha">Eleven</div>
<div class="one column omega">One</div>
</div>
</div><!-- container -->
<hr />
<div class="doc-section" id="tabs">
<h3>Tabs</h3>
<p>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</p>
</div>
<hr />
<div class="doc-section" id="forms">
<h3>Forms</h3>
<p>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</p>
</div>
<hr />
<div class="doc-section" id="mediaQueries">
<h3>Media Queries</h3>
<p>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</p>
</div>
<hr />
<div class="doc-section" id="theFuture">
<h3>The Future</h3>
<p>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</p>
</div>
</div>
</div><!-- container -->
<? include("includes/doc-foot.php"); ?>
<!-- JS
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='src/javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="src/javascripts/modernizr-1.7.min.js"></script>
<script src="src/javascripts/app.js"></script>
</body>
</html>

0
fonts/README.css → src/fonts/README.css
View File

9
src/includes/doc-foot.php Normal file
View File

@ -0,0 +1,9 @@
<!-- JS
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="javascripts/modernizr-1.7.min.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>

26
includes/doc-head.php → src/includes/doc-head.php
View File

@ -1,7 +1,7 @@
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
@ -16,21 +16,23 @@
<!-- Mobile Specific Metas
================================================== -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width = 960px" />
<meta name="viewport" content="width=960" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/ui.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/ui.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
<!-- JS (see footer for rest)
================================================== -->
<script src="js/modernizr-1.7.min.js"></script>
<script src="javascripts/modernizr-1.7.min.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

29
src/index.php Normal file
View File

@ -0,0 +1,29 @@
<? $title = "Page Title";
include("includes/doc-head.php"); ?>
<div class="container">
<nav class="five columns">
<h1>Skeleton</h1>
<ul>
<li><a href="#whatAndWhy">What & Why</a></li>
<li><a href="#basics">Basics</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#grid">Grid</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#mediaQueries">Media Queries</a></li>
<li><a href="#theFuture">The Future</a></li>
</ul>
</nav>
<div class="eleven columns">
<header>
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
</header>
<br class="large" />
<h3>What &amp; Why</h3>
<p>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</p>
</div>
</div><!-- container -->
<? include("includes/doc-foot.php"); ?>

21
js/app.js → src/javascripts/app.js
View File

@ -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')
@ -37,9 +38,9 @@ $(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('');
}
});
});
}); */
});

0
js/jquery-1.5.1.min.js → src/javascripts/jquery-1.5.1.min.js vendored
View File

0
js/modernizr-1.7.min.js → src/javascripts/modernizr-1.7.min.js vendored
View File

0
css/forms.css → src/stylesheets/forms.css
View File

0
css/future_mobile_base.css → src/stylesheets/future_mobile_base.css
View File

13
src/stylesheets/ie.css Normal file
View File

@ -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 */

1
css/layout.css → src/stylesheets/layout.css
View File

@ -4,4 +4,3 @@
* www.skeleton.gs
* 4/30/2011
*/

92
css/base.css → src/stylesheets/skeleton.css vendored
View File

@ -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; }
@ -155,8 +159,44 @@
/* 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; }
/* @Media Queries
/* 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
================================================== */
/* Mobile portrait and smaller (code for 320px wide)*/

10
css/ui.css → src/stylesheets/ui.css
View File

@ -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 @@
<li id="info2"></li>
</ul> */
/* @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;