@cocreate/css-parser
Version:
A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
1,110 lines • 65 kB
HTML
<!DOCTYPE html>
<html lang="en">
<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>CoCreate-atomic-css Documentation | CoCreateCSS</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<meta
name="description"
content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know" />
<meta
name="keywords"
content="helper classes, utility classes, css framework, css library, inline style classes" />
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/css-parser.png" />
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true" />
<style type="text/css">
.cocreate-badge {
font-size: 14px;
margin-bottom: 5px;
}
.copy {
cursor: copy;
}
</style>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body class="margin:15px_10px">
<div array="" object="" key="" id="CoCreateCSS">
<div
class="display:flex flex-wrap:wrap justify-content:space-between">
<div class="display:flex align-items:center">
<h2 class="background:red@sm@md">CoCreate helper CSS</h2>
</div>
<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">
<a
href="https://github.com/CoCreate-app/CoCreateCSS"
target="_blank"
class="margin-right:15px"
><i src="/assets/svg/github.svg"></i
></a>
<a
class="margin-right:15px"
share-network="twitter"
title="Share on twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
class="margin-right:15px"
share-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
class="margin-right:15px"
share-network="instagram"
title="Share on instagram"
><i src="/assets/svg/instagram.svg"></i
></a>
<a
class="margin-right:15px"
share-network="share"
title="Share on share"
><i src="/assets/svg/share-alt.svg"></i
></a>
</div>
</div>
<p class="max-width:500px margin-top:20px">
CoCreate provides the most convenient helper class.
</p>
<div
id="xxxxx-section"
class="display:flex flex-wrap:wrap justify-content:space-between">
<div
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
<div
id="css-parser-reference"
class="margin-top:80px border-bottom:1px_solid_lightgrey">
<span
class="display:flex align-items:center"
hover="display:block!important"
hover-selector="[href='#css-parser-reference']">
<h2 class="padding:5px_0px">Reference</h2>
<a
class="margin-left:10px display:none"
href="#css-parser-reference"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div class="">
<p class="padding:10px_0px line-height:1.5">
CoCreate Helper Classes are very easy to use.
</p>
<p class="padding:10px_0px line-height:1.5">
We can use exactly same class names with
"style:value".
</p>
<div class="flex-grow:1 min-width:300px width:100%">
<pre class="margin-bottom:10px">
<code class="language-js">
<div class="padding:16px"></div>
<div class="font-size:0.5rem color:red"></div>
</code>
</pre>
</div>
<p class="padding:10px_0px line-height:1.5">
Main styles and values provided as helper classes
are as follows.
</p>
</div>
<div>
<div
class="position:sticky top:0 background:white padding-top:5px padding-bottom:10px box-shadow-bottom">
<input
class="floating-label"
placeholder="Filter CSS Properties" />
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
direction
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="direction:ltr"></div></code></pre>
<p class="cocreate-badge">ltr</p>
<p class="cocreate-badge">rtl</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
display
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="display:block"></div></code></pre>
<p class="cocreate-badge copy@md">block</p>
<p class="cocreate-badge">inline-block</p>
<p class="cocreate-badge">inline</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">table</p>
<p class="cocreate-badge">table-cell</p>
<p class="cocreate-badge">flex</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
overflow
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="overflow:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">visible</p>
<p class="cocreate-badge">scroll</p>
<p class="cocreate-badge">hidden</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
float
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="float:left"></div></code></pre>
<p class="cocreate-badge">left</p>
<p class="cocreate-badge">right</p>
<p class="cocreate-badge">none</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
position
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="position:relative"></div></code></pre>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">relative</p>
<p class="cocreate-badge">absolute</p>
<p class="cocreate-badge">fixed</p>
<p class="cocreate-badge">sticky</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
z-index
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="z-index:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">-2</p>
<p class="cocreate-badge">-5</p>
<p class="cocreate-badge">1 ~ 15</p>
<p class="cocreate-badge">100</p>
<p class="cocreate-badge">101</p>
<p class="cocreate-badge">111</p>
<p class="cocreate-badge">1000</p>
<p class="cocreate-badge">1111</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
top / bottom / left / right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="top:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="bottom:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="left:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="right:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="height:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">20px</p>
<p class="cocreate-badge">30px</p>
<p class="cocreate-badge">40px</p>
<p class="cocreate-badge">45px</p>
<p class="cocreate-badge">48px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">70px</p>
<p class="cocreate-badge">80px</p>
<p class="cocreate-badge">90px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">130px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">350px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">700px</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">25%</p>
<p class="cocreate-badge">33%</p>
<p class="cocreate-badge">50%</p>
<p class="cocreate-badge">66%</p>
<p class="cocreate-badge">75%</p>
<p class="cocreate-badge">100%</p>
<p class="cocreate-badge">100%-120px</p>
<p class="cocreate-badge">100vh-120px</p>
<p class="cocreate-badge">100vh-100px</p>
<p class="cocreate-badge">100vh-90px</p>
<p class="cocreate-badge">100vh-70px</p>
<p class="cocreate-badge">100vh-50px</p>
<p class="cocreate-badge">80vh</p>
<p class="cocreate-badge">90vh</p>
<p class="cocreate-badge">100vh</p>
<p class="cocreate-badge">fill-available</p>
<p class="cocreate-badge">fit-content</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
min-height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="min-height:100px"></div></code></pre>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">700px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
max-height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="max-height:300px"></div></code></pre>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">100%</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="width:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">20px</p>
<p class="cocreate-badge">25px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">90px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">110px</p>
<p class="cocreate-badge">120px</p>
<p class="cocreate-badge">130px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">180px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">350px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">1000px</p>
<p class="cocreate-badge">10%</p>
<p class="cocreate-badge">12%</p>
<p class="cocreate-badge">15%</p>
<p class="cocreate-badge">20%</p>
<p class="cocreate-badge">25%</p>
<p class="cocreate-badge">30%</p>
<p class="cocreate-badge">35%</p>
<p class="cocreate-badge">40%</p>
<p class="cocreate-badge">41% ~ 50%</p>
<p class="cocreate-badge">55%</p>
<p class="cocreate-badge">60%</p>
<p class="cocreate-badge">65%</p>
<p class="cocreate-badge">70%</p>
<p class="cocreate-badge">75%</p>
<p class="cocreate-badge">80%</p>
<p class="cocreate-badge">85%</p>
<p class="cocreate-badge">90%</p>
<p class="cocreate-badge">95%</p>
<p class="cocreate-badge">100%</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">unset</p>
<p class="cocreate-badge">fill-available</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
min-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="min-width:75px"></div></code></pre>
<p class="cocreate-badge">75px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
max-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="max-width:300px"></div></code></pre>
<p class="cocreate-badge">75px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">500px</p>
<p class="cocreate-badge">600px</p>
<p class="cocreate-badge">1050px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
margin
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="margin:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">
auto-lr(left & right)
</p>
<p class="cocreate-badge">0-lr</p>
<p class="cocreate-badge">5px-lr</p>
<p class="cocreate-badge">10px-lr</p>
<p class="cocreate-badge">15px-lr</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px-lr</p>
<p class="cocreate-badge">
auto-tb(top & bottom)
</p>
<p class="cocreate-badge">0-tb</p>
<p class="cocreate-badge">5px_0px</p>
<p class="cocreate-badge">10px_0px</p>
<p class="cocreate-badge">15px_0px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px_0px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
margin-top
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="margin=top:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
margin-bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="margin-bottom:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
margin-left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="margin-left:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
margin-right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="margin-right:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
padding
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="padding:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">0-tb(top & bottom)</p>
<p class="cocreate-badge">5px_0px</p>
<p class="cocreate-badge">10px_0px</p>
<p class="cocreate-badge">15px_0px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px_0px</p>
<p class="cocreate-badge">0-lr(left & right)</p>
<p class="cocreate-badge">1px-lr ~ 15px-lr</p>
<p class="cocreate-badge">20px-lr</p>
<p class="cocreate-badge">25px-lr</p>
<p class="cocreate-badge">30px-lr</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px-lr</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
padding-top
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="padding-top:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
padding-bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="padding-bottom:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
padding-left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="padding-left:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
padding-right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="padding-right:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
border-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="border-width:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">20px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
border-color
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="border-color:black"></div></code></pre>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">medium-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">light-pink</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">transparent-pink</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
border-style
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="border-style:dotted"></div></code></pre>
<p class="cocreate-badge">dotted</p>
<p class="cocreate-badge">dashed</p>
<p class="cocreate-badge">solid</p>
<p class="cocreate-badge">double</p>
<p class="cocreate-badge">groove</p>
<p class="cocreate-badge">ridge</p>
<p class="cocreate-badge">inset</p>
<p class="cocreate-badge">outset</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">hidden</p>
<p class="cocreate-badge">transparent</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
border-radius
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="border-radius:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">50%</p>
<p class="cocreate-badge">100%</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
font-size
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="font-size:18px"></div></code></pre>
<p class="cocreate-badge">6px ~ 25px</p>
<p class="cocreate-badge">30px</p>
<p class="cocreate-badge">40px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">80px</p>
<p class="cocreate-badge">01rem</p>
<p class="cocreate-badge">02rem</p>
<p class="cocreate-badge">03rem</p>
<p class="cocreate-badge">04rem</p>
<p class="cocreate-badge">05rem</p>
<p class="cocreate-badge">1rem</p>
<p class="cocreate-badge">2rem</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
font-weight
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="font-weight:800"></div></code></pre>
<p class="cocreate-badge">100</p>
<p class="cocreate-badge">200</p>
<p class="cocreate-badge">300</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">900</p>
<p class="cocreate-badge">bold</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
font-align
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="font-align:center"></div></code></pre>
<p class="cocreate-badge">center</p>
<p class="cocreate-badge">left</p>
<p class="cocreate-badge">right</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
color
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="color:blue"></div></code></pre>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">very-light-gray</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">light-blue</p>
<p class="cocreate-badge">blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
text-overflow
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="text-overflow:ellipsis"></div></code></pre>
<p class="cocreate-badge">ellipsis</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
text-transform
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="text-transform:uppercase"></div></code></pre>
<p class="cocreate-badge">uppercase</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
text-decoration
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="text-decoration:underline"></div></code></pre>
<p class="cocreate-badge">underline</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
background-attachment
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background-attachment:scroll"></div></code></pre>
<p class="cocreate-badge">scroll</p>
<p class="cocreate-badge">fixed</p>
<p class="cocreate-badge">local</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
background-repeat
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background-repeat:repeat"></div></code></pre>
<p class="cocreate-badge">repeat</p>
<p class="cocreate-badge">repeat-x</p>
<p class="cocreate-badge">repeat-y</p>
<p class="cocreate-badge">no-repeat</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
background-size
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background-size:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">cover</p>
<p class="cocreate-badge">contain</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
background-position
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background-position:center"></div></code></pre>
<p class="cocreate-badge">left-top</p>
<p class="cocreate-badge">left-center</p>
<p class="cocreate-badge">left-bottom</p>
<p class="cocreate-badge">right-top</p>
<p class="cocreate-badge">right-center</p>
<p class="cocreate-badge">right-bottom</p>
<p class="cocreate-badge">center</p>
<p class="cocreate-badge">center-top</p>
<p class="cocreate-badge">center-center</p>
<p class="cocreate-badge">center-bottom</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
bg (background)
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background:blue"></div></code></pre>
<p class="cocreate-badge">transparent</p>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">dark-blue</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">medium-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">very-light-gray</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">transparent-white</p>
<p class="cocreate-badge">transparent-black</p>
<p class="cocreate-badge">white-opacity</p>
<p class="cocreate-badge">black-opacity</p>
<p class="cocreate-badge">black-opacity-light</p>
<p class="cocreate-badge">deep-pink-opacity</p>
<p class="cocreate-badge">charcoal-gray</p>
<p class="cocreate-badge">blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
background
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="background:black"></div></code></pre>
<p class="cocreate-badge">transparent</p>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">dark-blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
opacity
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="opacity:block"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">0.1</p>
<p class="cocreate-badge">0.2</p>
<p class="cocreate-badge">0.3</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">0.9</p>
<p class="cocreate-badge">1</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">
cursor
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"><code class="language-html"><div class="cursor:auto"></div></code></pre>
<p class="cocreate-badge">alias</p>
<p class="cocreate-badge">all-scroll</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">cell</p>
<p class="cocreate-badge">context-menu</p>
<p class="cocreate-badge">col-resize</p>
<p class="cocreate-badge">copy</p>
<p class="cocreate-badge">crosshair</p>
<p class="cocreate-badge">default</p>
<p class="cocreate-badge">e-resize</p>
<p class="cocreate-badge">ew-resize</p>
<p class="cocreate-badge">grab</p>
<p class="cocreate-badge">grabbing</p>
<p class="cocreate-badge">help</p>
<p class="cocreate-badge">move</p>
<p class="cocreate-badge">n-resize</p>
<p class="cocreate-badge">ne-resize</p>
<p class="cocreate-badge">nesw-resize</p>
<p class="cocreate-badge">ns-resize</p>
<p class="cocreate-badge">nw-resize</p>
<p class="cocreate-badge">nwse-resize</p>
<p class="cocreate-badge">no-drop</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">not-allowed</p>
<p class="cocreate-badge">pointer</p>
<p class="cocreate-badge">progress</p>
<p class="cocreate-badge">row-resize</p>
<p class="cocreate-badge">s-resize</p>
<p class="cocreate-badge">se-resize</p>
<p class="cocreate-badge">sw-resize</p>
<p class="cocreate-badge">text</p>
<p class="cocreate-badge">url</p>
<p class="cocreate-badge">w-resize</p>
<p class="cocreate-badge">wait</p>
<p class="cocreate-badge">zoom-in</p>
<p class="cocreate-badge">zoom-out</p>
</div>
</div>
</div>
<div
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
<div
id="css-parser-demo"
class="border-bottom:1px_solid_lightgrey">
<span
class="display:flex align-items:center"
hover="display:block!important"
hover-selector="[href='#css-parser-demo']">
<h2 class="padding:5px_0px">Demo</h2>
<a
class="margin-left:10px display:none"
href="#css-parser-demo"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div
class="position:sticky top:0 padding:15px_0px height:100vh">
<!-- SandBox -->
<div
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
id="playground">
<div
id="demo-code"
resizable
class="position:relative height:50%">
<textarea
type="code"
lang="html"
array="demos"
object=""
key="demo"
save="false"
id="demo"
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
<div
resize="bottom"
class="background:lightgrey"></div>
</div>
<div
id="demo-preview"
class="position:relative overflow:auto background-color:white">
<div class="demopreview padding:20px"></div>
</div>
<div
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
<a
class="margin-right:10px"
id="eye"
show="#eye-slash"
hide="#eye, #demo-preview"
toggle="code-height"
toggle-selector="#demo-code"
><i
class="height:18px"
src="/assets/svg/eye.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="eye-slash"
show="#eye, #demo-preview"
hide="#eye-slash"
toggle="code-height"
toggle-selector="#demo-code"
><i src="/assets/svg/eye-slash.svg"></i
></a>
<a
class="margin-right:10px"
id="code"
show="#code-slash"
hide="#code, #demo-code"
><i src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="code-slash"
show="#code, #demo-code"
hide="#code-slash"
><i
class="height:18px"
src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:5px"
fullscreen
fullscreen-selector="#playground"></a>
</div>
</div>
<!-- End SandBox -->
</div>
</div>
</div>
</div>
<!--CoCreateJS-->
<!--<script src="https://CoCreate.app/dist/CoCreate.js"></script>-->
<script src="./dist/CoCreateCSS.min.js"></script>
<script type="text/javascript">
var copy = object.querySelectorAll(".copy");
for (const copied of copy) {
copied.onclick = function () {
object.execCommand("copy");
};
copied.addEventListener("copy", function (event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData(
"text/plain",
copied.textContent
);
console.log(event.clipboardData.getData("text"));
}
});
}
</script>
<script>
updateRandomColor();
</script>
</body>
</html>