Skip to content

Commit 072d85a

Browse files
frankpaganfrankpagan
committed
fix: update packages
1 parent 8377833 commit 072d85a

File tree

6 files changed

+136
-20
lines changed

6 files changed

+136
-20
lines changed

‎demo/atomic-css.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h2 class="background:red@sm@md">CoCreate helper CSS</h2>
4949
</div>
5050
<p class="max-width:500px margin-top:20px">CoCreate provides the most convenient helper class.</p>
5151
<div id="xxxxx-section" class="display:flex flex-wrap:wrap justify-content:space-between">
52-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px">
52+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
5353
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Reference</h2>
5454
<div class="">
5555
<p class="padding:10px_0px">CoCreate Helper Classes are very easy to use.</p>
@@ -726,7 +726,7 @@ <h3 class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">cursor
726726
</div>
727727
</div>
728728

729-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
729+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
730730

731731
<!-- SandBox -->
732732
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>

‎docs/avatar.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2>CoCreate-avatar</h2>
4343
</div>
4444
<p class="max-width:500px margin:20px_0px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
4545
<div id="xxxxx-section" class="display:flex flex-wrap:wrap">
46-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px">
46+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
4747

4848
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Reference</h2>
4949
<div class="">
@@ -97,7 +97,7 @@ <h4><span>avatar-label</span></h4>
9797
</ul>
9898
</div>
9999

100-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
100+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
101101
<!-- SandBox -->
102102
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
103103
<div class="position:sticky top:0 padding:15px_0px height:100vh">

‎docs/flip-item.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2>CoCreate-flip-item</h2>
4343
</div>
4444
<p class="max-width:500px margin:20px_0px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
4545
<div id="xxxxx-section" class="display:flex flex-wrap:wrap">
46-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px">
46+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
4747

4848
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Reference</h2>
4949
<div class="">
@@ -70,7 +70,7 @@ <h4><span>data-xxxxx</span> <span class="cocreate-badge success">string</span> <
7070
</ul>
7171
</div>
7272

73-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
73+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
7474
<!-- SandBox -->
7575
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
7676
<div class="position:sticky top:0 padding:15px_0px height:100vh">

‎docs/index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -154,12 +154,12 @@
154154
<section class="padding-top:80px padding-bottom:40px">
155155
<div class=" max-width:90% margin:0px_auto">
156156
<div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
157-
<div class="flex-grow:1 min-width:300px width:50%">
157+
<div class="flex-grow:1 width:300px">
158158
<video loop autoplay muted class="width:100%">
159159
<source src="images/dashboard-video.mp4" type="video/mp4">
160160
</video>
161161
</div>
162-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_15px font-size:16px ">
162+
<div class="flex-grow:1 width:300px padding:0px_15px font-size:16px ">
163163
<h1 class="font-size:2rem">A Utility First, <span class="color:dodgerblue">Atomic CSS Framework</span></h1>
164164
<span class="font-size:16px margin-top:10px">For Building Collaborative Apps, Platforms and UI's</span>
165165
<!--<p class="margin-top:10px">HTML and CSS, No JS Required...</p>-->
@@ -198,12 +198,12 @@ <h1 class="font-size:2rem">A Utility First, <span class="color:dodgerblue">Atom
198198
<section class="padding-top:80px padding-bottom:40px" id="features">
199199
<div class="max-width:90% margin:0px_auto">
200200
<div class="display:flex flex-wrap:wrap align-items:center">
201-
<div class="flex-grow:1 min-width:300px width:50%">
201+
<div class="flex-grow:1 width:300px">
202202
<video loop autoplay muted class="width:100%">
203203
<source type="video/mp4" src="images/on-board-video.webm">
204204
</video>
205205
</div>
206-
<div class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
206+
<div class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
207207
<h1 class="font-size:1.5rem text-transform:uppercase">Micro Component Architecture</h1>
208208
<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 data-attributes. HTML5 developers can use a combination of data-attributes to create a dynamic experience. Javascript developers still have access to API, callbacks and events.</p>
209209
<p></p>
@@ -217,12 +217,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Micro Component Architectu
217217
<section class="background:whitesmoke padding-top:80px padding-bottom:40px">
218218
<div class="max-width:90% margin:0px_auto">
219219
<div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
220-
<div class="flex-grow:1 min-width:300px width:50%">
220+
<div class="flex-grow:1 width:300px">
221221
<video loop autoplay muted class="width:100%">
222222
<source type="video/mp4" src="images/cards.webm">
223223
</video>
224224
</div>
225-
<div class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
225+
<div class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
226226
<h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Headless CMS</h1>
227227
<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>
228228
<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>
@@ -235,12 +235,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Headless CMS
235235
<section class="padding-top:80px padding-bottom:40px">
236236
<div class="max-width:90% margin:0px_auto">
237237
<div class="display:flex flex-wrap:wrap align-items:center">
238-
<div class="flex-grow:1 min-width:300px width:50%">
238+
<div class="flex-grow:1 width:300px">
239239
<video loop autoplay muted class="width:100%">
240240
<source type="video/mp4" src="images/on-board-video.webm">
241241
</video>
242242
</div>
243-
<div class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
243+
<div class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
244244
<h1 class="font-size:1.5rem text-transform:uppercase">Fully Customizable Admin Panel</h1>
245245
<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>
246246
<p></p>
@@ -254,12 +254,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Fully Customizable Admin P
254254
<section class="background:whitesmoke padding-top:80px padding-bottom:40px">
255255
<div class="max-width:90% margin:0px_auto">
256256
<div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
257-
<div class="flex-grow:1 min-width:300px width:50%">
257+
<div class="flex-grow:1 width:300px">
258258
<video loop autoplay muted class="width:100%">
259259
<source type="video/mp4" src="images/cards.webm">
260260
</video>
261261
</div>
262-
<div class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
262+
<div class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
263263
<h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Drag-n-Drop Builder</h1>
264264
<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>
265265
</div>
@@ -271,12 +271,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Drag-n-Drop
271271
<section class="padding-top:80px padding-bottom:40px">
272272
<div class="max-width:90% margin:0px_auto">
273273
<div class="display:flex flex-wrap:wrap align-items:center">
274-
<div class="flex-grow:1 min-width:300px width:50%">
274+
<div class="flex-grow:1 width:300px">
275275
<video loop autoplay muted class="width:100%">
276276
<source type="video/mp4" src="images/on-board-video.webm">
277277
</video>
278278
</div>
279-
<div class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
279+
<div class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
280280
<h1 class="font-size:1.5rem text-transform:uppercase">Thirdparty API Intergration</h1>
281281
<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 data-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>
282282
<p></p>

