-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocs.html
104 lines (103 loc) · 4.74 KB
/
docs.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Documentation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='shapeGen.min.js'></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>shapeGen.js Documentation</h1>
<img id="logo" src="shapeGen.png" />
<p>shapeGen.js allows a person to easily create CSS shapes. These shapes are generated by a jQuery plugin that work based on inputs from attributes of the HTML element.</p>
<p>There are several kinds of shapes that can be made using shapeGen.js using a single line of HTML code. To create a shape, follow these steps:</p>
<p>Step 1: Include the scripts inside the <head> tags:</p>
<code>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<br>
<script src="shapeGen.min.js"></script>
</code>
<p>Step 2: Add this where you want the shape to appear:</p>
<code>
<i shape="[shape]" color="[color]" size="[size]" [br]></i>
</code>
<p>The available shapes are:</p>
<ul>
<a href="#oval"><li>Circle: oval</li></a>
<a href="#oval"><li>Oval: oval</li></a>
<a href="#rec"><li>Square: rec</li></a>
<a href="#rec"><li>Rectangle: rec</li></a>
<a href="#tri"><li>Triangle: tri</li></a>
<a href="#tra"><li>Trapezium: tra</li></a>
</ul>
<p>The following color formats are accepted:</p>
<ul>
<li>Hex codes: #abcdef</li>
<li>RBG/RGBA: rgb(123,123,123)</li>
<li>Plain text: green</li>
<li>Random color: random</li>
<li>If no color is specified, the default color is black</li>
</ul>
<p>The br in the <code id="in"><i></code> tag is optional. By default, these shapes are inline-blocks. if the br is added, it makes the shape a block and puts it on a seperate line.</p>
<p>Example</p>
<code>
<i shape="rec" color="random" size="200px"></i>
</code>
<i shape="rec" color="random" size="200px"></i>
<p id="oval">Circle and Oval:</p>
<p class="sub">For an oval, the size is specified in x-axis and y-axis, seperated by a comma. If there is no comma, the shape is a circle. For example:</p>
<code>
<i shape="oval" color="random" size="200px"></i>
</code>
<i shape="oval" color="random" size="200px"></i>
<p class="sub">and</p>
<code>
<i shape="oval" color="random" size="150px, 200px"></i>
</code>
<i shape="oval" color="random" size="150px, 200px"></i>
<p id="rec">Square and Rectangle:</p>
<p class="sub">Just like an oval, the size is specified in x-axis and y-axis, seperated by a comma. If there is no comma, the shape is a circle. For example:</p>
<code>
<i shape="rec" color="random" size="200px"></i>
</code>
<i shape="rec" color="random" size="200px"></i>
<p class="sub">and</p>
<code>
<i shape="rec" color="random" size="150px, 200px"></i>
</code>
<i shape="rec" color="random" size="150px, 200px"></i>
<p id="tri">Triangle:</p>
<p class="sub">For a triangle, the size specified is used as the height of the triangle. Triangles have an extra attribute to specify direction (n, s, e, w, ne, nw...). If no direction is specified, the triangle defaults to n.</p>
<code>
<i shape="tri" color="random" size="200px" dir="n"></i>
</code>
<i shape="tri" color="random" size="200px" dir="n"></i>
<p class="sub">Examples of the directions:</p>
<i shape="tri" color="random" size="50px" dir="n"></i>
<i shape="tri" color="random" size="50px" dir="e"></i>
<i shape="tri" color="random" size="50px" dir="s"></i>
<i shape="tri" color="random" size="50px" dir="w"></i>
<i shape="tri" color="random" size="50px" dir="ne"></i>
<i shape="tri" color="random" size="50px" dir="sw"></i>
<i shape="tri" color="random" size="50px" dir="se"></i>
<i shape="tri" color="random" size="50px" dir="nw"></i>
<p id="tra">Trapezium:</p>
<p class="sub">For a trapezium, the sizes specified are used as the top side, bottom side and the height, in that order.</p>
<code>
<i shape="tra" color="random" size="200px, 300px, 100px"></i>
</code>
<i shape="tra" color="random" size="200px, 300px, 100px"></i>
<p class="sub">and</p>
<code>
<i shape="tra" color="random" size="300px, 200px, 100px"></i>
</code>
<i shape="tra" color="random" size="300px, 200px, 100px"></i>
<p class="sub">Note: It is possible to create isosceles triangles by setting either the too or bottom to 0.</p>
<code>
<i shape="tra" color="random" size="0px, 200px, 100px"></i>
</code>
<i shape="tra" color="random" size="0px, 100px, 150px"></i>
<p>More shapes coming soon...</p>
</body>
</html>