changed the git repo to the src folder, browser tested, changed the tabs to work cross browser and to stack...removed the IE conditional stylesheet
This commit is contained in:
Dave Gamache
parent
e4ff97ce7a
commit
82c35f64b7
@ -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; }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
330
index.html
330
index.html
@ -9,9 +9,12 @@
|
|||||||
================================================== -->
|
================================================== -->
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
|
||||||
<title>Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development</title>
|
<title>Page Title</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
<!-- Mobile Specific Metas
|
<!-- Mobile Specific Metas
|
||||||
================================================== -->
|
================================================== -->
|
||||||
@ -19,317 +22,52 @@
|
|||||||
|
|
||||||
<!-- CSS
|
<!-- CSS
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="stylesheet" href="src/stylesheets/base.css">
|
<link rel="stylesheet" href="stylesheets/base.css">
|
||||||
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
|
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
||||||
<link rel="stylesheet" href="src/stylesheets/layout.css">
|
<link rel="stylesheet" href="stylesheets/layout.css">
|
||||||
<link rel="stylesheet" href="documentation-assets/docs.css">
|
|
||||||
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
|
|
||||||
|
|
||||||
<!-- Favicon
|
<!-- Favicon
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="shortcut icon" href="src/images/favicon.ico">
|
<link rel="shortcut icon" href="favicon.ico">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Primary Page Layout
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="three columns sidebar">
|
<div class="sixteen columns">
|
||||||
<nav>
|
<h1 class="bottomless">Skeleton</h1>
|
||||||
<h3 id="logo">Skeleton.gs</h3>
|
<p class="lead"><a href="http://www.skeleton.gs">skeleton.gs</a></p>
|
||||||
<ul>
|
|
||||||
<li><a href="#whatAndWhy">What & Why</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>
|
|
||||||
<li class="download"><a href="#download">Download</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="twelve columns content offset-by-one">
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<header>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<h1>A Beautiful Boilerplate for Responsive, Mobile-Friendly Development</h1>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
</header>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<hr class="large" />
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<div class="doc-section" id="whatAndWhy">
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<h3>What Is It?</h3>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<p>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:</p>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<div class="row clearfix">
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<div class="four columns alpha">
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<img src="documentation-assets/images/responsive.jpg" alt="responsive" width="220" height="113" />
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
</div>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<div class="eight columns omega">
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<h5>Responsive Grid Down To Mobile</h5>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
<p>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). <strong>Go ahead, resize this page!</strong></p>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
</div>
|
<div class="one column" style="background: #999; height: 400px;"></div>
|
||||||
</div>
|
|
||||||
<div class="row clearfix">
|
|
||||||
<div class="four columns alpha">
|
|
||||||
<img src="documentation-assets/images/fast.jpg" alt="responsive" width="220" height="113" />
|
|
||||||
</div>
|
|
||||||
<div class="eight columns omega">
|
|
||||||
<h5>Fast to Start</h5>
|
|
||||||
<p>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.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row clearfix">
|
|
||||||
<div class="four columns alpha">
|
|
||||||
<img src="documentation-assets/images/foundation.jpg" alt="responsive" width="220" height="113" />
|
|
||||||
</div>
|
|
||||||
<div class="eight columns omega">
|
|
||||||
<h5>Style Agnostic</h5>
|
|
||||||
<p>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.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<ul class="square">
|
|
||||||
<li><strong>Responsive</strong>: Skeleton was designed to work beautifully across modern browsers at any size, but more important across all of your devices.</li>
|
|
||||||
<li><strong>Style Agnostic</strong>: Very basic styles have been applied to make Skeleton awesome out of the box, but more importantly it's ready for <em>your </em>style.</li>
|
|
||||||
<li><strong>Fast</strong>: alksdfj alkds;fj alksdfj</li>
|
|
||||||
</ul>
|
|
||||||
-->
|
|
||||||
<!--
|
|
||||||
<figure class="iphone">
|
|
||||||
<img src="documentation-assets/images/iphone.jpg" alt="iphone" />
|
|
||||||
<figcaption>Mobile</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure class="ipad">
|
|
||||||
<img src="documentation-assets/images/ipad.jpg" alt="ipad" />
|
|
||||||
<figcaption>Tablet</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure class="laptop">
|
|
||||||
<img src="documentation-assets/images/macbook.jpg" alt="macbook" />
|
|
||||||
<figcaption>Laptop/Desktop</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<hr />
|
|
||||||
<!--
|
|
||||||
<div class="doc-section" id="downloads">
|
|
||||||
<h3>Downloads</h3>
|
|
||||||
<p>Getting the ball rolling with Skeleton is dead simple. You can download the entire boilerplate zip, just the skeleton.gs grid system by itself, or the PSDs for designing on the skeleton grid.</p>
|
|
||||||
<a class="button" href="">Download Full Zip</a>
|
|
||||||
<a class="secondary button" href="">Only Grid CSS</a>
|
|
||||||
<a class="secondary button" href="">Only Grid PSDs</a>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
-->
|
|
||||||
<div class="doc-section clearfix" id="grid">
|
|
||||||
<h3>The Grid</h3>
|
|
||||||
<p>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. <strong>Go ahead, resize the browser and watch as the layout reacts!</strong></p>
|
|
||||||
<div class="example-grid">
|
|
||||||
<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 class="hidden-code">
|
|
||||||
<a href="">Code Example</a>
|
|
||||||
<script src="https://gist.github.com/959632.js?file=Skeleton%20Grid"></script>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="doc-section clearfix" 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. Regular paragraphs are set at a 14px base with 21px line height.</p>
|
|
||||||
<div class="seven columns alpha headings">
|
|
||||||
<h1>Heading <h1></h1>
|
|
||||||
<h2>Heading <h2></h2>
|
|
||||||
<h3>Heading <h3></h3>
|
|
||||||
<h4>Heading <h4></h4>
|
|
||||||
<h5>Heading <h5></h5>
|
|
||||||
<h6>Heading <h6></h6>
|
|
||||||
</div>
|
|
||||||
<div class="five columns omega">
|
|
||||||
<blockquote>
|
|
||||||
<p>This is a blockquote style example. It stands out, but is awesome</p>
|
|
||||||
<cite>Dave Gamache, Skeleton Creator</cite>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="doc-section" id="buttons">
|
|
||||||
<h3>Buttons</h3>
|
|
||||||
<p>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.</p>
|
|
||||||
<a href="#" class="button">Click Me For Action</a>
|
|
||||||
<div class="hidden-code">
|
|
||||||
<a href="">Code Example</a>
|
|
||||||
<!-- <script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="doc-section" id="tabs">
|
|
||||||
<h3>Tabs</h3>
|
|
||||||
<p>Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.</p>
|
|
||||||
<ul class="tabs">
|
|
||||||
<li><a class="active" href="#simple">Simple</a></li>
|
|
||||||
<li><a href="#lightweight">Lightweight</a></li>
|
|
||||||
<li><a href="#mobileFriendly">Mobile</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="tabs-content">
|
|
||||||
<li class="active" id="simpleTab">The tabs are clean and simple unordered-list markup and basic CSS.</li>
|
|
||||||
<li id="lightweightTab">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
|
|
||||||
<li id="mobileFriendlyTab">The tabs work like a charm even on mobile devices.</li>
|
|
||||||
</ul>
|
|
||||||
<div class="hidden-code">
|
|
||||||
<a href="">Code Example</a>
|
|
||||||
<!-- <script type="text/javascript" src="http://snipt.net/embed/4b46e3f57681fb03107aee169cd7e252"></script> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="doc-section clearfix" id="forms">
|
|
||||||
<h3>Forms</h3>
|
|
||||||
<p>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. </p>
|
|
||||||
<div class="four columns alpha">
|
|
||||||
<form action="">
|
|
||||||
<label for="regularInput">Regular Input</label>
|
|
||||||
<input type="text" id="regularInput" />
|
|
||||||
<label for="regularTextarea">Regular Textarea</label>
|
|
||||||
<textarea id="regularTextarea"></textarea>
|
|
||||||
<label for="selectList">Select List</label>
|
|
||||||
<select id="selectList">
|
|
||||||
<option value="Option 1">Option 1</option>
|
|
||||||
<option value="Option 2">Option 2</option>
|
|
||||||
<option value="Option 3">Option 3</option>
|
|
||||||
<option value="Option 4">Option 4</option>
|
|
||||||
</select>
|
|
||||||
<fieldset>
|
|
||||||
<label for="">Checkboxes</label>
|
|
||||||
<label for="regularCheckbox">
|
|
||||||
<input type="checkbox" id="regularCheckbox" value="checkbox 1" />
|
|
||||||
<span>Regular Checkbox</span>
|
|
||||||
</label>
|
|
||||||
<label for="secondRegularCheckbox">
|
|
||||||
<input type="checkbox" id="secondRegularCheckbox" value="checkbox 2" />
|
|
||||||
<span>Regular Checkbox</span>
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset>
|
|
||||||
<label for="">Radio Buttons</label>
|
|
||||||
<label for="regularRadio">
|
|
||||||
<input type="radio" name="radios" id="regularRadio" value="radio 1" />
|
|
||||||
<span>Regular Radio</span>
|
|
||||||
</label>
|
|
||||||
<label for="secondRegularRadio">
|
|
||||||
<input type="radio" name="radios" id="secondRegularRadio" value="radio 2" />
|
|
||||||
<span>Regular Radio</span>
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
<button type="submit">Submit Form</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="doc-section" id="mediaQueries">
|
|
||||||
<h3>Media Queries</h3>
|
|
||||||
<p>Skeleton uses a <strong>lot</strong> 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:</p>
|
|
||||||
<ul class="square">
|
|
||||||
<li><strong>iPad Portrait</strong> or any other tablet device </li>
|
|
||||||
<li><strong>iPhone</strong> or mobile styles in general for small screens</li>
|
|
||||||
<li><strong>iPhone Landscape</strong> or other mobile devices with a large screen size (cascades over standard mobile styles)</li>
|
|
||||||
<li><strong>Less than 960</strong> to style anything across browsers and devices that is smaller than the base grid</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<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>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 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>
|
|
||||||
<li>
|
|
||||||
<strong>stylesheets</strong> <em>(folder)</em>
|
|
||||||
<ul class="circle">
|
|
||||||
<li><strong>base.css</strong>: Basic styles of Skeleton</li>
|
|
||||||
<li><strong>skeleton.css</strong>: The glorious Skeleton grid</li>
|
|
||||||
<li><strong>layout.css</strong>: Empty file made for your site specific styles</li>
|
|
||||||
<li><strong>ie.css</strong>: Empty CSS file for IE specific needs</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>javascripts</strong> <em>(folder)</em>
|
|
||||||
<ul class="circle">
|
|
||||||
<li><strong>jquery-1.5.1.min.js</strong>: jQuery is served the Google CDN, but I've provided a local fallback</li>
|
|
||||||
<li><strong>app.css</strong>: Contains code for activating tabs and should house all of your sites JS</li>
|
|
||||||
<li><strong>Plugins</strong> <em>(folder)</em>: An empty directory for your jQuery plugins</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<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 ©</em></p>
|
|
||||||
</div>
|
|
||||||
</div><!-- content -->
|
|
||||||
</div><!-- container -->
|
</div><!-- container -->
|
||||||
|
|
||||||
<div class="resize"></div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- JS
|
<!-- JS
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
|
<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>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
|
||||||
<script src="src/javascripts/app.js"></script>
|
<script src="javascripts/app.js"></script>
|
||||||
|
|
||||||
<script>
|
<!-- End Document
|
||||||
$('.hidden-code').click(function(e) {
|
================================================== -->
|
||||||
e.preventDefault();
|
</body>
|
||||||
$(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>
|
</html>
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.0
|
|
||||||
* 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 */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -178,14 +178,14 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 30px;
|
|
||||||
border-bottom: solid 1px #ddd; }
|
border-bottom: solid 1px #ddd; }
|
||||||
ul.tabs li {
|
ul.tabs li {
|
||||||
display: block;
|
display: block;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
float: left; }
|
float: left;
|
||||||
|
margin-bottom: 0; }
|
||||||
ul.tabs li a {
|
ul.tabs li a {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -227,6 +227,20 @@
|
|||||||
ul.tabs-content > li { display:none; }
|
ul.tabs-content > li { display:none; }
|
||||||
ul.tabs-content > li.active { display: block; }
|
ul.tabs-content > li.active { display: block; }
|
||||||
|
|
||||||
|
/* Clearfixing tabs for beautiful stacking */
|
||||||
|
ul.tabs:before,
|
||||||
|
ul.tabs:after {
|
||||||
|
content: '\0020';
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
height: 0; }
|
||||||
|
ul.tabs:after {
|
||||||
|
clear: both; }
|
||||||
|
ul.tabs {
|
||||||
|
zoom: 1; }
|
||||||
|
|
||||||
/* Sample Markup
|
/* Sample Markup
|
||||||
<ul class="tabs">
|
<ul class="tabs">
|
||||||
<li><a class="active" href="#info1"></a></li>
|
<li><a class="active" href="#info1"></a></li>
|
||||||
@ -245,8 +259,11 @@
|
|||||||
margin-bottom: 20px; }
|
margin-bottom: 20px; }
|
||||||
fieldset {
|
fieldset {
|
||||||
margin-bottom: 20px; }
|
margin-bottom: 20px; }
|
||||||
input[type="text"], input[type="password"],
|
input[type="text"],
|
||||||
textarea, select {
|
input[type="password"],
|
||||||
|
input[type="email"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -261,7 +278,11 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: #fff; }
|
background: #fff; }
|
||||||
input:focus,
|
select {
|
||||||
|
padding: 0; }
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus,
|
||||||
|
input[type="email"]:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
color: #444;
|
color: #444;
|
||||||
@ -269,7 +290,7 @@
|
|||||||
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
||||||
box-shadow: 0 0 3px rgba(0,0,0,.2); }
|
box-shadow: 0 0 3px rgba(0,0,0,.2); }
|
||||||
textarea {
|
textarea {
|
||||||
height: 60px; }
|
min-height: 60px; }
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -9,19 +9,12 @@
|
|||||||
/* Table of Content
|
/* Table of Content
|
||||||
==================================================
|
==================================================
|
||||||
#Base 960 Grid
|
#Base 960 Grid
|
||||||
#Responsive: Fluid Grid for Downscaling
|
|
||||||
#Responsive: Full Fluid Grid
|
|
||||||
#Mobile: iPad Portrait
|
#Mobile: iPad Portrait
|
||||||
#Mobile: iPhone Portrait
|
#Mobile: iPhone Portrait
|
||||||
#Mobile: iPhone Landscape
|
#Mobile: iPhone Landscape
|
||||||
#Clearing
|
#Clearing
|
||||||
|
|
||||||
|
|
||||||
/* Quick Note: The way the grid system works is that the default is a 960 grid that
|
|
||||||
scales identical to it's mobile styles. There is also an option to make browser version
|
|
||||||
fluid rather than mirror mobile on downscale (.fluid960). There is also a fully fluid grid (.fluid),
|
|
||||||
which applies to mobile as well.*/
|
|
||||||
|
|
||||||
|
|
||||||
/* #Base 960 Grid
|
/* #Base 960 Grid
|
||||||
================================================== */
|
================================================== */
|
||||||
@ -1,92 +0,0 @@
|
|||||||
<!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>Skeleton: Test One</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="test/test-one/main.css">
|
|
||||||
<link rel="stylesheet" href="test/test-one/nivo-slider.css">
|
|
||||||
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
|
|
||||||
|
|
||||||
<!-- Favicon
|
|
||||||
================================================== -->
|
|
||||||
<link rel="shortcut icon" href="src/images/favicon.ico">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<nav class="sixteen columns">
|
|
||||||
<div class="three columns alpha logo">
|
|
||||||
<h4>Logo Stuff</h4>
|
|
||||||
</div>
|
|
||||||
<div class="thirteen omega columns">
|
|
||||||
<ul>
|
|
||||||
<li><a href="">Home</a></li>
|
|
||||||
<li><a href="">Plans</a></li>
|
|
||||||
<li><a href="">Tour</a></li>
|
|
||||||
<li><a href="">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="sixteen columns">
|
|
||||||
<div id="slider">
|
|
||||||
<img src="test/test-one/slider.jpg" alt="slider" />
|
|
||||||
<img src="test/test-one/slider-2.jpg" alt="slider" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="one-third column">
|
|
||||||
<img src="" alt="" />
|
|
||||||
<h5>Title</h5>
|
|
||||||
<p>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!</p>
|
|
||||||
</div>
|
|
||||||
<div class="one-third column">
|
|
||||||
<img src="" alt="" />
|
|
||||||
<h5>Title</h5>
|
|
||||||
<p>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!</p>
|
|
||||||
</div>
|
|
||||||
<div class="one-third column">
|
|
||||||
<img src="" alt="" />
|
|
||||||
<h5>Title</h5>
|
|
||||||
<p>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!</p>
|
|
||||||
</div>
|
|
||||||
</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="test/test-one/jquery.nivo.slider.pack.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(window).load(function() {
|
|
||||||
$('#slider').nivoSlider();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery Nivo Slider v2.5.1
|
|
||||||
* http://nivo.dev7studios.com
|
|
||||||
*
|
|
||||||
* Copyright 2011, Gilbert Pellegrom
|
|
||||||
* Free to use and abuse under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*
|
|
||||||
* March 2010
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function($){var NivoSlider=function(element,options){var settings=$.extend({},$.fn.nivoSlider.defaults,options);var vars={currentSlide:0,currentImage:'',totalSlides:0,randAnim:'',running:false,paused:false,stop:false};var slider=$(element);slider.data('nivo:vars',vars);slider.css('position','relative');slider.addClass('nivoSlider');var kids=slider.children();kids.each(function(){var child=$(this);var link='';if(!child.is('img')){if(child.is('a')){child.addClass('nivo-imageLink');link=child;}
|
|
||||||
child=child.find('img:first');}
|
|
||||||
var childWidth=child.width();if(childWidth==0)childWidth=child.attr('width');var childHeight=child.height();if(childHeight==0)childHeight=child.attr('height');if(childWidth>slider.width()){slider.width(childWidth);}
|
|
||||||
if(childHeight>slider.height()){slider.height(childHeight);}
|
|
||||||
if(link!=''){link.css('display','none');}
|
|
||||||
child.css('display','none');vars.totalSlides++;});if(settings.startSlide>0){if(settings.startSlide>=vars.totalSlides)settings.startSlide=vars.totalSlides-1;vars.currentSlide=settings.startSlide;}
|
|
||||||
if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
|
|
||||||
if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
|
|
||||||
slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');slider.append($('<div class="nivo-caption"><p></p></div>').css({display:'none',opacity:settings.captionOpacity}));var processCaption=function(settings){var nivoCaption=$('.nivo-caption',slider);if(vars.currentImage.attr('title')!=''){var title=vars.currentImage.attr('title');if(title.substr(0,1)=='#')title=$(title).html();if(nivoCaption.css('display')=='block'){nivoCaption.find('p').fadeOut(settings.animSpeed,function(){$(this).html(title);$(this).fadeIn(settings.animSpeed);});}else{nivoCaption.find('p').html(title);}
|
|
||||||
nivoCaption.fadeIn(settings.animSpeed);}else{nivoCaption.fadeOut(settings.animSpeed);}}
|
|
||||||
processCaption(settings);var timer=0;if(!settings.manualAdvance&&kids.length>1){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
|
|
||||||
if(settings.directionNav){slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+settings.prevText+'</a><a class="nivo-nextNav">'+settings.nextText+'</a></div>');if(settings.directionNavHide){$('.nivo-directionNav',slider).hide();slider.hover(function(){$('.nivo-directionNav',slider).show();},function(){$('.nivo-directionNav',slider).hide();});}
|
|
||||||
$('a.nivo-prevNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');});$('a.nivo-nextNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');});}
|
|
||||||
if(settings.controlNav){var nivoControl=$('<div class="nivo-controlNav"></div>');slider.append(nivoControl);for(var i=0;i<kids.length;i++){if(settings.controlNavThumbs){var child=kids.eq(i);if(!child.is('img')){child=child.find('img:first');}
|
|
||||||
if(settings.controlNavThumbsFromRel){nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('rel')+'" alt="" /></a>');}else{nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('src').replace(settings.controlNavThumbsSearch,settings.controlNavThumbsReplace)+'" alt="" /></a>');}}else{nivoControl.append('<a class="nivo-control" rel="'+i+'">'+(i+1)+'</a>');}}
|
|
||||||
$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');$('.nivo-controlNav a',slider).live('click',function(){if(vars.running)return false;if($(this).hasClass('active'))return false;clearInterval(timer);timer='';slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');vars.currentSlide=$(this).attr('rel')-1;nivoRun(slider,kids,settings,'control');});}
|
|
||||||
if(settings.keyboardNav){$(window).keypress(function(event){if(event.keyCode=='37'){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');}
|
|
||||||
if(event.keyCode=='39'){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');}});}
|
|
||||||
if(settings.pauseOnHover){slider.hover(function(){vars.paused=true;clearInterval(timer);timer='';},function(){vars.paused=false;if(timer==''&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}});}
|
|
||||||
slider.bind('nivo:animFinished',function(){vars.running=false;$(kids).each(function(){if($(this).is('a')){$(this).css('display','none');}});if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
|
|
||||||
if(timer==''&&!vars.paused&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
|
|
||||||
settings.afterChange.call(this);});var createSlices=function(slider,settings,vars){for(var i=0;i<settings.slices;i++){var sliceWidth=Math.round(slider.width()/settings.slices);if(i==settings.slices-1){slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:(slider.width()-(sliceWidth*i))+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}else{slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:sliceWidth+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}}}
|
|
||||||
var createBoxes=function(slider,settings,vars){var boxWidth=Math.round(slider.width()/settings.boxCols);var boxHeight=Math.round(slider.height()/settings.boxRows);for(var rows=0;rows<settings.boxRows;rows++){for(var cols=0;cols<settings.boxCols;cols++){if(cols==settings.boxCols-1){slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:(slider.width()-(boxWidth*cols))+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}else{slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:boxWidth+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}}}}
|
|
||||||
var nivoRun=function(slider,kids,settings,nudge){var vars=slider.data('nivo:vars');if(vars&&(vars.currentSlide==vars.totalSlides-1)){settings.lastSlide.call(this);}
|
|
||||||
if((!vars||vars.stop)&&!nudge)return false;settings.beforeChange.call(this);if(!nudge){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}else{if(nudge=='prev'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}
|
|
||||||
if(nudge=='next'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}}
|
|
||||||
vars.currentSlide++;if(vars.currentSlide==vars.totalSlides){vars.currentSlide=0;settings.slideshowEnd.call(this);}
|
|
||||||
if(vars.currentSlide<0)vars.currentSlide=(vars.totalSlides-1);if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
|
|
||||||
if(settings.controlNav){$('.nivo-controlNav a',slider).removeClass('active');$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');}
|
|
||||||
processCaption(settings);$('.nivo-slice',slider).remove();$('.nivo-box',slider).remove();if(settings.effect=='random'){var anims=new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');vars.randAnim=anims[Math.floor(Math.random()*(anims.length+1))];if(vars.randAnim==undefined)vars.randAnim='fade';}
|
|
||||||
if(settings.effect.indexOf(',')!=-1){var anims=settings.effect.split(',');vars.randAnim=anims[Math.floor(Math.random()*(anims.length))];if(vars.randAnim==undefined)vars.randAnim='fade';}
|
|
||||||
vars.running=true;if(settings.effect=='sliceDown'||settings.effect=='sliceDownRight'||vars.randAnim=='sliceDownRight'||settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'top':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
|
||||||
timeBuff+=50;i++;});}
|
|
||||||
else if(settings.effect=='sliceUp'||settings.effect=='sliceUpRight'||vars.randAnim=='sliceUpRight'||settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'bottom':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
|
||||||
timeBuff+=50;i++;});}
|
|
||||||
else if(settings.effect=='sliceUpDown'||settings.effect=='sliceUpDownRight'||vars.randAnim=='sliceUpDown'||settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var v=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);if(i==0){slice.css('top','0px');i++;}else{slice.css('bottom','0px');i=0;}
|
|
||||||
if(v==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
|
||||||
timeBuff+=50;v++;});}
|
|
||||||
else if(settings.effect=='fold'||vars.randAnim=='fold'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;$('.nivo-slice',slider).each(function(){var slice=$(this);var origWidth=slice.width();slice.css({top:'0px',height:'100%',width:'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
|
||||||
timeBuff+=50;i++;});}
|
|
||||||
else if(settings.effect=='fade'||vars.randAnim=='fade'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':slider.width()+'px'});firstSlice.animate({opacity:'1.0'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
|
|
||||||
else if(settings.effect=='slideInRight'||vars.randAnim=='slideInRight'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
|
|
||||||
else if(settings.effect=='slideInLeft'||vars.randAnim=='slideInLeft'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1','left':'','right':'0px'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){firstSlice.css({'left':'0px','right':''});slider.trigger('nivo:animFinished');});}
|
|
||||||
else if(settings.effect=='boxRandom'||vars.randAnim=='boxRandom'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var boxes=shuffle($('.nivo-box',slider));boxes.each(function(){var box=$(this);if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed);},(100+timeBuff));}
|
|
||||||
timeBuff+=20;i++;});}
|
|
||||||
else if(settings.effect=='boxRain'||vars.randAnim=='boxRain'||settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var rowIndex=0;var colIndex=0;var box2Darr=new Array();box2Darr[rowIndex]=new Array();var boxes=$('.nivo-box',slider);if(settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){boxes=$('.nivo-box',slider)._reverse();}
|
|
||||||
boxes.each(function(){box2Darr[rowIndex][colIndex]=$(this);colIndex++;if(colIndex==settings.boxCols){rowIndex++;colIndex=0;box2Darr[rowIndex]=new Array();}});for(var cols=0;cols<(settings.boxCols*2);cols++){var prevCol=cols;for(var rows=0;rows<settings.boxRows;rows++){if(prevCol>=0&&prevCol<settings.boxCols){(function(row,col,time,i,totalBoxes){var box=$(box2Darr[row][col]);var w=box.width();var h=box.height();if(settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){box.width(0).height(0);}
|
|
||||||
if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3,'',function(){slider.trigger('nivo:animFinished');});},(100+time));}else{setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3);},(100+time));}})(rows,prevCol,timeBuff,i,totalBoxes);i++;}
|
|
||||||
prevCol--;}
|
|
||||||
timeBuff+=100;}}}
|
|
||||||
var shuffle=function(arr){for(var j,x,i=arr.length;i;j=parseInt(Math.random()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);return arr;}
|
|
||||||
var trace=function(msg){if(this.console&&typeof console.log!="undefined")
|
|
||||||
console.log(msg);}
|
|
||||||
this.stop=function(){if(!$(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=true;trace('Stop Slider');}}
|
|
||||||
this.start=function(){if($(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=false;trace('Start Slider');}}
|
|
||||||
settings.afterLoad.call(this);return this;};$.fn.nivoSlider=function(options){return this.each(function(key,value){var element=$(this);if(element.data('nivoslider'))return element.data('nivoslider');var nivoslider=new NivoSlider(this,options);element.data('nivoslider',nivoslider);});};$.fn.nivoSlider.defaults={effect:'random',slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:'.jpg',controlNavThumbsReplace:'_thumb.jpg',keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:'Prev',nextText:'Next',beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};$.fn._reverse=[].reverse;})(jQuery);
|
|
||||||
@ -1,391 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery Orbit Plugin 1.2.3
|
|
||||||
* www.ZURB.com/playground
|
|
||||||
* Copyright 2010, ZURB
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
|
|
||||||
$.fn.orbit = function(options) {
|
|
||||||
|
|
||||||
//Defaults to extend options
|
|
||||||
var defaults = {
|
|
||||||
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
|
|
||||||
animationSpeed: 600, // how fast animtions are
|
|
||||||
timer: true, // true or false to have the timer
|
|
||||||
advanceSpeed: 4000, // if timer is enabled, time between transitions
|
|
||||||
pauseOnHover: false, // if you hover pauses the slider
|
|
||||||
startClockOnMouseOut: false, // if clock should start on MouseOut
|
|
||||||
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
|
|
||||||
directionalNav: true, // manual advancing directional navs
|
|
||||||
captions: true, // do you want captions?
|
|
||||||
captionAnimation: 'fade', // fade, slideOpen, none
|
|
||||||
captionAnimationSpeed: 600, // if so how quickly should they animate in
|
|
||||||
bullets: false, // true or false to activate the bullet navigation
|
|
||||||
bulletThumbs: false, // thumbnails for the bullets
|
|
||||||
bulletThumbLocation: '', // location from this file where thumbs will be
|
|
||||||
afterSlideChange: function(){} // empty function
|
|
||||||
};
|
|
||||||
|
|
||||||
//Extend those options
|
|
||||||
var options = $.extend(defaults, options);
|
|
||||||
|
|
||||||
return this.each(function() {
|
|
||||||
|
|
||||||
// ==============
|
|
||||||
// ! SETUP
|
|
||||||
// ==============
|
|
||||||
|
|
||||||
//Global Variables
|
|
||||||
var activeSlide = 0,
|
|
||||||
numberSlides = 0,
|
|
||||||
orbitWidth = 940,
|
|
||||||
orbitHeight = 450,
|
|
||||||
locked;
|
|
||||||
|
|
||||||
//Initialize
|
|
||||||
var orbit = $(this).addClass('orbit'),
|
|
||||||
orbitWrapper = orbit.wrap('<div class="orbit-wrapper" />').parent();
|
|
||||||
orbit.add(orbitWidth).width('1px').height('1px');
|
|
||||||
|
|
||||||
//Collect all slides and set slider size of largest image
|
|
||||||
var slides = orbit.children('img, a, div');
|
|
||||||
slides.each(function() {
|
|
||||||
var _slide = $(this);
|
|
||||||
numberSlides++;
|
|
||||||
});
|
|
||||||
|
|
||||||
//Animation locking functions
|
|
||||||
function unlock() {
|
|
||||||
locked = false;
|
|
||||||
}
|
|
||||||
function lock() {
|
|
||||||
locked = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
//If there is only a single slide remove nav, timer and bullets
|
|
||||||
if(slides.length == 1) {
|
|
||||||
options.directionalNav = false;
|
|
||||||
options.timer = false;
|
|
||||||
options.bullets = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Set initial front photo z-index and fades it in
|
|
||||||
slides.eq(activeSlide)
|
|
||||||
.css({"z-index" : 3})
|
|
||||||
.fadeIn(function() {
|
|
||||||
//brings in all other slides IF css declares a display: none
|
|
||||||
slides.css({"display":"block"})
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==============
|
|
||||||
// ! TIMER
|
|
||||||
// ==============
|
|
||||||
|
|
||||||
//Timer Execution
|
|
||||||
function startClock() {
|
|
||||||
if(!options.timer || options.timer == 'false') {
|
|
||||||
return false;
|
|
||||||
//if timer is hidden, don't need to do crazy calculations
|
|
||||||
} else if(timer.is(':hidden')) {
|
|
||||||
clock = setInterval(function(e){
|
|
||||||
shift("next");
|
|
||||||
}, options.advanceSpeed);
|
|
||||||
//if timer is visible and working, let's do some math
|
|
||||||
} else {
|
|
||||||
timerRunning = true;
|
|
||||||
pause.removeClass('active')
|
|
||||||
clock = setInterval(function(e){
|
|
||||||
var degreeCSS = "rotate("+degrees+"deg)"
|
|
||||||
degrees += 2
|
|
||||||
rotator.css({
|
|
||||||
"-webkit-transform": degreeCSS,
|
|
||||||
"-moz-transform": degreeCSS,
|
|
||||||
"-o-transform": degreeCSS
|
|
||||||
});
|
|
||||||
if(degrees > 180) {
|
|
||||||
rotator.addClass('move');
|
|
||||||
mask.addClass('move');
|
|
||||||
}
|
|
||||||
if(degrees > 360) {
|
|
||||||
rotator.removeClass('move');
|
|
||||||
mask.removeClass('move');
|
|
||||||
degrees = 0;
|
|
||||||
shift("next");
|
|
||||||
}
|
|
||||||
}, options.advanceSpeed/180);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function stopClock() {
|
|
||||||
if(!options.timer || options.timer == 'false') { return false; } else {
|
|
||||||
timerRunning = false;
|
|
||||||
clearInterval(clock);
|
|
||||||
pause.addClass('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Timer Setup
|
|
||||||
if(options.timer) {
|
|
||||||
var timerHTML = '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>'
|
|
||||||
orbitWrapper.append(timerHTML);
|
|
||||||
var timer = $('div.timer'),
|
|
||||||
timerRunning;
|
|
||||||
if(timer.length != 0) {
|
|
||||||
var rotator = $('div.timer span.rotator'),
|
|
||||||
mask = $('div.timer span.mask'),
|
|
||||||
pause = $('div.timer span.pause'),
|
|
||||||
degrees = 0,
|
|
||||||
clock;
|
|
||||||
startClock();
|
|
||||||
timer.click(function() {
|
|
||||||
if(!timerRunning) {
|
|
||||||
startClock();
|
|
||||||
} else {
|
|
||||||
stopClock();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if(options.startClockOnMouseOut){
|
|
||||||
var outTimer;
|
|
||||||
orbitWrapper.mouseleave(function() {
|
|
||||||
outTimer = setTimeout(function() {
|
|
||||||
if(!timerRunning){
|
|
||||||
startClock();
|
|
||||||
}
|
|
||||||
}, options.startClockOnMouseOutAfter)
|
|
||||||
})
|
|
||||||
orbitWrapper.mouseenter(function() {
|
|
||||||
clearTimeout(outTimer);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Pause Timer on hover
|
|
||||||
if(options.pauseOnHover) {
|
|
||||||
orbitWrapper.mouseenter(function() {
|
|
||||||
stopClock();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==============
|
|
||||||
// ! CAPTIONS
|
|
||||||
// ==============
|
|
||||||
|
|
||||||
//Caption Setup
|
|
||||||
if(options.captions) {
|
|
||||||
var captionHTML = '<div class="orbit-caption"></div>';
|
|
||||||
orbitWrapper.append(captionHTML);
|
|
||||||
var caption = orbitWrapper.children('.orbit-caption');
|
|
||||||
setCaption();
|
|
||||||
}
|
|
||||||
|
|
||||||
//Caption Execution
|
|
||||||
function setCaption() {
|
|
||||||
if(!options.captions || options.captions =="false") {
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
var _captionLocation = slides.eq(activeSlide).data('caption'); //get ID from rel tag on image
|
|
||||||
_captionHTML = $(_captionLocation).html(); //get HTML from the matching HTML entity
|
|
||||||
//Set HTML for the caption if it exists
|
|
||||||
if(_captionHTML) {
|
|
||||||
caption
|
|
||||||
.attr('id',_captionLocation) // Add ID caption
|
|
||||||
.html(_captionHTML); // Change HTML in Caption
|
|
||||||
//Animations for Caption entrances
|
|
||||||
if(options.captionAnimation == 'none') {
|
|
||||||
caption.show();
|
|
||||||
}
|
|
||||||
if(options.captionAnimation == 'fade') {
|
|
||||||
caption.fadeIn(options.captionAnimationSpeed);
|
|
||||||
}
|
|
||||||
if(options.captionAnimation == 'slideOpen') {
|
|
||||||
caption.slideDown(options.captionAnimationSpeed);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
//Animations for Caption exits
|
|
||||||
if(options.captionAnimation == 'none') {
|
|
||||||
caption.hide();
|
|
||||||
}
|
|
||||||
if(options.captionAnimation == 'fade') {
|
|
||||||
caption.fadeOut(options.captionAnimationSpeed);
|
|
||||||
}
|
|
||||||
if(options.captionAnimation == 'slideOpen') {
|
|
||||||
caption.slideUp(options.captionAnimationSpeed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================
|
|
||||||
// ! DIRECTIONAL NAV
|
|
||||||
// ==================
|
|
||||||
|
|
||||||
//DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev");
|
|
||||||
if(options.directionalNav) {
|
|
||||||
if(options.directionalNav == "false") { return false; }
|
|
||||||
var directionalNavHTML = '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>';
|
|
||||||
orbitWrapper.append(directionalNavHTML);
|
|
||||||
var leftBtn = orbitWrapper.children('div.slider-nav').children('span.left'),
|
|
||||||
rightBtn = orbitWrapper.children('div.slider-nav').children('span.right');
|
|
||||||
leftBtn.click(function() {
|
|
||||||
stopClock();
|
|
||||||
shift("prev");
|
|
||||||
});
|
|
||||||
rightBtn.click(function() {
|
|
||||||
stopClock();
|
|
||||||
shift("next")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================
|
|
||||||
// ! BULLET NAV
|
|
||||||
// ==================
|
|
||||||
|
|
||||||
//Bullet Nav Setup
|
|
||||||
if(options.bullets) {
|
|
||||||
var bulletHTML = '<ul class="orbit-bullets"></ul>';
|
|
||||||
orbitWrapper.append(bulletHTML);
|
|
||||||
var bullets = $('ul.orbit-bullets');
|
|
||||||
for(i=0; i<numberSlides; i++) {
|
|
||||||
var liMarkup = $('<li>'+(i+1)+'</li>');
|
|
||||||
if(options.bulletThumbs) {
|
|
||||||
var thumbName = slides.eq(i).data('thumb');
|
|
||||||
if(thumbName) {
|
|
||||||
var liMarkup = $('<li class="has-thumb">'+i+'</li>')
|
|
||||||
liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$('ul.orbit-bullets').append(liMarkup);
|
|
||||||
liMarkup.data('index',i);
|
|
||||||
liMarkup.click(function() {
|
|
||||||
stopClock();
|
|
||||||
shift($(this).data('index'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setActiveBullet();
|
|
||||||
}
|
|
||||||
|
|
||||||
//Bullet Nav Execution
|
|
||||||
function setActiveBullet() {
|
|
||||||
if(!options.bullets) { return false; } else {
|
|
||||||
bullets.children('li').removeClass('active').eq(activeSlide).addClass('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ====================
|
|
||||||
// ! SHIFT ANIMATIONS
|
|
||||||
// ====================
|
|
||||||
|
|
||||||
//Animating the shift!
|
|
||||||
function shift(direction) {
|
|
||||||
//remember previous activeSlide
|
|
||||||
var prevActiveSlide = activeSlide,
|
|
||||||
slideDirection = direction;
|
|
||||||
//exit function if bullet clicked is same as the current image
|
|
||||||
if(prevActiveSlide == slideDirection) { return false; }
|
|
||||||
//reset Z & Unlock
|
|
||||||
function resetAndUnlock() {
|
|
||||||
slides
|
|
||||||
.eq(prevActiveSlide)
|
|
||||||
.css({"z-index" : 1});
|
|
||||||
unlock();
|
|
||||||
options.afterSlideChange.call(this);
|
|
||||||
}
|
|
||||||
if(slides.length == "1") { return false; }
|
|
||||||
if(!locked) {
|
|
||||||
lock();
|
|
||||||
//deduce the proper activeImage
|
|
||||||
if(direction == "next") {
|
|
||||||
activeSlide++
|
|
||||||
if(activeSlide == numberSlides) {
|
|
||||||
activeSlide = 0;
|
|
||||||
}
|
|
||||||
} else if(direction == "prev") {
|
|
||||||
activeSlide--
|
|
||||||
if(activeSlide < 0) {
|
|
||||||
activeSlide = numberSlides-1;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
activeSlide = direction;
|
|
||||||
if (prevActiveSlide < activeSlide) {
|
|
||||||
slideDirection = "next";
|
|
||||||
} else if (prevActiveSlide > activeSlide) {
|
|
||||||
slideDirection = "prev"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//set to correct bullet
|
|
||||||
setActiveBullet();
|
|
||||||
|
|
||||||
//set previous slide z-index to one below what new activeSlide will be
|
|
||||||
slides
|
|
||||||
.eq(prevActiveSlide)
|
|
||||||
.css({"z-index" : 2});
|
|
||||||
|
|
||||||
//fade
|
|
||||||
if(options.animation == "fade") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"opacity" : 0, "z-index" : 3})
|
|
||||||
.animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock);
|
|
||||||
}
|
|
||||||
//horizontal-slide
|
|
||||||
if(options.animation == "horizontal-slide") {
|
|
||||||
if(slideDirection == "next") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"left": orbitWidth, "z-index" : 3})
|
|
||||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
}
|
|
||||||
if(slideDirection == "prev") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"left": -orbitWidth, "z-index" : 3})
|
|
||||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//vertical-slide
|
|
||||||
if(options.animation == "vertical-slide") {
|
|
||||||
if(slideDirection == "prev") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"top": orbitHeight, "z-index" : 3})
|
|
||||||
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
}
|
|
||||||
if(slideDirection == "next") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"top": -orbitHeight, "z-index" : 3})
|
|
||||||
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//push-over
|
|
||||||
if(options.animation == "horizontal-push") {
|
|
||||||
if(slideDirection == "next") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"left": orbitWidth, "z-index" : 3})
|
|
||||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
slides
|
|
||||||
.eq(prevActiveSlide)
|
|
||||||
.animate({"left" : -orbitWidth}, options.animationSpeed);
|
|
||||||
}
|
|
||||||
if(slideDirection == "prev") {
|
|
||||||
slides
|
|
||||||
.eq(activeSlide)
|
|
||||||
.css({"left": -orbitWidth, "z-index" : 3})
|
|
||||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
|
||||||
slides
|
|
||||||
.eq(prevActiveSlide)
|
|
||||||
.animate({"left" : orbitWidth}, options.animationSpeed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setCaption();
|
|
||||||
} //lock
|
|
||||||
}//orbit function
|
|
||||||
});//each call
|
|
||||||
}//orbit plugin call
|
|
||||||
})(jQuery);
|
|
||||||
|
|
||||||
17
test/test-one/jquery.orbit-1.2.3.min.js
vendored
17
test/test-one/jquery.orbit-1.2.3.min.js
vendored
@ -1,17 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery Orbit Plugin 1.2.3
|
|
||||||
* www.ZURB.com/playground
|
|
||||||
* Copyright 2010, ZURB
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function(d){d.fn.orbit=function(a){a=d.extend({animation:"horizontal-push",animationSpeed:600,timer:!0,advanceSpeed:4E3,pauseOnHover:!1,startClockOnMouseOut:!1,startClockOnMouseOutAfter:1E3,directionalNav:!0,captions:!0,captionAnimation:"fade",captionAnimationSpeed:600,bullets:!1,bulletThumbs:!1,bulletThumbLocation:"",afterSlideChange:function(){}},a);return this.each(function(){function q(){if(!a.timer||a.timer=="false")return!1;else r.is(":hidden")?s=setInterval(function(){l("next")},a.advanceSpeed):
|
|
||||||
(o=!0,x.removeClass("active"),s=setInterval(function(){var a="rotate("+m+"deg)";m+=2;t.css({"-webkit-transform":a,"-moz-transform":a,"-o-transform":a});m>180&&(t.addClass("move"),z.addClass("move"));m>360&&(t.removeClass("move"),z.removeClass("move"),m=0,l("next"))},a.advanceSpeed/180))}function n(){if(!a.timer||a.timer=="false")return!1;else o=!1,clearInterval(s),x.addClass("active")}function A(){if(!a.captions||a.captions=="false")return!1;else{var y=e.eq(b).data("caption");(_captionHTML=d(y).html())?
|
|
||||||
(j.attr("id",y).html(_captionHTML),a.captionAnimation=="none"&&j.show(),a.captionAnimation=="fade"&&j.fadeIn(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideDown(a.captionAnimationSpeed)):(a.captionAnimation=="none"&&j.hide(),a.captionAnimation=="fade"&&j.fadeOut(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideUp(a.captionAnimationSpeed))}}function B(){if(a.bullets)D.children("li").removeClass("active").eq(b).addClass("active");else return!1}function l(d){function c(){e.eq(f).css({"z-index":1});
|
|
||||||
u=!1;a.afterSlideChange.call(this)}var f=b,g=d;if(f==g)return!1;if(e.length=="1")return!1;u||(u=!0,d=="next"?(b++,b==p&&(b=0)):d=="prev"?(b--,b<0&&(b=p-1)):(b=d,f<b?g="next":f>b&&(g="prev")),B(),e.eq(f).css({"z-index":2}),a.animation=="fade"&&e.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,c),a.animation=="horizontal-slide"&&(g=="next"&&e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,c),g=="prev"&&e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,
|
|
||||||
c)),a.animation=="vertical-slide"&&(g=="prev"&&e.eq(b).css({top:v,"z-index":3}).animate({top:0},a.animationSpeed,c),g=="next"&&e.eq(b).css({top:-v,"z-index":3}).animate({top:0},a.animationSpeed,c)),a.animation=="horizontal-push"&&(g=="next"&&(e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,c),e.eq(f).animate({left:-h},a.animationSpeed)),g=="prev"&&(e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,c),e.eq(f).animate({left:h},a.animationSpeed))),A())}var b=0,
|
|
||||||
p=0,h,v,u,f=d(this).addClass("orbit"),c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px");var e=f.children("img, a, div");e.each(function(){var a=d(this),b=a.width(),a=a.height();b>f.width()&&(f.add(c).width(b),h=f.width());a>f.height()&&(f.add(c).height(a),v=f.height());p++});if(e.length==1)a.directionalNav=!1,a.timer=!1,a.bullets=!1;e.eq(b).css({"z-index":3}).fadeIn(function(){e.css({display:"block"})});if(a.timer){c.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');
|
|
||||||
var r=d("div.timer"),o;if(r.length!=0){var t=d("div.timer span.rotator"),z=d("div.timer span.mask"),x=d("div.timer span.pause"),m=0,s;q();r.click(function(){o?n():q()});if(a.startClockOnMouseOut){var C;c.mouseleave(function(){C=setTimeout(function(){o||q()},a.startClockOnMouseOutAfter)});c.mouseenter(function(){clearTimeout(C)})}}}a.pauseOnHover&&c.mouseenter(function(){n()});if(a.captions){c.append('<div class="orbit-caption"></div>');var j=c.children(".orbit-caption");A()}if(a.directionalNav){if(a.directionalNav==
|
|
||||||
"false")return!1;c.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');var k=c.children("div.slider-nav").children("span.left"),w=c.children("div.slider-nav").children("span.right");k.click(function(){n();l("prev")});w.click(function(){n();l("next")})}if(a.bullets){c.append('<ul class="orbit-bullets"></ul>');var D=d("ul.orbit-bullets");for(i=0;i<p;i++){k=d("<li>"+(i+1)+"</li>");if(a.bulletThumbs&&(w=e.eq(i).data("thumb")))k=d('<li class="has-thumb">'+
|
|
||||||
i+"</li>"),k.css({background:"url("+a.bulletThumbLocation+w+") no-repeat"});d("ul.orbit-bullets").append(k);k.data("index",i);k.click(function(){n();l(d(this).data("index"))})}B()}})}})(jQuery);
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.0
|
|
||||||
* Created by Dave Gamache
|
|
||||||
* www.skeleton.gs
|
|
||||||
* 4/30/2011
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Table of Content
|
|
||||||
==================================================
|
|
||||||
#Site Styles
|
|
||||||
#Page Styles
|
|
||||||
#Media Queries */
|
|
||||||
|
|
||||||
/* Site Styles
|
|
||||||
================================================== */
|
|
||||||
nav {
|
|
||||||
margin-top: 20px;
|
|
||||||
overflow: hidden; }
|
|
||||||
logo h4 {
|
|
||||||
float: left;
|
|
||||||
margin-bottom: 10px; }
|
|
||||||
nav ul {
|
|
||||||
margin-top: 8px;
|
|
||||||
float: right;
|
|
||||||
margin-bottom: 10px; }
|
|
||||||
nav ul li {
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px; }
|
|
||||||
nav ul li a {
|
|
||||||
text-decoration: none; }
|
|
||||||
.nivo-directionNav {
|
|
||||||
display: block !important;}
|
|
||||||
#slider {
|
|
||||||
max-width: 100% !important;
|
|
||||||
height: auto; }
|
|
||||||
|
|
||||||
|
|
||||||
/* Page Styles
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
/* Media Queries
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
/* iPad Portrait/Browser */
|
|
||||||
@media only screen and (min-width: 768px) and (max-width: 991px) {}
|
|
||||||
|
|
||||||
/* Mobile/Browser */
|
|
||||||
@media only screen and (max-width: 767px) {
|
|
||||||
nav ul { float: left; }
|
|
||||||
nav ul li:first-child{ margin-left: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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) {}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery Nivo Slider v2.5.1
|
|
||||||
* http://nivo.dev7studios.com
|
|
||||||
*
|
|
||||||
* Copyright 2011, Gilbert Pellegrom
|
|
||||||
* Free to use and abuse under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*
|
|
||||||
* March 2010
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* The Nivo Slider styles */
|
|
||||||
.nivoSlider {
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.nivoSlider img {
|
|
||||||
position:absolute;
|
|
||||||
top:0px;
|
|
||||||
left:0px;
|
|
||||||
}
|
|
||||||
/* If an image is wrapped in a link */
|
|
||||||
.nivoSlider a.nivo-imageLink {
|
|
||||||
position:absolute;
|
|
||||||
top:0px;
|
|
||||||
left:0px;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
border:0;
|
|
||||||
padding:0;
|
|
||||||
margin:0;
|
|
||||||
z-index:6;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
/* The slices and boxes in the Slider */
|
|
||||||
.nivo-slice {
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
z-index:5;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.nivo-box {
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
z-index:5;
|
|
||||||
}
|
|
||||||
/* Caption styles */
|
|
||||||
.nivo-caption {
|
|
||||||
position:absolute;
|
|
||||||
left:0px;
|
|
||||||
bottom:0px;
|
|
||||||
background:#000;
|
|
||||||
color:#fff;
|
|
||||||
opacity:0.8; /* Overridden by captionOpacity setting */
|
|
||||||
width:100%;
|
|
||||||
z-index:8;
|
|
||||||
}
|
|
||||||
.nivo-caption p {
|
|
||||||
padding:5px;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
.nivo-caption a {
|
|
||||||
display:inline !important;
|
|
||||||
}
|
|
||||||
.nivo-html-caption {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
/* Direction nav styles (e.g. Next & Prev) */
|
|
||||||
.nivo-directionNav a {
|
|
||||||
position:absolute;
|
|
||||||
top:45%;
|
|
||||||
z-index:9;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.nivo-prevNav {
|
|
||||||
left:0px;
|
|
||||||
}
|
|
||||||
.nivo-nextNav {
|
|
||||||
right:0px;
|
|
||||||
}
|
|
||||||
/* Control nav styles (e.g. 1,2,3...) */
|
|
||||||
.nivo-controlNav a {
|
|
||||||
position:relative;
|
|
||||||
z-index:9;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.nivo-controlNav a.active {
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
@ -1,199 +0,0 @@
|
|||||||
/* CSS for jQuery Orbit Plugin 1.2.3
|
|
||||||
* www.ZURB.com/playground
|
|
||||||
* Copyright 2010, ZURB
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
|
|
||||||
================================================== */
|
|
||||||
/*
|
|
||||||
#slider {
|
|
||||||
width: 940px;
|
|
||||||
height: 450px;
|
|
||||||
background: #000 url('orbit/loading.gif') no-repeat center center;
|
|
||||||
overflow: hidden; }
|
|
||||||
#slider>img,
|
|
||||||
#slider>div,
|
|
||||||
#slider>a { display: none; }
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* CONTAINER
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
div.orbit-wrapper {
|
|
||||||
position: relative; }
|
|
||||||
|
|
||||||
div.orbit {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden }
|
|
||||||
|
|
||||||
div.orbit>img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
div.orbit>a {
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
line-height: 0;
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.orbit>div {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; }
|
|
||||||
|
|
||||||
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
|
|
||||||
|
|
||||||
|
|
||||||
/* TIMER
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
div.timer {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
opacity: .6;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1001; }
|
|
||||||
|
|
||||||
span.rotator {
|
|
||||||
display: block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -20px;
|
|
||||||
background: url(orbit/rotator-black.png) no-repeat;
|
|
||||||
z-index: 3; }
|
|
||||||
|
|
||||||
span.mask {
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 2;
|
|
||||||
overflow: hidden; }
|
|
||||||
|
|
||||||
span.rotator.move {
|
|
||||||
left: 0 }
|
|
||||||
|
|
||||||
span.mask.move {
|
|
||||||
width: 40px;
|
|
||||||
left: 0;
|
|
||||||
background: url(orbit/timer-black.png) repeat 0 0; }
|
|
||||||
|
|
||||||
span.pause {
|
|
||||||
display: block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: url(orbit/pause-black.png) no-repeat;
|
|
||||||
z-index: 4;
|
|
||||||
opacity: 0; }
|
|
||||||
|
|
||||||
span.pause.active {
|
|
||||||
background: url(orbit/pause-black.png) no-repeat 0 -40px }
|
|
||||||
|
|
||||||
div.timer:hover span.pause,
|
|
||||||
span.pause.active {
|
|
||||||
opacity: 1 }
|
|
||||||
|
|
||||||
|
|
||||||
/* CAPTIONS
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
.orbit-caption {
|
|
||||||
display: none;
|
|
||||||
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
|
|
||||||
|
|
||||||
.orbit-wrapper .orbit-caption {
|
|
||||||
background: #000;
|
|
||||||
background: rgba(0,0,0,.6);
|
|
||||||
z-index: 1000;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
padding: 7px 0;
|
|
||||||
font-size: 13px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
|
|
||||||
/* DIRECTIONAL NAV
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
div.slider-nav {
|
|
||||||
display: block }
|
|
||||||
|
|
||||||
div.slider-nav span {
|
|
||||||
width: 78px;
|
|
||||||
height: 100px;
|
|
||||||
text-indent: -9999px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -50px;
|
|
||||||
cursor: pointer; }
|
|
||||||
|
|
||||||
div.slider-nav span.right {
|
|
||||||
background: url(orbit/right-arrow.png);
|
|
||||||
right: 0; }
|
|
||||||
|
|
||||||
div.slider-nav span.left {
|
|
||||||
background: url(orbit/left-arrow.png);
|
|
||||||
left: 0; }
|
|
||||||
|
|
||||||
/* BULLET NAV
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
.orbit-bullets {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
list-style: none;
|
|
||||||
bottom: -40px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -50px;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
.orbit-bullets li {
|
|
||||||
float: left;
|
|
||||||
margin-left: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #999;
|
|
||||||
text-indent: -9999px;
|
|
||||||
background: url(orbit/bullets.jpg) no-repeat 4px 0;
|
|
||||||
width: 13px;
|
|
||||||
height: 12px;
|
|
||||||
overflow: hidden; }
|
|
||||||
|
|
||||||
.orbit-bullets li.active {
|
|
||||||
color: #222;
|
|
||||||
background-position: -8px 0; }
|
|
||||||
|
|
||||||
.orbit-bullets li.has-thumb {
|
|
||||||
background: none;
|
|
||||||
width: 100px;
|
|
||||||
height: 75px; }
|
|
||||||
|
|
||||||
.orbit-bullets li.active.has-thumb {
|
|
||||||
background-position: 0 0;
|
|
||||||
border-top: 2px solid #000; }
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 657 B |
Binary file not shown.
|
Before Width: | Height: | Size: 679 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
Binary file not shown.
|
Before Width: | Height: | Size: 330 B |
Binary file not shown.
|
Before Width: | Height: | Size: 664 B |
Binary file not shown.
|
Before Width: | Height: | Size: 733 B |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB |
210
zurb.html
210
zurb.html
@ -1,210 +0,0 @@
|
|||||||
<!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 & 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 & 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 & 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>
|
|
||||||
Loading…
Reference in New Issue
Block a user