@cocreate/css-parser
Version:
A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
445 lines (426 loc) • 15.5 kB
HTML
<html lang="en" theme="dark">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreateCSS - A utility first, atomic CSS framework</title>
<meta
name="description"
content="A Low-code JavaScript framework for building collaborative No-code platforms, apps and UI" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<link
rel="stylesheet"
href="../test.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
parse="true"
save="true" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<style type="text/css" media="screen">
/*Sidenav Search Field */
.floating-label_field {
margin-top: 0px;
}
.hide-nav + #menuL {
margin-top: 0px;
max-height: -moz-available;
max-height: -webkit-fill-available;
max-height: fill-available;
will-change: transform;
transition: background 0.3s,
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
background 0.3s;
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
background 0.3s,
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
transform: translateY(0);
-webkit-transform: translateY(0);
}
</style>
<body
class="background:purple@dark:first-child:after transition:background-color_.5s">
<!--<body class="background:purple@dark::first-child:after background:black@dark transition:background-color_.5s@dark background:blue:hover transition:background-color_.5s">-->
<!--<body class="transition:background-color_.5s">-->
<!--<body class="background:blue@dark:hover">-->
<div class="width:50%@300px-500px" parse="false">
<div class="background:black@dark">
<h1 class="color:white@dark">hello how are you</h1>
<div>
<div class="background:black@dark background:blue@light">
<h1 class="color:white@dark color:yellow@light">
hello how are you
</h1>
</div>
<a
toggle="dark, light"
toggle-selector="[theme]"
toggle-attribute="theme"
>Toggle Darkmode</a
>
</div>
</div>
<a
toggle="dark, light"
toggle-selector="[theme]"
toggle-attribute="theme"
>Toggle Darkmode</a
>
</div>
<nav
class="nav display:flex align-items:center background:blue:hover padding-top:10px padding-bottom:10px"
content_id="content"
scroll="sticky-nav,hide-nav"
scroll-up="10"
scroll-down="10"
array="files"
object="60395ef42b3ac232657040fd"
key="src"></nav>
<sidenav
id="menuL"
class="position:fixed top:0px left:0px background:whitesmoke height:100vh width:50px width:300px:hover width:0px@xs"
resizable
resize-selector="[content_id='content']"
resize-property="margin-left"
resize-value="width">
<menu
array="files"
object="603717b07de7fb350ae9fec8"
key="src"></menu>
<div resize="right"></div>
</sidenav>
Modal Viewport/Boundaries
<div
class="position:fixed margin-top:50px"
content_id="content"
id="modal-viewport"></div>
Main Content
<main class="width:auto" content_id="content">
<section class="padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
src="images/dashboard-video.mp4"
type="video/mp4" />
</video>
</div>
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse"
classkey="test">
hehehe
</div>
<div class="test">first one</div>
<div class="test">and second one</div>
<div
class="flex-grow:1 min-width:300px width:50% padding:0px_15px font-size:16px">
<h1 class="font-size:2rem">
A Utility First,
<span class="color:dodgerblue"
>Atomic CSS Framework</span
>
</h1>
<span class="font-size:16px margin-top:10px"
>For Building Collaborative Apps, Platforms and
UI's</span
>
<p class="margin-top:10px">
HTML and CSS, No JS Required...
</p>
<button
href="./elements.html"
class="background-color:dodgerblue color:white border-radius-50px margin-top:20px padding:10px_30px">
Get Started
</button>
</div>
</div>
</div>
</section>
COMPANY SECTION
<section class="background:whitesmoke padding:30px_15px">
<div
class="padding:25px_0px display:flex flex-wrap:wrap justify-content:center flex-direction:row align-items:center">
<div class="padding:0px_10px">
<img
src="images/stripe.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="images/twilio.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="images/sendgrid.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="images/plaid.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="images/shipengine.svg"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="images/googleMaps.png"
class="max-height:60px width:auto" />
</div>
</div>
</section>
Micro Component Architecture
<section class="padding-top:80px padding-bottom:40px" id="features">
<div class="max-width:90% margin:0px_auto">
<div class="display:flex flex-wrap:wrap align-items:center">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
type="video/mp4"
src="images/on-board-video.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1
class="font-size:1.5rem text-transform:uppercase">
Micro Component Architecture
</h1>
<p class="margin-top:10px line-height:1.5">
Vanilla javascript, lightweight, single purpose
micro components. Easily modify, remove and/or
replace components. Highly configuarable using
HTML5 attributes. HTML5 developers can use a
combination of attributes to create a dynamic
experience. Javascript developers still have
access to API, callbacks and events.
</p>
<p></p>
<a
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
>Sign Up Now</a
>
</div>
</div>
</div>
</section>
Collaborative Headless CMS
<section
class="background:whitesmoke padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
type="video/mp4"
src="images/cards.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1
class="font-size:1.5rem text-transform:uppercase">
Collaborative Headless CMS
</h1>
<p class="margin-top:10px line-height:1.5">
A lighting fast headless CMS over websocket,
providing CRUD and CRDT functionality. Create,
Read, Update, Delete and Filter lists.
Collaborate on Text, DOM and Objects. Configure
using HTML5 data-attibutes. Supports offline
editing and user cursor positions in Inputs,
Textareas, Rich Text Editors and Code Editors.
But of course... Javascript developers still
have access to API, callbacks and events.
</p>
<a
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
>Get Your API Key</a
>
</div>
</div>
</div>
</section>
Fully Customizable Admin Panel
<section class="padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div class="display:flex flex-wrap:wrap align-items:center">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
type="video/mp4"
src="images/on-board-video.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1
class="font-size:1.5rem text-transform:uppercase">
Fully Customizable Admin Panel
</h1>
<p class="margin-top:10px line-height:1.5">
HTML5 Admin dashboard UI powered by CoCreateJS.
It is 100% editable and used to manage and
create views for your data and content. Use it
as a Collaborative CRM, CMS and ERP. Can be
modified, replaced or used as an example to
build your own custom HTML5 admin dashboard.
</p>
<p></p>
<a
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
>Sign Up Now</a
>
</div>
</div>
</div>
</section>
Collaborative Builder
<section
class="background:whitesmoke padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
type="video/mp4"
src="images/cards.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1
class="font-size:1.5rem text-transform:uppercase">
Collaborative Drag-n-Drop Builder
</h1>
<p class="margin-top:10px line-height:1.5">
We are in the process of using CoCreateJS
components to create an experimental NO Code
expereince. Every page of the adminUI can be
edited in the drag and drop builder. CoCreate
builder UI is completely customizable and
supports editing of any html5 template. Can be
modified, replaced or used as an example to
build your own custom drang and drop builder.
</p>
</div>
</div>
</div>
</section>
Thirdparty API Intergration
<section class="padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div class="display:flex flex-wrap:wrap align-items:center">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
type="video/mp4"
src="images/on-board-video.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1
class="font-size:1.5rem text-transform:uppercase">
Thirdparty API Intergration
</h1>
<p class="margin-top:10px line-height:1.5">
We have put together a few thirdparty APIs and
developed them to be used and configured with
HTML5 attributes. Build custom flows and logic
without ever leaving the html page... The
CoCreate Way... Almost forgot, Javascript
developers still have access to API, callbacks
and events.
</p>
<p></p>
<a
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
>Sign Up Now</a
>
</div>
</div>
</div>
</section>
<button
href="https://github.com/CoCreate-app/CoCreate-css-parser/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
target="_blank"
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
<i src="../assets/svg/pencil-alt.svg"></i>
</button>
</main>
Footer
<footer
id="spreadtheword"
content_id="content"
class="padding:100px_0px background-size:cover background-position:center position:relative color:white"
style="background-image: url(images/banner.png)">
<div class="position:relative">
<h1 class="text-align:center">SPREAD THE WORD!</h1>
<div
class="margin:20px_30px padding-bottom:20px font-size:21px border-bottom:1px_solid_white">
Social Share
<div
class="display:flex justify-content:center"
share-height="600"
share-width="500"
share-media="https://via.placeholder.com/300/09f/fff.png">
<a
href="https://twitter.com/CoCreate_App"
target="_blank"
class="margin:15px color:white"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
href="https://www.facebook.com/CoCreate.apps/"
target="_blank"
class="margin:15px color:white"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
href="https://www.instagram.com/cocreateai/"
target="_blank"
class="margin:15px color:white"
><i src="/assets/svg/instagram.svg"></i
></a>
<a
href="https://www.linkedin.com/company/cocreate-app/"
target="_blank"
class="margin:15px color:white"
><i
class="height:16px"
src="/assets/svg/linkedin-in.svg"></i
></a>
<a
href="https://www.pinterest.com/cocreate-app/"
target="_blank"
class="margin:15px color:white"
><i src="/assets/svg/pinterest-p.svg"></i
></a>
</div>
</div>
<p class="text-align:center">2015 - 2020 All Right Reserved</p>
<p class="text-align:center">
<a class="color:white" href="#">CoCreate LLC</a>
</p>
</div>
</footer>
<!--CoCreateJS-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>