In order to create a slide with Take Five! all you need to do is to include takefive(.min).css in your document, then use one of the following basic syntaxes:
<p><a href="#my_hash">My slide</a></p>
+<p><a href="#my-hashtag">My slide</a></p>
-<article id="my_hash" class="slide">
+<article id="my-hashtag" class="slide">
<element-to-be-slided />
</article>
<p><a href="#my_hash">My slide</a></p>
+<p><a href="#my-hashtag">My slide</a></p>
-<article id="my_hash" class="slide">
+<article id="my-hashtag" class="slide">
<nav>
<a href="#nowhere" rel="parent"></a>
</nav>
@@ -41,9 +41,9 @@ Getting started
</article>
<p><a href="#my_hash">My slide</a></p>
+<p><a href="#my-hashtag">My slide</a></p>
-<article id="my_hash" class="slide">
+<article id="my-hashtag" class="slide">
<element-to-be-slided />
<nav>
<a href="#nowhere" rel="parent">My diary</a>
@@ -51,18 +51,18 @@ Getting started
</article>
<p><a href="#my_hash5">My slide</a></p>
+<p><a href="#my-hashtag-5">My slide</a></p>
-<article id="my_hash5" class="slide">
+<article id="my-hashtag-5" class="slide">
<header>
<h2>[title]</h2>
</header>
<nav>
<a href="#nowhere" rel="parent">My home page</a>
- <a href="#my_hash4" rel="prev">[previous slide name]</a>
- <a href="#my_hash6" rel="next">[next slide name]</a>
- <a href="#my_hash1" rel="first">[first slide name]</a>
- <a href="#my_hash10" rel="last">[last slide name]</a>
+ <a href="#my-hashtag-4" rel="prev">[previous slide name]</a>
+ <a href="#my-hashtag-6" rel="next">[next slide name]</a>
+ <a href="#my-hashtag-1" rel="first">[first slide name]</a>
+ <a href="#my-hashtag-9" rel="last">[last slide name]</a>
Etc. etc.
</nav>
<this-element-will-be-slided />
@@ -98,9 +98,9 @@ Philosophy
The philosophy of Take Five! is that of facilitating a general semantics for expressing a slide with HTML (independently of how this is rendered), rather than focusing on means to express a layout.
In the original meaning of the term a slide is a single page projected on a wall through a beamer or a lightbox. The term does not describe weather a slide is blue or red, or whether it contains a picture or text, but only that its content must fit in a single page and the lights in the room are usually switched off.
A slide can also be taken in the hands and read in its physical form with the lights on, thus the most characterizing aspect of a slide is actually its conciseness and independence, not how it is displayed.
-With its inception HTML5 introduced six semantic elements (<article>, <aside>, <footer>, <header>, <nav> and <section>), one of which is well suited to represent a self-contained composition: the <article> element.
+With its inception HTML5 introduced six semantic elements (<article>, <aside>, <footer>, <header>, <nav> and <section>), one of which is well suited to represent self-contained compositions: the <article> element.
The <article> element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.
-For non-semantic aspects, HTML possesses also a class attribute, which although cannot describe what things are, can still be used to describe how they look. For describing an <article> that is projected on a wall it is then possible to write <article class="slide">.
+For non-semantic properties, HTML possesses also a class attribute, which although cannot describe what things are, can still be used to describe how things look. For describing an <article> that is projected on a wall it is then possible to write <article class="slide">.
Since a class attribute does not express semantics, such a slide remains primarily an <article> element, and <article class="slide"> translates as “<article> that looks like a slide” (but not as “<article> that represents a slide”).
Take Five! is a slide renderer written in CSS, which means that it can only decide how things look, not what they are. However, in deciding what to give a style to, Take Five! focuses on elements that have a meaning (semantic elements), instead of generic elements that simply claim a layout (as it would be, for instance <div class="i-want-a-layout"> ... </div>).
Concretely speaking this has two effects:
@@ -111,7 +111,7 @@ Philosophy
A densely populated slide (<article>), besides its main content, can possess a title, a footer and some other information aside; therefore when this happens Take Five! gives a style to the <header>, <footer> and <aside> elements nested within it. In an internet context a slide can also be linked to other slides, hence Take Five! gives a layout to the <nav> element as well. A <nav> element however does not make much sense in a printed page, so when the slide is “taken in the hands” (printed) the <nav> element is not displayed.
Elements are not the only things that can express semantics in HTML. A further place that conveys semantics is the rel attribute assigned to links. Therefore, when a slide is displayed on a screen and the <nav> element is shown, Take Five! relies on the rel attributes for deciding how to style each link and what role it has in the viewport.
The viewport
-Each slide (<article id="my-hash-tag" class="slide"> ... </article>)
+Each slide (<article id="my-hashtag" class="slide"> ... </article>)
id attribute)<article> element (i.e., the slide)"no-hashtag"article.slide.no-hashtag"no-hashtag" class – as in <article class="slide no-hashtag" id="my-hash-name"> ... </article>."no-hashtag" class – as in <article class="slide no-hashtag" id="my-hashtag"> ... </article>."nonadaptive"data-* attributesdata-contextarticle.slide[data-context]article.slide) can optionally possess a data-context attribute, whose content will be displayed on the top left side of the viewport – as in <article class="slide" data-context="Hello world!" id="my-hash-name"> ... </article> (it takes 2.5 seconds to show up, so you must wait to see it). See also note below.article.slide) can optionally possess a data-context attribute, whose content will be displayed on the top left side of the viewport – as in <article class="slide" data-context="Hello world!" id="my-hashtag"> ... </article> (it takes 2.5 seconds to show up, so you must wait to see it). See also note below.data-labelTo test weather your browser is affected by the bug you can visit lab.laukstein.com/bug/input.
z-index collisionThe <article class="slide"> element has the z-index property set to 10000, hence no other elements within the document must have a z-index higher than 10000 in order not to be displayed above the slides. If there is no way to prevent that, it is possible to assign a higher z-index to the slides manually,
<article id="my_hashtag" class="slide" style="z-index: 99999;"> ... </article>+
<article id="my-hashtag" class="slide" style="z-index: 99999;"> ... </article>
or nest them within a higher stacking context.
<div style="position: relative; z-index: 99999;"> - <article id="my_hashtag" class="slide"> ... </article> + <article id="my-hashtag" class="slide"> ... </article> </div>
For more details, see the table of all the internal z-indices assigned by Take Five!.