Skip to content

Commit

Permalink
New release
Browse files Browse the repository at this point in the history
  • Loading branch information
@madmurphy
madmurphy committed Feb 12, 2017
1 parent 04406eb commit 5c6ddd6
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 65 deletions.
2 changes: 2 additions & 0 deletions ChangeLog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Changes:
* Possibility of declaring more one than one token within the `rel` attributes
* Changed unicode symbols for `prev` and `next`
* Added support for `a[rel="child"]`
* Added support for `"no-nav"` class
* Improved <blockquote> elements
* Improved documentation and demo

## [1.1.2] - 2017-02-09
Expand Down
2 changes: 1 addition & 1 deletion docs/css/takefive_min.css
View file

Large diffs are not rendered by default.

37 changes: 19 additions & 18 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -513,24 +513,25 @@ <h1>Lorem ipsum</h1>
</article>
<div>
<h2>Tags:</h2>
<p style="line-height: .75em;">
<a href="https://github.com/search?q=topic%3Acss&amp;type=Repositories" rel="tag" target="_blank">CSS</a>
<a href="https://github.com/search?q=topic%3Acss-gallery&amp;type=Repositories" rel="tag" target="_blank">CSS gallery</a>
<a href="https://github.com/search?q=topic%3Acss-lightbox&amp;type=Repositories" rel="tag" target="_blank">CSS lightbox</a>
<a href="https://github.com/search?q=topic%3Acss-slide-renderer&amp;type=Repositories" rel="tag" target="_blank">CSS slide renderer</a>
<a href="https://github.com/search?q=topic%3Acss3&amp;type=Repositories" rel="tag" target="_blank">CSS3</a>
<a href="https://github.com/search?q=topic%3Acss3-animations&amp;type=Repositories" rel="tag" target="_blank">CSS3 animations</a>
<a href="https://github.com/search?q=topic%3Ahtml-semantics&amp;type=Repositories" rel="tag" target="_blank">HTML semantics</a>
<a href="https://github.com/search?q=topic%3Ahtml5&amp;type=Repositories" rel="tag" target="_blank">HTML5</a>
<a href="https://github.com/search?q=topic%3Ahtml5-elements&amp;type=Repositories" rel="tag" target="_blank">HTML5 elements</a>
<a href="https://github.com/search?q=topic%3Aimage-gallery&amp;type=Repositories" rel="tag" target="_blank">Image gallery</a>
<a href="https://github.com/search?q=topic%3Alightbox&amp;type=Repositories" rel="tag" target="_blank">Lightbox</a>
<a href="https://github.com/search?q=topic%3Amicrodata&amp;type=Repositories" rel="tag" target="_blank">Microdata</a>
<a href="https://github.com/search?q=topic%3Aschema-org&amp;type=Repositories" rel="tag" target="_blank">schema.org</a>
<a href="https://github.com/search?q=topic%3Aslide-renderer&amp;type=Repositories" rel="tag" target="_blank">Slide renderer</a>
<a href="https://github.com/search?q=topic%3Aslides&amp;type=Repositories" rel="tag" target="_blank">Slides</a>
<a href="https://github.com/search?q=topic%3Aslideshow&amp;type=Repositories" rel="tag" target="_blank">Slideshow</a>