‎docs/utility.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h2>CoCreate utility CSS</h2>
4848
</div>
4949
<p class="max-width:500px margin-top:20px">CoCreate provides the most convenient utility class.</p>
5050
<div id="xxxxx-section" class="display:flex flex-wrap:wrap justify-content:space-between">
51-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px">
51+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
5252
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Reference</h2>
5353
<div class="">
5454
<p class="padding:10px_0px">CoCreate utility Classes are very easy to use.</p>
@@ -724,7 +724,7 @@ <h3 class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px">cursor
724724
</div>
725725
</div>
726726
</div>
727-
<div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
727+
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
728728
<!-- SandBox -->
729729
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
730730
<div class="position:sticky top:0 padding:15px_0px height:100vh">

‎testCompileTimeCss.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
let { parse } = require('node-html-parser');
2+
const fs = require('fs')
3+
const path = require('path')
4+
5+
6+
var utilityClassList = [];
7+
let myStyle = [];
8+
9+
10+
function goThrough(el) {
11+
if (el.classNames)
12+
addParsingClassList(el.classNames);
13+
14+
if (el.childNodes)
15+
for (let child of el.childNodes)
16+
goThrough(child)
17+
}
18+
19+
20+
21+
const range_names = ["xs", "sm", "md", "lg", "xl"];
22+
const ranges = [
23+
[0, 567],
24+
[576, 768],
25+
[769, 992],
26+
[993, 1200],
27+
[1201, 0],
28+
];
29+
30+
function addParsingClassList(classList) {
31+
let re = /.+:.+/;
32+
for (let classname of classList) {
33+
try {
34+
if (re.exec(classname)) {
35+
if (utilityClassList.indexOf(classname) == -1) {
36+
let re_at = /.+@.+/;
37+
if (re_at.exec(classname)) {
38+
let parts = classname.split("@");
39+
let main_rule = parseClass(classname);
40+
41+
for (let i = 1; i < parts.length; i++) {
42+
let range_num = range_names.indexOf(parts[i]);
43+
if (range_num == -1) continue;
44+
let range = ranges[range_num];
45+
let prefix = "@media screen";
46+
if (range[0] != 0) {
47+
prefix += " and (min-width:" + range[0] + "px)";
48+
}
49+
if (range[1] != 0) {
50+
prefix += " and (max-width:" + range[1] + "px)";
51+
}
52+
let rule = prefix + "{" + main_rule + "}";
53+
myStyle.push(rule);
54+
utilityClassList.push(classname);
55+
}
56+
} else {
57+
let rule = parseClass(classname);
58+
myStyle.push(rule);
59+
utilityClassList.push(classname);
60+
}
61+
}
62+
}
63+
} catch (e) {}
64+
}
65+
}
66+
67+
function parseClass(classname) {
68+
let res = classname.split(":");
69+
let rule = "";
70+
let suffix = res[1]
71+
.replace(/\./g, "\\.")
72+
.replace(/%/, "\\%")
73+
.replace(/@/g, "\\@")
74+
.replace(/\(/g, "\\(")
75+
.replace(/\)/g, "\\)")
76+
.replace(/#/g, "\\#")
77+
.replace(/,/g, "\\,")
78+
.replace(/!/, "\\!");
79+
res[1] = res[1].split("@")[0];
80+
res[1] = res[1].replace(/_/g, " ");
81+
if (res.length > 2) {
82+
let pseudo = [];
83+
for (let i = 0; i < res.length - 2; i++) {
84+
suffix += "\\:" + res[2 + i];
85+
pseudo.push(":" + res[2 + i]);
86+
}
87+
let clsname = "." + res[0] + "\\:" + suffix;
88+
rule += clsname + pseudo[0];
89+
for (let i = 1; i < pseudo.length; i++) {
90+
rule += ", " + clsname + pseudo[i];
91+
}
92+
rule += `{${res[0]}:${res[1]}}`;
93+
} else {
94+
rule = `.${res[0]}\\:${suffix}{${res[0]}:${res[1]}}`;
95+
}
96+
return rule;
97+
}
98+
99+
100+
// let fileList = ['./src/index.html','./src/signup.html','./src/signin.html'];
101+
let fileList = ['./src/index.html'];
102+
fileList.forEach(file=>{
103+
let str = fs.readFileSync(file)
104+
105+
const root = parse(str);
106+
goThrough(root)
107+
myStyle.sort();
108+
let style = parse(`
109+
<style type="text/css">
110+
${myStyle.join('\r\n')}
111+
</style>
112+
`)
113+
root.querySelector('head').appendChild(style)
114+
let result = root.toString()
115+
fs.writeFileSync(path.resolve('dist', path.basename(file)), result);
116+
})

0 commit comments

Comments
 (0)