Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 42 lines (26 sloc) 1.816 kB
3c501ba @arian Add README
arian authored
1 MooTools Demos
2 ==============
3
4 This is the new MooTools Demo runner and the new MooTools Demos.
5 The demos can be opened in [jsFiddle](http://www.jsfiddle.net) for editing.
6
c139550 @arian More info for creating new demos
arian authored
7 ## Creating new Demos
45d4697 @arian Update Element.Delegation Colors + add the link to the color scheme
arian authored
8
c139550 @arian More info for creating new demos
arian authored
9 We're always looking for new demos that can be great additions to the docs or give the wow-effect for new users.
10 With the demos we want to show what MooTools is capable of. The demos is a great way to contribute to MooTools
11 in a easy way, by adding new demos and improving existing ones.
45d4697 @arian Update Element.Delegation Colors + add the link to the color scheme
arian authored
12
c139550 @arian More info for creating new demos
arian authored
13 You can submit new demos by forking this repository and send us a [pull request](https://github.com/mootools/mootools-demos/pulls).
45d4697 @arian Update Element.Delegation Colors + add the link to the color scheme
arian authored
14
c139550 @arian More info for creating new demos
arian authored
15 The *demos* directory contains all the demos. You can start creating a new demo by copying the directory of an existing
16 demo. The name of the directory is the same as used in the URL after `?demo=`.
17
18 Each demo contains at least four files:
19
20 - **demo.css** - Contains the CSS for the demo, shows up in the CSS tab
21 - **demo.details** - This is a YAML file which contains extra info, like a desription and links to the docs
22 - **demo.html** - Contains the HTML of the demo, shows up in the HTML tab
23 - **demo.js** - Contains the JavaScript of the demo, shows up in the JS tab
24
25 ### demo.js
26
27 demo.js is probably the most important file of the demo because it contains the MooTools code.
28
29 It is important to wrap the code in a *domready* event. This is important so it works in this demo runner as well as on jsfiddle.
30
31 window.addEvent('domready', function(){
32 // code here
33 });
34
35 #### Code guidelines
36
37 We try to use the MooTools code guidelines. Those can be found in the [MooTools Core Wiki](https://github.com/mootools/mootools-core/wiki/Syntax-and-Coding-Style-Conventions)
38
39 ### Used Color Scheme
40
41 In order to give the demos a consistent look, we use this [Color Scheme](http://jsfiddle.net/Z5u5s/3/)
Something went wrong with that request. Please try again.