Skip to content

Commit 6795ae7

Browse files
frankpaganfrankpagan
committed
format html
1 parent 0195b1b commit 6795ae7

File tree

1 file changed

+223
-65
lines changed

1 file changed

+223
-65
lines changed

‎docs/index.html

Lines changed: 223 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,262 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>CoCreate-element-prototype Documentation | CoCreateJS </title>
8-
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
9-
<meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
10-
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>CoCreate-element-prototype Documentation | CoCreateJS</title>
8+
<link
9+
rel="icon"
10+
type="image/png"
11+
sizes="32x32"
12+
href="https://cocreate.app/images/favicon.ico" />
13+
<meta
14+
name="description"
15+
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16+
<meta
17+
name="keywords"
18+
content="helper classes, utility classes, css framework, css library, inline style classes" />
1119
<meta name="robots" content="index,follow" />
12-
20+
1321
<!-- CoCreate CSS CDN -->
14-
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
15-
16-
<link rel="manifest" href="/manifest.webmanifest" />
17-
</head>
22+
<link
23+
rel="stylesheet"
24+
href="https://cdn.cocreate.app/latest/CoCreate.min.css"
25+
type="text/css" />
26+
27+
<link rel="manifest" href="/manifest.webmanifest" />
28+
</head>
1829

1930
<body>
20-
<div collection="" document_id="" name="" id="cocreate-element-prototype">
21-
<div class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
31+
<div
32+
collection=""
33+
document_id=""
34+
name=""
35+
id="cocreate-element-prototype">
36+
<div
37+
class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
2238
<div class="display:flex align-items:center">
2339
<h2>CoCreate-element-prototype</h2>
2440
</div>
25-
<div class="display:flex align-items:center font-size:20px" share-height="600" share-width="500" share-media="https://via.placeholder.com/300/09f/fff.png">
26-
<a href="https://github.com/CoCreate-app/CoCreate-element-prototype" target="_blank" class="margin-right:15px"><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
27-
<a class="margin-right:15px share" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
28-
<a class="margin-right:15px share" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
29-
<a class="margin-right:15px share" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
30-
<a class="margin-right:15px share" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
41+
<div
42+
class="display:flex align-items:center font-size:20px"
43+
share-height="600"
44+
share-width="500"
45+
share-media="https://via.placeholder.com/300/09f/fff.png">
46+
<a
47+
href="https://github.com/CoCreate-app/CoCreate-element-prototype"
48+
target="_blank"
49+
class="margin-right:15px"
50+
><i
51+
class="height:20px fill:#505050"
52+
src="/assets/svg/github.svg"></i
53+
></a>
54+
<a
55+
class="margin-right:15px share"
56+
share-network="twitter"
57+
title="Share on twitter"
58+
><i
59+
class="height:20px fill:#505050"
60+
src="/assets/svg/twitter.svg"></i
61+
></a>
62+
<a
63+
class="margin-right:15px share"
64+
share-network="facebook"
65+
title="Share on Facebook"
66+
><i
67+
class="height:20px fill:#505050"
68+
src="/assets/svg/facebook.svg"></i
69+
></a>
70+
<a
71+
class="margin-right:15px share"
72+
share-network="instagram"
73+
title="Share on instagram"
74+
><i
75+
class="height:20px fill:#505050"
76+
src="/assets/svg/instagram.svg"></i
77+
></a>
78+
<a
79+
class="margin-right:15px share"
80+
share-network="share"
81+
title="Share on share"
82+
><i
83+
class="height:20px fill:#505050"
84+
src="/assets/svg/share-alt.svg"></i
85+
></a>
3186
</div>
3287
</div>
33-
<p class="max-width:500px margin:20px_10px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</h1>
34-
<div id="element-prototype-section" class="display:flex flex-wrap:wrap">
88+
<h1 class="max-width:500px margin:20px_10px">
89+
A simple HTML5, CSS and pure javascript component. Easy
90+
configuration using data-attributes and highly styleable.
91+
</h1>
92+
<div
93+
id="element-prototype-section"
94+
class="display:flex flex-wrap:wrap">
3595
<div class="flex-grow:1 width:300px padding:20px_10px">
36-
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Install</h2>
37-
<pre class="margin-top:15px"><code class="language-javascript">npm install cocreate-element-prototype</code></pre>
96+
<h2
97+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
98+
Install
99+
</h2>
100+
<pre
101+
class="margin-top:15px"><code class="language-javascript">npm install cocreate-element-prototype</code></pre>
38102
<p class="padding:10px_0px">Or you can use cdn link:</p>
39103
<pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-element-prototype.min.js</code></pre>
40-
41-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Usage</h2>
42-
<p class="padding:10px_0px">element-prototype usage content</p>
104+
105+
<h2
106+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
107+
Usage
108+
</h2>
109+
<p class="padding:10px_0px">
110+
element-prototype usage content
111+
</p>
43112
<pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
44-
45-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Reference</h2>
46-
<p class="padding:10px_0px">This is element-prototype reference content</p>
113+
114+
<h2
115+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
116+
Reference
117+
</h2>
118+
<p class="padding:10px_0px">
119+
This is element-prototype reference content
120+
</p>
47121
<pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
48-
<p class="padding:10px_0px">This is element-prototype reference content</p>
122+
<p class="padding:10px_0px">
123+
This is element-prototype reference content
124+
</p>
49125

