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

yeah, added examples and rewrote some tabs n' button code

Browse Source
This commit is contained in:
Dave Gamache 2011-05-06 18:30:05 -07:00
parent 7d12d78eed
commit e9ba01df76
12 changed files with 360 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README
View File

@ -1,11 +1 @@
<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>
<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>
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.

BIN
Skeleton-1.0.zip
View File

Binary file not shown.

6
documentation-assets/docs.css
View File

@ -114,6 +114,12 @@
color: #333; }
#grid .example-grid { overflow: hidden; }
#viewOnGithub {
margin-bottom: 20px;
font-size: 12px;
color: #999;
display: block; }
.resize {
position: fixed;

22
index.php → index.html
View File

@ -9,13 +9,12 @@
================================================== -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
<title><?= $page_title ?></title>
<title>Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development</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=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
@ -26,10 +25,9 @@
<link rel="stylesheet" href="documentation-assets/docs.css">
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
<!-- Favicons
<!-- Favicon
================================================== -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="src/images/favicon.ico">
</head>
<body>
@ -263,13 +261,14 @@
<div class="doc-section" id="theFuture">
<h3>The Future</h3>
<p>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. </p>
<p><strong>The ultimate goal is to build the best starting point for front-end development with an emphasis on simple, device-agnostic design.</strong> Help me get there - check out the project on Github or just email me (dhgamache [at] gmail.com) with questions/suggestions.</p>
<p><strong>The ultimate goal is to build the best starting point for front-end development with an emphasis on simple, device-agnostic design.</strong>t Help me get there - <a href="https://github.com/dhgamache/Skeleton">check out the project on Github</a> or just email me - <em>dhgamache [at] gmail.com</em> - with questions/suggestions.</p>
</div>
<hr />
<div class="doc-section" id="download">
<h3>Download</h3>
<p>The Skeleton download is a zip file (~50kb) containing all the CSS groundwork and JS goodies to get started on any web project. </p>
<a href="files/" class="button">Download Skeleton 1.0</a>
<a href="files/" class="button remove-bottom">Download Skeleton 1.0</a><br />
<a href="https://github.com/dhgamache/Skeleton" id="viewOnGithub">View Source on Github</a>
<p>The file structure for Skeleton is:</p>
<ul class="square">
<li><strong>index.html</strong>: The base html page that includes the necessary initial markup</li>
@ -293,9 +292,15 @@
<li>
<strong>images</strong> <em>(folder)</em>
</li>
<li><strong>robots.txt</strong>: SEO, search-crawler file. Don't need to touch it, just there for your own good</li>
<li><strong>404.html</strong>: Placeholder 404 page just to get you started</li>
</ul>
</div>
<hr />
<div class="doc-section" id="attribution">
<p><em>Created by <a href="http://www.davegamache.com">Dave Gamache</a>, 2011 &copy;</em></p>
</div>
</div><!-- content -->
</div><!-- container -->
<div class="resize"></div>
@ -309,11 +314,9 @@
================================================== -->
<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>
<script>
$('.hidden-code').click(function(e) {
e.preventDefault();
$(this).children('.gist').slideToggle();
@ -329,5 +332,6 @@
$(this).html(originalText);
})
</script>
</body>
</html>

34
src/includes/doc-head.php → src/404.html
View File

@ -9,30 +9,42 @@
================================================== -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
<title><?= $page_title ?></title>
<title>Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development</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" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.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)
<!-- Favicon
================================================== -->
<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">
<link rel="shortcut icon" href="src/images/favicon.ico">
</head>
<body>
<div class="container">
<h1 style="margin-top: 100px; text-align:center">Sorry. Couldn't Find That Page!</h1>
</div>
<!-- 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/app.js"></script>
</body>
</html>

BIN
src/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
src/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='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>

71
src/index.html Normal file
View File

@ -0,0 +1,71 @@
<!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>
<!-- 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="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
<!-- Favicon
================================================== -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div class="container">
<div class="sixteen columns">
<h1 class="bottomless">Skeleton</h1>
<p class="lead"><a href="http://www.skeleton.gs">skeleton.gs</a></p>
</div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
<div class="one column" style="background: #999; height: 400px;"></div>
</div><!-- container -->
<!-- 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/app.js"></script>
<!-- End Document
================================================== -->
</body>
</html>

29
src/index.php
View File

@ -1,29 +0,0 @@
<? $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"); ?>

5
src/robots.txt Executable file
View File

@ -0,0 +1,5 @@
# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
User-agent: *

34
src/stylesheets/base.css
View File

@ -69,8 +69,8 @@
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 30px; font-weight: normal; }
h6 { font-size: 14px; line-height: 30px; }
h5 { font-size: 17px; line-height: 24px; font-weight: normal; }
h6 { font-size: 14px; line-height: 21px; }
.subheader { color: #777; }
p { margin: 0 0 20px; }
@ -166,7 +166,7 @@
/* Hovers ---------- */
.button:hover { background-color: #000; }
.secondary.button:hover { background-color: #555; }
.secondary.button:hover { background-color: #777; }
@ -194,15 +194,32 @@
border: solid 1px #ddd;
border-width: 1px 0 0 1px;
margin: 0;
background: #eee;
background: #f5f5f5;
font-size: 13px; }
ul.tabs li a.active {
background: #fff;
height: 30px;
position: relative;
top: -4px;
padding-top: 4px;
border-right-width: 1px;
margin: 0 -1px 0 0;
color: #111; }
color: #111;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px; }
ul.tabs li:first-child a {
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px; }
ul.tabs li:last-child a {
border-width: 1px 1px 0 1px; }
border-width: 1px 1px 0 1px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px; }
ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; }
@ -263,5 +280,10 @@
font-size: 13px;
color: #444; }
/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.add-bottom { margin-bottom: 20px !important; }

210
zurb.html Normal file
View File

@ -0,0 +1,210 @@
<!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>
<!-- 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="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="src/stylesheets/base.css">
<link rel="stylesheet" href="src/stylesheets/skeleton.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]-->
<!-- Favicon
================================================== -->
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div class="container">
<div class="sixteen columns">
<div id="content">
<div class="page-header home-header">
<h1>Design for people.</h1>
<h2>We're <a href="http://www.zurb.com/team/" title="Check out the ZURB Team">a close-knit team</a> of interaction designers<br> and strategists that help companies <a href="http://www.zurb.com/work" title="See some examples of our work">design better</a>.</h2>
<hr />
</div>
</div>
<div class="five columns">
<h3>Who We Are</h3>
<p>We're not just a web design agency. We're not just a graphic design firm. We're not just coders, and we're not just artists. <strong>We're a team of T-shaped interaction designers and design strategists who help grow businesses.</strong> (Oh, and we're not <em>just</em> dudes with expensive chairs, either.)</p>
<p>To get an idea of how we work, take a look at one of <a href="http://www.zurb.net/zurbwired/projects/getting_started/index.php" title="ZURBwired Extranet">our extranet sites</a>. It's a project we did for a nonprofit in <a href="http://www.zurb.net/zurbwired/" title="ZURBwired Project">24 coffee-fueled hours</a>.</p>
<hr>
<h4>Latest Blog Posts</h4>
<p>We write about <a href="/blog/topic/interaction-design">interaction design</a>, <a href="/blog/topic/interaction-design">design strategy</a>, and <a href="/blog/topics/">more</a> in our blog.</p>
<ul class="recent blog-posts">
<li>
<h5><a href="/article/608/full-set-of-stencils-for-sketching-iphone">Full Set of Stencils for Sketching iPhone, iPad &amp; Android</a></h5>
<small>3 hours ago by <a href="http://www.zurb.com/team/dmitry-dragilev" title="Learn more about Dmitry Dragilev">Dmitry</a> <span>¥</span> <a href="/article/608/full-set-of-stencils-for-sketching-iphone#comments">0 Comments</a></small>
</li>
<li>
<h5><a href="/article/659/simplify-your-product-features-early-on">Simplify Your Product Features Early On</a></h5>
<small>1 day ago by <a href="http://www.zurb.com/team/dmitry-dragilev" title="Learn more about Dmitry Dragilev">Dmitry</a> <span>¥</span> <a href="/article/659/simplify-your-product-features-early-on#comments">5 Comments</a></small>
</li>
<li>
<h5><a href="/article/660/ui-problems-with-amazons-kindle">UI Problems with Amazon's Kindle?</a></h5>
<small>2 days ago by <a href="http://www.zurb.com/team/dmitry-dragilev" title="Learn more about Dmitry Dragilev">Dmitry</a> <span>¥</span> <a href="/article/660/ui-problems-with-amazons-kindle#comments">6 Comments</a></small>
</li>
<li>
<h5><a href="/article/658/dont-bolt-customers-onto-your-idea">Don't Bolt Customers Onto Your Idea</a></h5>
<small>3 days ago by <a href="http://www.zurb.com/team/dmitry-dragilev" title="Learn more about Dmitry Dragilev">Dmitry</a> <span>¥</span> <a href="/article/658/dont-bolt-customers-onto-your-idea#comments">0 Comments</a></small>
</li>
<li>
<h5><a href="/article/657/listen--dig-deeper">Listen &amp; Dig Deeper</a></h5>
<small>3 days ago by <a href="http://www.zurb.com/team/louis-corso" title="Learn more about Louis Corso">Louis</a> <span>¥</span> <a href="/article/657/listen--dig-deeper#comments">6 Comments</a></small>
</li>
</ul>
<p class="green more-link"><a href="http://www.zurb.com/blog">Visit the ZURBlog È</a></p>
</div>
<div class="five columns" id="our-services">
<h3>Our Services</h3>
<ol>
<li>
<h5><a href="/work/services/interaction_design_strategy" title="Read more about our Interaction Design and Strategy service">Interaction Design &amp; Strategy</a></h5>
We cut out all the funny reports and deliver actionable ideas for your online products.
</li>
<li>
<h5><a href="/work/services/day_sessions" title="Read more about our Single Day Sessions service">Single Day Sessions</a></h5>
Need some help right away? We'll get together for an entire day of strategy and design work.
</li>
<li>
<h5><a href="/work/services/onsite_collaboration" title="Read more about our On-Site Collaboration service">On-Site Collaboration</a></h5>
We love working together in bursts. It's where great ideas can get done fast.
</li>
<li>
<h5><a href="/work/services/training_education" title="Read more about our Training and Education service">Training and Education</a></h5>
We're gonna chop you up and turn you into a lean, mean start-up machine.
</li>
</ol>
<p><a href="http://www.zurb.com/work" title="Learn more about the work ZURB does">Learn more about our work È</a></p>
<hr>
<h4>Our Clients Love Us</h4>
<p>If it weren't for our great clients, we wouldn't have gotten this far. Here's what they're saying:</p>
<blockquote>
<p>ZURB brought to the table a well-thought-out process that allowed our team to focus on the creative aspects of our website design. They also came up with a number of suggestions that went well beyond our current thinking.</p>
<cite><strong>Raymond King</strong> CEO, AboutUs</cite>
</blockquote>
</div>
<div class="five columns">
<h3>100 Start-ups, Since 1998.</h3>
<p>We've helped 100 start-ups since 1998, generating more than <strong>half a billion dollars</strong> in market capitalization from the leaders in several world markets.</p>
<ul id="worlds-greatest">
<li id="facebook">
<img src="images/logos/facebook.jpg" alt="facebook.com">
<p>Largest Social Network<br>in the World</p>
</li>
<li id="yahoo">
<img src="images/logos/yahoo.gif" alt="Yahoo.com">
<p>World's Largest Network of Media Properties</p>
</li>
<li id="britney">
<img src="images/logos/britney-spears-logo.jpg" alt="BritneySpears.com">
<p><span>Most Searched Celebrity</span> Online, Two Years Running</p>
</li>
<li id="playlist">
<img src="images/logos/playlist-logo.gif" alt="Playlist.com">
<p><span>Fastest Growing Website</span> in the USA 2009</p>
</li>
<li id="zazzle">
<img src="images/logos/zazzle-logo.gif" alt="Zazzle">
<p>World's Largest Custom Products Marketplace</p>
</li>
<li id="ebay">
<img src="images/logos/ebay-logo.gif" alt="eBay">
<p>World's Largest Marketplace</p>
</li>
<li id="photobucket">
<img src="images/logos/photobucket-logo.gif" alt="Photobucket">
<p><span>World's Largest Photo</span> Sharing Website</p>
</li>
<li id="nyse">
<img src="images/logos/nyse-logo.gif" alt="NYSE">
<p>World's Most Prestigious Financial Institution</p>
</li>
<li id="reuters">
<img src="images/logos/reuters-logo.jpg" alt="Reuters">
<p>World's Largest Multimedia News Agency</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function() {
var ve = document.createElement('script'); ve.type = 'text/javascript'; ve.async = true;
ve.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://zurb.verifyapp.com/embed/top-bar/8.js?buster=' + Math.random();
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ve, s);
})();
</script>
</div>
<!-- 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/app.js"></script>
<script>
$('.hidden-code').click(function(e) {
e.preventDefault();
$(this).children('.gist').slideToggle();
})
var originalText;
$('.example-grid').children().hover(
function() {
originalText = $(this).text();
$(this).html($(this).width()+'px');
},
function() {
$(this).html(originalText);
})
</script>
</body>
</html>