@cocreate/cocreatejs
Version:
A collaborative low code headless CMS and Javascript framework for building collaborative no code platforms, apps and UI's. Build powerful applications using HTML5 attributes or Javascript api.
198 lines (178 loc) • 8.21 kB
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://cocreate.app" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<meta
property="og:image"
content="https://cdn.cocreate.app/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-selector="">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[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-selector="">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[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">
<script src="https://cocreate.app/dist/CoCreate.js"></script>
</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/CoCreate-app/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-selector="document; main, document; nav, document; 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>