Skip to content

Commit 1347df1

Browse files
bert-githubbert-github
committed
Added some examples using Alexis Deveria's JavaScript implementation (adapted to use 'grid' and 'flow' instead of 'display' and 'position')
1 parent 49e3539 commit 1347df1

5 files changed

Lines changed: 1338 additions & 0 deletions

File tree

‎css3-layout/Overview.src.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,9 @@ <h3>Summary and examples</h3>
261261
&lt;dd id=lab2&gt;B is de bakker
262262
&lt;/dl&gt;
263263
</pre>
264+
265+
<p><a href="ex-aapje.html">Try it out!</a> (Uses a JavaScript
266+
emulation in browsers that do not implement grid templates natively.)
264267
</div>
265268

266269
<div class=example>

‎css3-layout/ex-aapje.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
2+
<html lang=nl>
3+
<title>Example “aapje”</title>
4+
<script type="text/javascript" src="jquery.min.js"></script>
5+
<script type="text/javascript" src="jquery.tpl_layout1.1.6-bb.js"></script>
6+
<script type="text/javascript">$(function() {$.setTemplateLayout();});</script>
7+
8+
<style type="text/css">
9+
dl { grid: "ab"
10+
"cd" }
11+
#sym1 { flow: a }
12+
#lab1 { flow: b }
13+
#sym2 { flow: c }
14+
#lab2 { flow: d }
15+
</style>
16+
<dl>
17+
<dt id=sym1>A
18+
<dd id=lab1>A is een aapje
19+
<dt id=sym2>B
20+
<dd id=lab2>B is de bakker
21+
</dl>
22+
23+
</html>

‎css3-layout/ex-footnote.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
2+
<html lang=en>
3+
<title>Example “footnote”</title>
4+
<script type="text/javascript" src="jquery.min.js"></script>
5+
<script type="text/javascript" src="jquery.tpl_layout1.1.6-bb.js"></script>
6+
<script type="text/javascript">$(function() {$.setTemplateLayout();});</script>
7+
8+
<style type="text/css">
9+
div.section {
10+
grid: "*"
11+
"F"}
12+
.note {
13+
flow: F;
14+
content: counter(note) ".\A0" contents;
15+
counter-increment: note;
16+
font-size: smaller}
17+
.note::before {
18+
content: counter(note);
19+
vertical-align: super;
20+
font-size: larger}
21+
</style>
22+
23+
<p>(This example doesn't work with the JavaScript emulator.)
24+
25+
<div class=section>
26+
<p>The balubious coster of the fifth secter<span
27+
class=note> The sixth secter coster is a difter
28+
manon.</span> of The Rollow Carpug mentizes a costernica.
29+
<p>&hellip;
30+
</div>
31+
32+
</html>

‎css3-layout/jquery.min.js‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)