Create a better boilerplate for people to use as a starting point
This commit is contained in:
imakewebthings
parent
c4430d3c1c
commit
5808a3c8d7
3 changed files with 104 additions and 43 deletions
12
README.md
12
README.md
|
|
@ -2,10 +2,9 @@
|
|||
|
||||
A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.
|
||||
|
||||
## Dependencies (included in this repository)
|
||||
## Quick Start
|
||||
|
||||
- [jQuery](http://jquery.com)
|
||||
- [Modernizr](http://modernizr.com)
|
||||
This repository includes a `boilerplate.html` as a starting point, with all the extensions included. Just [download it](https://github.com/imakewebthings/deck.js/zipball/stable), open `boilerplate.html`, and start editing your slides.
|
||||
|
||||
## Documentation
|
||||
|
||||
|
|
@ -15,6 +14,11 @@ Check out the [documentation page](http://imakewebthings.github.com/deck.js/docs
|
|||
|
||||
Take a look at [the wiki](https://github.com/imakewebthings/deck.js/wiki) for lists of extensions, themes, and other related goodies. If you have a publicly available project of your own, feel free to add to the list.
|
||||
|
||||
## Dependencies (included in this repository)
|
||||
|
||||
- [jQuery](http://jquery.com)
|
||||
- [Modernizr](http://modernizr.com)
|
||||
|
||||
## Tests & Support
|
||||
|
||||
Unit tests are written with [Jasmine](http://pivotal.github.com/jasmine/) and [jasmine-jquery](https://github.com/velesin/jasmine-jquery). You can [run them here](http://imakewebthings.github.com/deck.js/test).
|
||||
|
|
@ -55,6 +59,6 @@ If you would like to contribute a patch to deck.js please do as much as you can
|
|||
|
||||
## License
|
||||
|
||||
Copyright (c) 2011 Caleb Troughton
|
||||
Copyright (c) 2011-2012 Caleb Troughton
|
||||
|
||||
Dual licensed under the [MIT license](https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt) and [GPL license](https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt).
|
||||
|
|
|
|||
96
boilerplate.html
Normal file
96
boilerplate.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=1024, user-scalable=no">
|
||||
|
||||
<title>Your deck.js Presentation</title>
|
||||
|
||||
<!-- Required stylesheet -->
|
||||
<link rel="stylesheet" href="core/deck.core.css">
|
||||
|
||||
<!-- Extension CSS files go here. Remove or add as needed. -->
|
||||
<link rel="stylesheet" href="extensions/goto/deck.goto.css">
|
||||
<link rel="stylesheet" href="extensions/menu/deck.menu.css">
|
||||
<link rel="stylesheet" href="extensions/navigation/deck.navigation.css">
|
||||
<link rel="stylesheet" href="extensions/status/deck.status.css">
|
||||
<link rel="stylesheet" href="extensions/hash/deck.hash.css">
|
||||
<link rel="stylesheet" href="extensions/scale/deck.scale.css">
|
||||
|
||||
<!-- Style theme. More available in /themes/style/ or create your own. -->
|
||||
<link rel="stylesheet" href="themes/style/web-2.0.css">
|
||||
|
||||
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
|
||||
<link rel="stylesheet" href="themes/transition/horizontal-slide.css">
|
||||
|
||||
<!-- Required Modernizr file -->
|
||||
<script src="modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body class="deck-container">
|
||||
|
||||
<!-- Begin slides. Just make elements with a class of slide. -->
|
||||
|
||||
<section class="slide">
|
||||
<h1>Slide</h1>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h1>Content</h1>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h1>Here</h1>
|
||||
</section>
|
||||
|
||||
<!-- End slides. -->
|
||||
|
||||
|
||||
<!-- Begin extension snippets. Add or remove as needed. -->
|
||||
|
||||
<!-- deck.navigation snippet -->
|
||||
<a href="#" class="deck-prev-link" title="Previous">←</a>
|
||||
<a href="#" class="deck-next-link" title="Next">→</a>
|
||||
|
||||
<!-- deck.status snippet -->
|
||||
<p class="deck-status">
|
||||
<span class="deck-status-current"></span>
|
||||
/
|
||||
<span class="deck-status-total"></span>
|
||||
</p>
|
||||
|
||||
<!-- deck.goto snippet -->
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
|
||||
<datalist id="goto-datalist"></datalist>
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
|
||||
<!-- deck.hash snippet -->
|
||||
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
|
||||
|
||||
<!-- End extension snippets. -->
|
||||
|
||||
|
||||
<!-- Required JS files. -->
|
||||
<script src="jquery-1.7.min.js"></script>
|
||||
<script src="core/deck.core.js"></script>
|
||||
|
||||
<!-- Extension JS files. Add or remove as needed. -->
|
||||
<script src="../core/deck.core.js"></script>
|
||||
<script src="../extensions/hash/deck.hash.js"></script>
|
||||
<script src="../extensions/menu/deck.menu.js"></script>
|
||||
<script src="../extensions/goto/deck.goto.js"></script>
|
||||
<script src="../extensions/status/deck.status.js"></script>
|
||||
<script src="../extensions/navigation/deck.navigation.js"></script>
|
||||
<script src="../extensions/scale/deck.scale.js"></script>
|
||||
|
||||
<!-- Initialize the deck. You can put this in an external file if desired. -->
|
||||
<script>
|
||||
$(function() {
|
||||
$.deck('.slide');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Deck Skeleton</title>
|
||||
<meta name="viewport" content="width=1024, user-scalable=no">
|
||||
|
||||
<!-- Replace path with correct path to deck.core.css. -->
|
||||
<link rel="stylesheet" href="/PATH/TO/CSS/deck.core.css" type="text/css">
|
||||
|
||||
<!-- Any other extension CSS files go here. -->
|
||||
|
||||
<!-- Replace path with correct path to Modernizr file. -->
|
||||
<script src="/PATH/TO/JS/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body class="deck-container">
|
||||
|
||||
<!-- Create any number of elements with class slide within the container -->
|
||||
<section class="slide">
|
||||
<!-- Slide content HTML goes here! -->
|
||||
</section>
|
||||
|
||||
<!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
|
||||
|
||||
<!-- Update these paths to point to the correct files. -->
|
||||
<script src="/PATH/TO/JS/jquery.min.js"></script>
|
||||
<script src="/PATH/TO/JS/deck.core.js"></script>
|
||||
|
||||
<!-- Add any other extension JS files here -->
|
||||
|
||||
|
||||
<!-- Initialize the deck. You can put this in an external file if desired. -->
|
||||
<script>
|
||||
$(function() {
|
||||
$.deck('.slide');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue