-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (118 loc) · 6.73 KB
/
index.html
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<title>Atto | Ultra-Lightweight, Pure-JavaScript UI Components</title>
<!--[if lt IE 9]> <script src="../js/html5shiv.js"></script> <![endif]-->
<link rel="stylesheet" href="/fonts/gooddog/stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="aw.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/gh-banner.css" />
<style>
/* overrides until I can refresh the CloudFlare cache */
.gh-banner a {
background-color: rgb(13, 196, 242);
background-image: none;
}
</style>
</head>
<body>
<header>
<h1 id="bubble1" class="speech-bubble primary invisible"><span>Aw Yeah Atto!</span></h1>
<h2 id="bubble2" class="speech-bubble secondary invisible"><span>Ultralight, Pure-JavaScript Widgets</span></h2>
</header>
<div class="gh-banner"><a href="https://github.com/buyog/atto">Fork me on GitHub</a></div> <!-- adapted from https://gist.github.com/1679040 -->
<article class="main">
<ul id="gallery" class="group">
<li><a href="demo/accordion.html">Accordion</a>
<li><a href="demo/slides.html" title="(or carousel, if you prefer)">SlideBox</a>
<li><a href="demo/tabs.html">TabContainer</a>
<!--
-->
<li><a href="demo/hpanel.html">HPanel</a></li>
<li><a href="demo/vpanel.html">VPanel</a></li>
<li><a href="demo/panels.html">Layout</a></li>
<!--
<li><a href="demo/button.html">Button</a></li>
<li><a href="demo/combo.html">ComboBox</a></li>
<li><a href="demo/textbox.html">TextBox</a></li>
-->
<li><a href="demo/dataview.html">DataView</a></li>
<li><a href="demo/prog.html">ProgressBar</a></li>
<li><a href="demo/list.html">ListBox</a></li>
<!-- -->
<li><a href="demo/tree.html">Tree</a></li>
<li><a href="demo/dialog.html">Dialog</a></li>
<!--li><a href="demo/nav.html">NavContainer</a></li-->
<!-- -->
<li><a href="demo/templated.html">Templatizr</a></li>
<li><a href="demo/outliner.html">Outliner</a></li>
<li><a href="demo/tao.html">Tao</a></li>
<!-- -->
<li>(More to come!)</li>
</ul>
<section class='intro'>
<p><span class="caps">Atto</span> is a collection of several basic UI components
(i.e. widgets) that I've built for my own personal use, but figured I'd share
in case anyone else wants a <em>super</em> light widget for something where the
overhead of a full-blown library like <a href="http://dojotoolkit.com">Dojo</a>,
<a href="http://developer.yahoo.com/yui/">YUI</a>, or
<a href="http://jqueryui.com/">jQuery UI</a> is undesirable. They have <strong>zero</strong>
external dependencies, work on all modern web browsers, and
<a href="http://en.wikipedia.org/wiki/Progressive_enhancement">degrade gracefully</a> on IE8
(IE6 and 7 are another matter, sadly, but I'm making the conscious decision not to support those at the moment).</p>
<p class="aside">(You could call this progressive enhancement or graceful degradation if you want, and I certainly strive for that.
For my part, though, I call it "I don't want my site to be broken if I access it from work")</p>
<p>In spirit they're probably more similar to <a href="http://wijmo.com/widgets/">Wijmo</a>
than anything else, but my goal is to make them even smaller and more self-contained than those
(awesome though they are). Mostly, though, I just wrote them because I like to tinker. ;)</p>
<p>They're built using as much HTML5 and CSS3 as I could cram in, and lean on CSS3 Transitions to do the
heavy lifting of state transformations and animations. As such, the user experience in IE8
is pretty barebones compared to that of more modern browsers. Of course you can replicate these behaviors
using jQuery or Mootools or Dojo.FX or (pick your favorite framework), but then they wouldn't be quite
so ultralight anymore, so I'd rather not.</p>
<p class="centered"><a href="https://github.com/buyog/atto" id="downLink">Get Atto</a></p>
<!--div id="why-atto" class="expando collapsed">
<p>Originally I called these things "AttoWidgets" to emphasize how tiny they are
(get it, <a href="http://en.wikipedia.org/wiki/Atto-">atto</a>?) but the namespace prefix
they use, <code>aw-</code>, led me in
<a href="http://knowyourmeme.com/memes/aww-yea-guy">another</a>
<a href="http://www.youtube.com/watch?v=5FiFMKR3LGc">direction</a>
<a href="http://www.artbaltazar.com/tinytitans">entirely</a>. But "Aw Yeah Widgets" sounds more like a
slogan than an actual product, so I went back to Atto, but kept the Tiny Titans-inspired site.
Funny how that sometimes happens.</p>
</div>
<p><a href="javascript:toggleIntro()" id="btnToggle">More...</a></p-->
</section>
<footer><span class="caps">Atto</span> is released under the <a href="http://www.opensource.org/licenses/MIT">MIT license</a>.<br/>
If you use these widgets in something interesting, <a href="https://twitter.com/intent/tweet/?text=Hey%20@buyog..." title="Tweet at me, bro!">I'd love to hear about it</a>.
</footer>
</article>
<script src="../require.js"></script>
<script>
require.config({
baseUrl: '..'
});
require(["atto/core"], function(atto) {
atto.addLoadEvent(function() {
// show the header (which is hidden until the custom font-face can get hoisted)
window.setTimeout(function() {
var h = document.getElementById("bubble1");
if (h) { h.classList.toggle('invisible'); }
window.setTimeout(function() {
var h = document.getElementById("bubble2");
if (h) { h.classList.toggle('invisible'); }
}, 500);
}, 500);
});
function toggleIntro() {
var btn = document.getElementById("btnToggle"),
div = document.getElementById("why-atto");
div.classList.toggle('collapsed');
btn.innerHTML = btn.innerHTML == "More..." ? "(Less)" : "More...";
}
});
</script>
</body>
</html>