johnmuhl / switch

a stupid layout switcher for mootools

switch / demo.html
100644 61 lines (61 sloc) 1.011 kb
raw blame history 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!doctype html>
<title>switch demo</title>
<style>
  h1 {
    color: black;
  }
  h1:after {
    content: " -- you'll probably never see this.";
  }
  .xx-small h1 {
    color: aqua;
  }
  .xx-small h1:after {
    content: " -- xx-small";
  }
  .x-small h1 {
    color: blue;
  }
  .x-small h1:after {
    content: " -- x-small";
  }
  .small h1 {
    color: fuchsia;
  }
  .small h1:after {
    content: " -- small";
  }
  .medium h1 {
    color: lime;
  }
  .medium h1:after {
    content: " -- medium";
  }
  .large h1 {
    color: purple;
  }
  .large h1:after {
    content: " -- large";
  }
  .x-large h1 {
    color: red;
  }
  .x-large h1:after {
    content: " -- x-large";
  }
  .xx-large h1 {
    color: teal;
  }
  .xx-large h1:after {
    content: " -- xx-large";
  }
  .xxx-large h1 {
    color: maroon;
  }
  .xxx-large h1:after {
    content: " -- xxx-large";
  }
</style>
<script src="mootools.js"></script>
<script src="switch.js"></script>
<body class="indestructible"><h1>Switch!</h1></body>