index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<title>CoCreateJS Documentation</title>
		<meta
			name="description"
			content="Full-Featured Web Apps in a Fraction of the Time, With Zero Lock-In directly from the design phase. Not a designer or a developer, AI has you covered." />
		<meta name="keywords" content="web apps, AI, design, development" />
		<meta name="robots" content="index, follow" />
		<meta name="author" content="CoCreate" />
		<meta name="generator" content="CoCreateJS" />

		<!-- Canonical Tag -->
		<link rel="canonical" href="https://CoCreateJS.com" />

		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="../assets/favicon.ico" />

		<meta
			property="og:image"
			content="https://cdn.CoCreateJS.com/docs/action.png" />

		<link
			rel="stylesheet"
			href="../index.css"
			array="files"
			object="60888216117c640e7596303f"
			key="src"
			type="text/css"
			save="true"
			parse="true" />

		<!-- Google tag (gtag.js) -->
		<script
			async
			src="https://www.googletagmanager.com/gtag/js?id=UA-121709453-1"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() {
				dataLayer.push(arguments);
			}
			gtag("js", new Date());

			gtag("config", "UA-121709453-1");
		</script>

		<link rel="manifest" href="/manifest.webmanifest" />
	</head>

	<body>
		<!-- Navbar -->
		<nav
			content_id="content"
			scroll="sticky-nav,"
			scroll-up="5"
			scroll-down="5"
			path="../"
			src="../components/navbar.html"></nav>

		<main class="padding:15px padding:25px@lg@xl" content_id="content">
			<section>
				<div
					id="introduction"
					class="margin-top:10px"
					scroll
					scroll-intersect="color:dodgerblue"
					scroll-query="">
					<span
						class="display:flex align-items:center width:fit-content"
						hover="display:block!important"
						hover-query="[href='#introduction']">
						<h2 class="padding:5px_0px">Introduction</h2>
						<a
							class="margin-left:10px display:none"
							href="#introduction"
							><i src="/assets/svg/link.svg"></i
						></a>
					</span>
				</div>
				<h3 class="padding-top:10px" id="cocreatejs">CoCreateJS</h3>
				<p>
					A dependancy free, vanilla javascript Realtime CRUD and
					Collaboration Framework. Easily integrates in any HTML
					template using HTML5 attributtes. Converts a regular html
					website into a dynamic Realtime application. If you know
					basic html you can easily implement and use the CoCreateJS
					library/framework. If you have javascript knowledege,
					CoCreateJS is highly extensible Object oriented
					collaboration framework.
				</p>

				<!-- <h3 class="padding-top:10px" id="cocreatecss">CoCreateCSS</h3>
				<p>A dependancy free, CSS and vanilla javascript library. Containing a set of easy to use natural language atomic classes, and a wide range of components to assist in developing modern UI/UX. Litte to no learning curve, CoCreateCSS uses the same properties and values you are already familiar with.</p> -->

				<h3 class="padding-top:20px">Micro Archeticture</h3>
				<p>
					Vanilla javascript, lightweight, single purpose micro
					components, lazy loaded as required. Easily modify, remove
					and/or replace components. Highly configuarable using HTML5
					attributes. HTML5 developers can use a combination of
					attributes to create a dynamic web application. Javascript
					developers have access to API, callbacks and events.
				</p>
			</section>

			<section id="getting_started">
				<div
					id="introduction1"
					class="margin-top:70px"
					scroll
					scroll-intersect="color:dodgerblue"
					scroll-query="">
					<span
						class="display:flex align-items:center width:fit-content"
						hover="display:block!important"
						hover-query="[href='#getting-started']">
						<h2 class="padding:5px_0px">Getting Started</h2>
						<a
							class="margin-left:10px display:none"
							href="#getting-started"
							><i src="/assets/svg/link.svg"></i
						></a>
					</span>
				</div>

				<p>
					Simply add the cdn script in your HTML files and apply
					CoCreate
					<a href="./elements.html" class="color:dodgerblue"
						>attributes</a
					>
					to create a dynamic experience.
				</p>
				<pre><code class="language-html">
	&lt;script src="https://CoCreateJS.com/dist/CoCreate.js"&gt;&lt;/script&gt;
	        	</code></pre>
			</section>

			<!-- Previous & Next -->
			<section
				class="width:100% margin-top:70px display:flex flex-wrap:wrap">
				<div
					class="padding:30px_15px border:1px_solid_#ddd flex-basis:50%">
					<p>Back to the top</p>
					<p class="font-size:20px font-size:12px@xs">
						<a href="#introduction">Introduction to CoCreateJS</a>
					</p>
				</div>
				<div
					class="padding:30px_15px border:1px_solid_#ddd flex-basis:50% text-align:right">
					<p>Next Topic</p>
					<p class="font-size:20px font-size:12px@xs">
						<a href="./elements.html"
							>Using CoCreateJS attributes on html elements</a
						>
					</p>
				</div>
			</section>

			<button
				href="https://github.com/CoCreateJS/CoCreateJS/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
				target="_blank"
				class="button-round">
				<i src="../assets/svg/pencil-alt.svg"></i>
			</button>
		</main>

		<!-- Footer -->
		<footer
			id="spreadtheword"
			content_id="content"
			path="../"
			src="../components/footer.html"
			class="margin-left:0px!important@xs@sm@md"></footer>

		<!-- Sidenav -->
		<sidenav
			id="menuL"
			class="top:0px left:0px width:0px width:300px@xl"
			resizable
			resize-query="$document main, nav,  footer"
			resize-attribute="style"
			resize-property="margin-left">
			<menu path="../" src="./components/menu.html"></menu>
			<div resize="right"></div>
		</sidenav>

		<script src="../dist/CoCreate.js"></script>
	</body>
</html>