50-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Attributes</h2>
51-
<ul class="list-style-type:none ">
52-
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
53-
<h4><span>element-prototype</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
126+
<h2
127+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
128+
Attributes
129+
</h2>
130+
<ul class="list-style-type:none">
131+
<li
132+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
133+
<h4>
134+
<span>element-prototype</span>
135+
<span class="cocreate-badge success"
136+
>string</span
137+
>
138+
<span class="cocreate-badge warning"
139+
>optional</span
140+
>
141+
</h4>
54142
<p>element-prototype-attribute</p>
55143
</li>
56-
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
57-
<h4><span>element-prototype</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
144+
<li
145+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
146+
<h4>
147+
<span>element-prototype</span>
148+
<span class="cocreate-badge success"
149+
>string</span
150+
>
151+
<span class="cocreate-badge warning"
152+
>optional</span
153+
>
154+
</h4>
58155
<p>element-prototype-attribute</p>
59156
</li>
60157
</ul>
61158
</div>
62-
63-
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
159+
160+
<div
161+
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
64162
<!-- SandBox -->
65-
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
66-
<div class="position:sticky top:0 padding:10px_0px height:100vh">
163+
<h2
164+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
165+
Demo
166+
</h2>
167+
<div
168+
class="position:sticky top:0 padding:10px_0px height:100vh">
67169
<!-- SandBox -->
68-
<div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
69-
70-
<div id="demo-code" resizable class="position:relative height:50%">
71-
<textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
72-
<div resize="bottom" class="background:lightgrey"></div>
170+
<div
171+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
172+
id="playground">
173+
<div
174+
id="demo-code"
175+
resizable
176+
class="position:relative height:50%">
177+
<textarea
178+
type="code"
179+
lang="html"
180+
collection="demos"
181+
document_id=""
182+
name="demo"
183+
save="false"
184+
id="demo"
185+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
186+
<div
187+
resize="bottom"
188+
class="background:lightgrey"></div>
73189
</div>
74-
75-
<div id="demo-preview" class="position:relative overflow:auto background-color:white">
76-
<div class="demopreview" class="padding:20px"></div>
190+
191+
<div
192+
id="demo-preview"
193+
class="position:relative overflow:auto background-color:white">
194+
<div class="demopreview padding:20px"></div>
77195
</div>
78-
79-
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
80-
<a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
81-
<a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
82-
<a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
83-
<a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
84-
<a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
196+
197+
<div
198+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
199+
<a
200+
class="margin-right:10px"
201+
id="eye"
202+
show="#eye-slash"
203+
hide="#eye, #demo-preview"
204+
toggle="code-height"
205+
toggle-target="#demo-code"
206+
><i
207+
class="height:18px fill:#505050"
208+
src="/assets/svg/eye.svg"></i
209+
></a>
210+
<a
211+
class="margin-right:10px"
212+
hidden
213+
id="eye-slash"
214+
show="#eye, #demo-preview"
215+
hide="#eye-slash"
216+
toggle="code-height"
217+
toggle-target="#demo-code"
218+
><i
219+
class="height:20px fill:#505050"
220+
src="/assets/svg/eye-slash.svg"></i
221+
></a>
222+
<a
223+
class="margin-right:10px"
224+
id="code"
225+
show="#code-slash"
226+
hide="#code, #demo-code"
227+
><i
228+
class="height:20px fill:#505050"
229+
src="/assets/svg/code.svg"></i
230+
></a>
231+
<a
232+
class="margin-right:10px"
233+
hidden
234+
id="code-slash"
235+
show="#code, #demo-code"
236+
hide="#code-slash"
237+
><i
238+
class="display:flex height:18px fill:#505050"
239+
src="/assets/svg/code.svg"></i
240+
></a>
241+
<a
242+
class="margin-right:5px"
243+
fullscreen
244+
fullscreen-target="#playground"></a>
85245
</div>
86-
87246
</div>
88247
<!-- End SandBox -->
89-
</div>
248+
</div>
90249
</div>
91-
92-
</div>
250+
</div>
93251
</div>
94252
<script>
95253
var CoCreateConfig = {
96-
key: '2061acef-0451-4545-f754-60cf8160',
97-
organization_id: '5ff747727005da1c272740ab'
98-
}
254+
key: "2061acef-0451-4545-f754-60cf8160",
255+
organization_id: "5ff747727005da1c272740ab",
256+
};
99257
</script>
100-
258+
101259
<!--CoCreateJS-->
102260
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
103261
</body>
104-
</html>
262+
</html>

0 commit comments

Comments
 (0)