<p style="font-size: .75em;">
<a href="https://github.com/search?q=topic%3Acss&amp;type=Repositories" target="_blank" rel="tag">CSS</a>
<a href="https://github.com/search?q=topic%3Acss-gallery&amp;type=Repositories" target="_blank" rel="tag">CSS gallery</a>
<a href="https://github.com/search?q=topic%3Acss-lightbox&amp;type=Repositories" target="_blank" rel="tag">CSS lightbox</a>
<a href="https://github.com/search?q=topic%3Acss-slide-renderer&amp;type=Repositories" target="_blank" rel="tag">CSS slide renderer</a>
<a href="https://github.com/search?q=topic%3Acss3&amp;type=Repositories" target="_blank" rel="tag">CSS3</a>
<a href="https://github.com/search?q=topic%3Acss3-animations&amp;type=Repositories" target="_blank" rel="tag">CSS3 animations</a>
<a href="https://github.com/search?q=topic%3Ahtml-semantics&amp;type=Repositories" target="_blank" rel="tag">HTML semantics</a>
<a href="https://github.com/search?q=topic%3Ahtml5&amp;type=Repositories" target="_blank" rel="tag">HTML5</a>
<a href="https://github.com/search?q=topic%3Ahtml5-elements&amp;type=Repositories" target="_blank" rel="tag">HTML5 elements</a>
<a href="https://github.com/search?q=topic%3Aimage-gallery&amp;type=Repositories" target="_blank" rel="tag">Image gallery</a>
<a href="https://github.com/search?q=topic%3Alightbox&amp;type=Repositories" target="_blank" rel="tag">Lightbox</a>
<a href="https://github.com/search?q=topic%3Amicrodata&amp;type=Repositories" target="_blank" rel="tag">Microdata</a>
<a href="https://github.com/search?q=topic%3Amicroformats&amp;type=Repositories" target="_blank" rel="tag">Microformats</a>
<a href="https://github.com/search?q=topic%3Amicroformats2&amp;type=Repositories" target="_blank" rel="tag">Microformats2</a>
<a href="https://github.com/search?q=topic%3Aschema-org&amp;type=Repositories" target="_blank" rel="tag">schema.org</a>
<a href="https://github.com/search?q=topic%3Aslide-renderer&amp;type=Repositories" target="_blank" rel="tag">Slide renderer</a>
<a href="https://github.com/search?q=topic%3Aslides&amp;type=Repositories" target="_blank" rel="tag">Slides</a>
<a href="https://github.com/search?q=topic%3Aslideshow&amp;type=Repositories" target="_blank" rel="tag">Slideshow</a>
</p>
</div>
</article>
Expand Down
25 changes: 13 additions & 12 deletions docs/man.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ <h3>Getting started</h3>
<p>For creating a slide with <strong>Take five!</strong>, all you need to do is to include <strong>takefive.css</strong> in your document, then use one of the following basic syntaxes:</p>
<ul>
<li>
<pre class="example">&lt;article&nbsp;id="my_hash1" class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&lt;/article&gt;</pre>
<pre class="example">&lt;article id="my_hash1" class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&lt;/article&gt;</pre>
</li>
<li>
<pre class="example">&lt;article&nbsp;id="my_hash2" itemscope class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#nowhere" rel="parent"&gt;&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&lt;/article&gt;</pre>
<pre class="example">&lt;article id="my_hash2" itemscope class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#nowhere" rel="parent"&gt;&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&lt;/article&gt;</pre>
</li>
<li>
<pre class="example">&lt;article&nbsp;id="my_hash3" itemscope class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#nowhere" rel="parent"&gt;My diary&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;<br />&lt;/article&gt;</pre>
<pre class="example">&lt;article id="my_hash3" itemscope class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#nowhere" rel="parent"&gt;My diary&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;<br />&lt;/article&gt;</pre>
</li>
<li>
<pre class="example">&lt;article id="my_hash4" itemscope class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#nowhere" rel="parent"&gt;My home page&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#my_hash2" rel="prev"&gt;[previous slide name]&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#my_hash2" rel="next"&gt;[next slide name]&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;[title]&lt;/h1&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;this-element-will-be-slided /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #0098ff;">&lt;this-element-will-be-displayed-on-the-right-side-of-the-screen /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #0098ff;">&lt;this-element-will-be-displayed-on-the-right-side-of-the-screen /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #0098ff;">&lt;etc. /&gt;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;[footer]&lt;/footer&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;aside&gt;[aside]&lt;/aside&gt;<br />&lt;/article&gt;</pre>
Expand All @@ -36,7 +36,7 @@ <h4>Example</h4>
<pre class="example">&lt;p style="text-align: center; font-size: 2em;"&gt;<br />&nbsp;&nbsp; &nbsp;&lt;a href="#photo_of_the_day"&gt;Photo of the day&lt;/a&gt;<br />&lt;/p&gt;<br /><br />&lt;article class="slide" id="photo_of_the_day" itemscope itemtype="http://schema.org/ImageObject"&gt;<br />&nbsp;&nbsp; &nbsp;&lt;nav&gt;&lt;a href="#nowhere" rel="parent"&gt;&lt;/a&gt;&lt;/nav&gt;<br />&nbsp;&nbsp; &nbsp;&lt;img src="images/1.jpg" alt="Photo of the day" itemprop="image" /&gt;<br />&lt;/article&gt;</pre>
<p>will produce <a href="min_example.html" target="_blank">this result</a>.</p>
<h3>Slides containers (viewports)</h3>
<p>Each slide is defined through the element <code><span style="background-color: #ffff00;">&lt;article </span><span style="background-color: #0098ff;">id="my-hash-tag"</span><span style="background-color: #ffff00;"> class="slide"&gt; </span><span style="background-color: #0098ff;">&hellip;</span><span style="background-color: #ffff00;"> &lt;/article&gt;</span></code>. Such element is constructed so that:</p>
<p>Each slide is defined through the element <code><span style="background-color: #ffff00;">&lt;article </span><span style="background-color: #0098ff;">id="my-hash-tag"</span><span style="background-color: #ffff00;"> class="slide"&gt; &hellip; </span><span style="background-color: #ffff00;">&lt;/article&gt;</span></code>. Such element is constructed so that:</p>
<ul>
<li>it is independent and does not require any special container; it can nevertheless link to other slides, forming so a gallery</li>
<li>it can contain any kind of children elements, in any number and in any order (but be aware of the limits of the screen)</li>
Expand All @@ -48,14 +48,14 @@ <h3>Slides containers (viewports)</h3>
<h3>Children elements</h3>
<h4>Direct children of the viewport</h4>
<ol>
<li>The first <code>&lt;nav&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the left side of the viewport. Other <code>&lt;nav&gt;</code> direct children will be normally displayed within the flow body of the main parent (i.e., on the right side, see below).</li>
<li>The first <code>&lt;header&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the top side of the viewport. Other <code>&lt;header&gt;</code> direct children will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) &ndash; but consider to use only one <code>&lt;header&gt;</code> element for each scoped parent.</li>
<li>The first <code>&lt;footer&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the right-bottom corner of the viewport. Other <code>&lt;footer&gt;</code> direct children will be displayed normally within the flow body of the main parent (i.e., on the right side, see below) &ndash; but consider to use only one <code>&lt;footer&gt;</code> element for each scoped parent.</li>
<li>The first <code>&lt;aside&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the left-bottom corner of the viewport. Other <code>&lt;aside&gt;</code> direct children will be displayed normally within the flow body of the main parent (i.e., on the right side, see below)..</li>
<li>The first <code>&lt;nav&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the left side of the viewport. Other <code>&lt;nav&gt;</code> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below).</li>
<li>The first <code>&lt;header&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the top side of the viewport. Other <code>&lt;header&gt;</code> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) &ndash; but consider to use only one <code>&lt;header&gt;</code> element for each scoped parent.</li>
<li>The first <code>&lt;footer&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the right-bottom corner of the viewport. Other <code>&lt;footer&gt;</code> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) &ndash; but consider to use only one <code>&lt;footer&gt;</code> element for each scoped parent.</li>
<li>The first <code>&lt;aside&gt;</code> element found to be <em>direct child</em> of the slide will be placed on the left-bottom corner of the viewport. Other <code>&lt;aside&gt;</code> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below)..</li>
<li>The first direct child found to be neither <code>&lt;nav&gt;</code>, nor <code>&lt;header&gt;</code>, nor <code>&lt;footer&gt;</code>, nor <code>&lt;aside&gt;</code> will be placed at the center of the slide and considered to be the main content of the slide. <span style="background-color: #ffff00;"><strong>From now on, this will be called &ldquo;The Fifth Element&rdquo; or &ldquo;<span style="text-decoration: underline;">the <code>&lt;<em>leeloo</em>&gt;</code> element</span>&rdquo; (after <a href="https://en.wikipedia.org/wiki/The_Fifth_Element" target="_blank">Luc Besson's movie</a>).</strong></span></li>
<li>Further direct children non matching the previous conditions will be displayed on the right side of the screen, in their normal order; the <code>overflow</code> property of this portion of the slide is set on <code>hidden</code>.</li>
</ol>
<h4>Non-direct children of the viewport&nbsp;(sub-children)</h4>
<h4>Non-direct children of the viewport (sub-children)</h4>
<ol>
<li><code>&lt;a href="&hellip;"&gt;</code> elements children of the viewport's main <code>&lt;nav&gt;</code> will be considered as internal navigation links, and displayed on the left side of the viewport (with the exception of <code>a[rel="parent"]</code>, see below). Within the main <code>&lt;nav&gt;</code> container, <strong>Take five!</strong> is sensitive to the <code>rel</code> attribute. In particular:<br /><ol>
<li><code>article.slide &gt; nav:first-of-type a[rel="index"]</code> will be accompained by the label &ldquo;Index&rdquo;</li>
Expand All @@ -80,14 +80,14 @@ <h4>The <code>a[rel="parent"]</code> element</h4>
<li>If it is inside the <code><em>&lt;leeloo&gt;</em></code> element and is <em>empty</em> &rArr; a transparent clickable layer will cover the whole (and only) <code><em>&lt;leeloo&gt;</em></code> element.</li>
<li>If, instead,<br />
<ul>
<li>it is inside the <code>&lt;leeloo&gt;</code> element but is <em>not empty</em>,</li>
<li>it is inside the <code><em>&lt;leeloo&gt;</em></code> element but is <em>not empty</em>,</li>
<li>or it is outside both the main <code>&lt;nav&gt;</code> and the <code><em>&lt;leeloo&gt;</em></code> element (empty or not empty),</li>
<li>or <code>a[rel="parent"]</code> *is* the <code><em>&lt;leeloo&gt;</em></code> element iself &ndash; very unlikely...</li>
</ul>
then &rArr; it will be ignored by this CSS and will be normally displayed.</li>
then &rArr; it will be ignored by this CSS and displayed as a normal link.</li>
</ul>
<h4>More than one token within the <code>rel</code> attribute</h4>
<p>It is&nbsp;syntactically and semantically valid to assign more than one token to the <code>rel</code> attribute. As explained in the <a href="https://www.w3.org/TR/html5/links.html#links-created-by-a-and-area-elements" target="_blank">W3C Recommendation 28 October 2014</a>,</p>
<p>It is syntactically and semantically valid to assign more than one token to the <code>rel</code> attribute. As explained in the <a href="https://www.w3.org/TR/html5/links.html#links-created-by-a-and-area-elements" target="_blank">W3C Recommendation 28 October 2014</a>,</p>
<blockquote>The attribute's value must be a set of space-separated tokens.</blockquote>
<p>In this case, within the main <code>&lt;nav&gt;</code>, the CSS will choose the most important token according to the following order (the more down in the list the less important):</p>
<ol>
Expand Down Expand Up @@ -164,6 +164,7 @@ <h3>Notes</h3>
<li>For learning more about the <code>itemscope</code> attribute and HTML5 microdata, please see <a href="http://schema.org/" target="_blank">schema.org</a>. A lists of the main <code>rel</code> attributes can be found <a href="https://www.w3.org/wiki/HTML/Elements/link#HTML_Attributes" target="_blank">here</a>, while its extension, together with information about HTML5 microformats, can be found <a href="http://microformats.org/wiki/existing-rel-values" target="_blank">here</a>.</li>
<li><strong>Take five!</strong> aims to be compatible with both microdata and microformats. But <em>neither microdata nor microformats are required by <strong>Take five!</strong></em>: the only required condition is a <code>class="slide"</code> assigned to an <code>&lt;article&gt;</code> element.</li>
<li>It is possible to prevent the hashtag from being displayed in the viewport by using the class <code>"no-hashtag"</code> &ndash; as in <code>&lt;article class="slide <span style="background-color: #ffff00;">no-hashtag</span>" id="my-hash-name"&gt; &hellip; &lt;/article&gt;</code>.</li>
<li>It is possible to prevent the creation of the navigation buttons by main <code>&lt;nav&gt;</code>'s links <code>parent</code>, <code>next</code>, <code>prev</code>, <code>index</code>, <code>last</code>, <code>first</code>, <code>bookmark</code> and <code>author</code> by assigning the class <code>"no-nav"</code> to the link &ndash; as in <code>&lt;a href="#sample-slide" rel="next" class="<span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code> or <code>&lt;a href="#sample-slide" rel="next" class="no-label <span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code>. The <code>"no-nav"</code> class allows also to declare more than one link with the same <code>rel</code> attribute within the same main <code>&lt;nav&gt;</code>, <em>with the only exception of <code>a[rel="parent"]</code>, which can never be duplicated within the main <code>&lt;nav&gt;</code></em>.</li>
<li>The slide container (<code>article.slide</code>) can optionally possess a <code>data-context</code> attribute, whose content will be displayed on the left-bottom of the viewport &ndash; as in <code>&lt;article class="slide" <span style="background-color: #ffff00;">data-context="Hello world!"</span> id="my-hash-name"&gt; &hellip; &lt;/article&gt;</code>.</li>
<li>Feel free to make experiments. <strong>Take five!</strong> is very flexible, but in in case of problems, please do not hesitate to <a href="https://github.com/madmurphy/takefive.css/issues" target="_blank">write</a>.</li>
</ul>
Expand Down
Loading

0 comments on commit 5c6ddd6

Please sign in to comment.