Skip to content

Commit

Permalink
Changes for moving standard deck container to body
Browse files Browse the repository at this point in the history
  • Loading branch information
@imakewebthings
imakewebthings committed Aug 11, 2011
1 parent 978252a commit 5fcc440
Show file tree
Hide file tree
Showing 11 changed files with 204 additions and 233 deletions.
2 changes: 1 addition & 1 deletion core/deck.core.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
body, html {
html {
height: 100%;
}

Expand Down
2 changes: 1 addition & 1 deletion core/deck.core.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
body, html {
html {
height:100%;
}

Expand Down
274 changes: 130 additions & 144 deletions introduction/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<script src="../modernizr.custom.js"></script>
</head>

<body>
<body class="deck-container">

<div class="theme-menu">
<h2>Themes</h2>
Expand All @@ -52,156 +52,142 @@ <h2>Themes</h2>
</select>
</div>

<div class="deck-container">
<div class="slide">
<h1>Getting Started with Deck JS</h1>
</div>

<div class="slide">
<h2>Your Typical Deck</h2>
<h3>Consists of:</h3>
<ul>
<li>Slides in the form of HTML</li>
<li>The core Deck JS and CSS files</li>
<li>A style theme and transition theme</li>
<li>Any desired JS extensions</li>
</ul>
</div>

<div class="slide">
<h2>The Markup</h2>
<p>Slides are just HTML elements with a class of <code>slide</code>.</p>
<pre><code>&lt;div class=&quot;slide&quot;&gt;
&lt;h2&gt;Your Typical Deck&lt;/h2&gt;
&lt;h3&gt;Consists of:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Slides in the form of HTML&lt;/li&gt;
&lt;li&gt;The core Deck JS and CSS files&lt;/li&gt;
&lt;li&gt;A style theme and transition theme&lt;/li&gt;
&lt;li&gt;Any desired extenstions&lt;/li&gt;
&lt;/ul&gt;
<div class="slide">
<h1>Getting Started with Deck JS</h1>
</div>

<div class="slide">
<h2>How to Make a Deck</h2>
<ol>
<li>
<h3>Write Slides</h3>
<p>Slide content is simple HTML.</p>
</li>
<li>
<h3>Choose Themes</h3>
<p>One for slide styles and one for deck transitions.</p>
</li>
<li>
<h3>Include Extensions</h3>
<p>Add extra functionality to your deck, or leave it stripped down.</p>
</li>
</ol>
</div>

<div class="slide">
<h2>The Markup</h2>
<p>Slides are just HTML elements with a class of <code>slide</code>.</p>
<pre><code>&lt;div class=&quot;slide&quot;&gt;
&lt;h2&gt;Your Typical Deck&lt;/h2&gt;
&lt;h3&gt;Consists of:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Slides in the form of HTML&lt;/li&gt;
&lt;li&gt;The core Deck JS and CSS files&lt;/li&gt;
&lt;li&gt;A style theme and transition theme&lt;/li&gt;
&lt;li&gt;Any desired extenstions&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>

<div class="slide">
<h2>Core Files</h2>
<h3>Deck JS</h3>
<p>Handles all the dirty work of initializing and moving through slides. It also exposes an API for working with and extending Deck JS.</p>
<pre><code>&lt;script src=&quot;path/to/js/deck.core.js&quot;&gt;&lt;/script&gt;</code></pre>
<h3>Deck CSS</h3>
<p>Contains basic layout of slides and content styles.</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/deck.core.css&quot;&gt;</code></pre>
<h3>Modernizr</h3>
<p>Feature detection tool used by core and extension CSS files.</p>
<pre><code>&lt;script src=&quot;path/to/js/modernizr.custom.js&quot;&gt;&lt;/script&gt;</code></pre>
</div>

<div class="slide">
<h2>Style Themes</h2>
<p>Customizes the colors, typography, and layout of slide content.</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/style-theme.css&quot;&gt;</code></pre>
</div>

<div class="slide">
<h2>Transition Themes</h2>
<p>Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But <strong>you</strong> aren&rsquo;t using <em>those</em> browsers to give your presentations, are you&hellip;</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/transition-theme.css&quot;&gt;</code></pre>
</div>

<div class="slide">
<h2>Extensions</h2>
<p>Deck Core gives you basic slide functionality with left and right arrow navigation, but you may want more.</p>

<ul>
<li class="slide">
<h3>deck.goto</h3>
<p>Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.</p>
</li>

<li class="slide">
<h3>deck.menu</h3>
<p>Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view.</p>
</li>

<li class="slide">
<h3>deck.navigation</h3>
<p>Adds clickable left and right buttons for the less keyboard inclined.</p>
</li>

<li class="slide">
<h3>deck.status</h3>
<p>Adds a page number indicator. (current/total)</p>
</li>
</ul>
</div>

<div class="slide">
<h2>Nested Slides</h2>
<p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
<pre><code>&lt;div class=&quot;slide&quot;&gt;
&lt;h2&gt;Extensions&lt;/h2&gt;
&lt;p&gt;Deck Core gives you basic slide functionality...&lt;/p&gt;
&lt;ul&gt;
&lt;li class=&quot;slide&quot;&gt;
&lt;h3&gt;deck.goto&lt;/h3&gt;
&lt;p&gt;Adds a shortcut key to jump to any slide number...&lt;/p&gt;
&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;/ul&gt;
</div>

<div class="slide">
<h2>Style Themes</h2>
<p>Customizes the colors, typography, and layout of slide content.</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/style-theme.css&quot;&gt;</code></pre>
<h2>Transition Themes</h2>
<p>Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But <strong>you</strong> aren&rsquo;t using <em>those</em> browsers to give your presentations, are you&hellip;</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/transition-theme.css&quot;&gt;</code></pre>
</div>

<div class="slide">
<h2>Extensions</h2>
<p>Deck Core gives you basic slide functionality with left and right arrow navigation, but you may want more.</p>

<ul>
<li class="slide">
<p><strong>deck.goto</strong>: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.</p>
</li>

<li class="slide">
<p><strong>deck.menu</strong>: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view.</p>
</li>

<li class="slide">
<p><strong>deck.navigation</strong>: Adds clickable left and right buttons for the less keyboard inclined.</p>
</li>

<li class="slide">
<p><strong>deck.status</strong>: Adds a page number indicator. (current/total)</p>
</li>
</ul>
</div>

<div class="slide">
<h2>Nested Slides</h2>
<p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
<pre><code>&lt;div class=&quot;slide&quot;&gt;
&lt;h2&gt;Extensions&lt;/h2&gt;
&lt;p&gt;Deck Core gives you basic slide functionality...&lt;/p&gt;
&lt;ul&gt;
&lt;li class=&quot;slide&quot;&gt;
&lt;h3&gt;deck.goto&lt;/h3&gt;
&lt;p&gt;Adds a shortcut key to jump to any slide number...&lt;/p&gt;
&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
<div class="slide">
<h2>Other Useful Elements: Images</h2>
<img src="http://placekitten.com/600/375" alt="Kitties">
<pre><code>&lt;img src=&quot;http://placekitten.com/600/375&quot; alt=&quot;Kitties&quot;&gt;</code></pre>
</div>
<div class="slide">
<h2>Other Useful Elements: Blockquotes</h2>
<blockquote cite="http://example.org">
<p>Food is an important part of a balanced diet.</p>
<p><cite>Fran Lebowitz</cite></p>
</blockquote>
<pre><code>&lt;blockquote cite=&quot;http://example.org&quot;&gt;
&lt;p&gt;Food is an important part of a balanced diet.&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;Fran Lebowitz&lt;/cite&gt;&lt;/p&gt;
</div>

<div class="slide">
<h2>Other Elements: Images</h2>
<img src="http://placekitten.com/600/375" alt="Kitties">
<pre><code>&lt;img src=&quot;http://placekitten.com/600/375&quot; alt=&quot;Kitties&quot;&gt;</code></pre>
</div>

<div class="slide">
<h2>Other Elements: Blockquotes</h2>
<blockquote cite="http://example.org">
<p>Food is an important part of a balanced diet.</p>
<p><cite>Fran Lebowitz</cite></p>
</blockquote>
<pre><code>&lt;blockquote cite=&quot;http://example.org&quot;&gt;
&lt;p&gt;Food is an important part of a balanced diet.&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;Fran Lebowitz&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;</code></pre>
</div>


<div class="slide">
<h2>Other Useful Elements: Video Embeds</h2>
<p>Embed videos using embed codes from your favorite online video service or with an HTML5 video element.</p>

<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

<pre><code>&lt;iframe src=&quot;http://player.vimeo.com/video/1063136?title=0&amp;amp;byline=0&amp;amp;portrait=0&quot; width=&quot;400&quot; height=&quot;225&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;</code></pre>
</div>

<div class="slide">
<h2>Digging Deeper</h2>
<p>If you want to learn about making your own themes, creating your own completely custom CSS, extending Deck JS, and more, check out the <a href="../docs/">Deck JS Docs</a>.</p>
</div>

<a href="#" class="deck-prev-link" title="Previous">&laquo;</a>
<a href="#" class="deck-next-link" title="Next">&raquo;</a>
</div>


<div class="slide">
<h2>Other Elements: Video Embeds</h2>
<p>Embed videos using embed codes from your favorite online video service or with an HTML5 video element.</p>

<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="number" name="slidenum" id="goto-slide">
<input type="submit" value="Go">
</form>
<pre><code>&lt;iframe src=&quot;http://player.vimeo.com/video/1063136?title=0&amp;amp;byline=0&amp;amp;portrait=0&quot; width=&quot;400&quot; height=&quot;225&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;</code></pre>
</div>

<div class="slide">
<h2>Digging Deeper</h2>
<p>If you want to learn about making your own themes, extending Deck JS, and more, check out the <a href="../docs/">Deck JS Docs</a>.</p>
</div>

<a href="#" class="deck-prev-link" title="Previous">&laquo;</a>
<a href="#" class="deck-next-link" title="Next">&raquo;</a>

<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>

<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="number" name="slidenum" id="goto-slide">
<input type="submit" value="Go">
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js">\x3C/script>')</script>

Expand Down
20 changes: 10 additions & 10 deletions introduction/introduction.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
body, html {
margin: 0;
padding: 0;
}

.theme-menu {
.deck-container .theme-menu {
display: none;
position: fixed;
z-index: 3;
Expand All @@ -19,11 +14,12 @@ body, html {
overflow: hidden;
background: #fff;
font-family: sans-serif;
color: #888;
}
.js .theme-menu {
.js .deck-container .theme-menu {
display: block;
}
.theme-menu h2 {
.deck-container .theme-menu h2 {
float: left;
font-size: 20px;
border: 0;
Expand All @@ -34,15 +30,19 @@ body, html {
top: -5px;
left: -5px;
background: #ccc;
color: #444;
text-shadow: none;
font-family: sans-serif;
font-weight: bold;
}
.theme-menu label {
.deck-container .theme-menu label {
float: left;
display: block;
font-size: 12px;
vertical-align: baseline;
margin: 0 4px 0 15px;
}
.theme-menu select {
.deck-container .theme-menu select {
float: left;
display: block;
}
Expand Down
Loading

0 comments on commit 5fcc440

Please sign in to comment.