Skip to content

Commit 3877809

Browse files
author
Bieri Silyas
committed
first commit 2
1 parent 6816c11 commit 3877809

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+57412
-0
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/.idea/
2+
/html-but-js.iml
3+
/node_modules/
4+
/package-lock.json

‎README.md

588 Bytes

htmlFromJS

html-but-js

Introduction

html_but_js v1.0.0 is an alternative method for Web Developers to create Websites, by using JS Code only. The core concept behind html_but_js is to minimize the manual creation of html tags and at the same time minimize the amount of errors which may not be visible in production.

The other benefit of html_but_js (if used correctly, I still haven't figured it all out) is minimizing the amount of code necessary for a website. In the long-term html_but_js will successfully help apply the necessary changes with minimum effort.

Documentation

Check the source code of demo

‎demo/css/main.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
body { font-family: Roboto, sans-serif;}
2+
3+
nav {
4+
position: fixed;
5+
}
6+
7+
nav ul {
8+
padding-inline-start: 0;
9+
padding-left: 50px;
10+
}
11+
12+
canvas {
13+
display: block;
14+
width: 600px;
15+
height: 5px;
16+
margin: auto;
17+
}
18+
19+
a {
20+
text-decoration: none;
21+
}
22+
23+
header {
24+
text-align: center;
25+
}
26+
27+
iframe {
28+
width: 100%;
29+
border-width: 0;
30+
}
31+
32+
main {
33+
max-width: 600px;
34+
margin: auto;
35+
}
36+
37+
main p {
38+
white-space:pre-wrap;
39+
text-align:justify;
40+
}
41+
42+
main div {
43+
44+
}
45+
46+
@media all and (max-width: 1000px) {
47+
nav {
48+
text-align: center;
49+
position: inherit;
50+
}
51+
nav li {
52+
padding-right:1em;
53+
display:inline-block;
54+
}
55+
}
56+
57+
@media all and (max-width: 1000px) {
58+
nav {
59+
text-align: center;
60+
position: relative;
61+
}
62+
nav ul {
63+
padding-left: 0 !important;
64+
}
65+
nav li {
66+
padding-right:1em;
67+
display:inline-block;
68+
}
69+
}
70+
71+
@media all and (max-width: 640px) {
72+
canvas {
73+
display: none;
74+
}
75+
}

‎demo/css/prism.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/* PrismJS 1.17.1
2+
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+diff&plugins=jsonp-highlight+highlight-keywords+match-braces */
3+
/**
4+
* okaidia theme for JavaScript, CSS and HTML
5+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
6+
* @author ocodia
7+
*/
8+
9+
code[class*="language-"],
10+
pre[class*="language-"] {
11+
color: black;
12+
background: none;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
font-size: 1em;
15+
text-align: left;
16+
white-space: pre;
17+
word-spacing: normal;
18+
word-break: normal;
19+
word-wrap: normal;
20+
line-height: 1.5;
21+
22+
-moz-tab-size: 4;
23+
-o-tab-size: 4;
24+
tab-size: 4;
25+
26+
-webkit-hyphens: none;
27+
-moz-hyphens: none;
28+
-ms-hyphens: none;
29+
hyphens: none;
30+
}
31+
32+
/* Code blocks */
33+
pre[class*="language-"] {
34+
padding: 1em;
35+
margin: .5em 0;
36+
overflow: auto;
37+
border-radius: 0.3em;
38+
}
39+
40+
:not(pre) > code[class*="language-"],
41+
pre[class*="language-"] {
42+
background: white;
43+
}
44+
45+
/* Inline code */
46+
:not(pre) > code[class*="language-"] {
47+
padding: .1em;
48+
border-radius: .3em;
49+
white-space: normal;
50+
}
51+
52+
.token.comment,
53+
.token.prolog,
54+
.token.doctype,
55+
.token.cdata {
56+
color: black;
57+
}
58+
59+
.token.punctuation {
60+
color: black;
61+
}
62+
63+
.namespace {
64+
opacity: .7;
65+
}
66+
67+
.token.property,
68+
.token.tag,
69+
.token.constant,
70+
.token.symbol,
71+
.token.deleted {
72+
color: #f92672;
73+
}
74+
75+
.token.boolean,
76+
.token.number {
77+
color: #ae81ff;
78+
}
79+
80+
.token.selector,
81+
.token.attr-name,
82+
.token.string,
83+
.token.char,
84+
.token.builtin,
85+
.token.inserted {
86+
color: darkviolet;
87+
}
88+
89+
.token.operator,
90+
.token.entity,
91+
.token.url,
92+
.language-css .token.string,
93+
.style .token.string,
94+
.token.variable {
95+
color: darkslategrey;
96+
}
97+
98+
.token.atrule,
99+
.token.attr-value,
100+
.token.function,
101+
.token.class-name {
102+
color: firebrick;
103+
}
104+
105+
.token.keyword {
106+
color: blue;
107+
}
108+
109+
.token.regex,
110+
.token.important {
111+
color: #fd971f;
112+
}
113+
114+
.token.important,
115+
.token.bold {
116+
font-weight: bold;
117+
}
118+
.token.italic {
119+
font-style: italic;
120+
}
121+
122+
.token.entity {
123+
cursor: help;
124+
}
125+
126+
.token.punctuation.brace-hover,
127+
.token.punctuation.brace-selected {
128+
outline: solid 1px;
129+
}
130+
131+
.rainbow-braces .token.punctuation.brace-level-1,
132+
.rainbow-braces .token.punctuation.brace-level-5,
133+
.rainbow-braces .token.punctuation.brace-level-9 {
134+
color: #E50;
135+
opacity: 1;
136+
}
137+
.rainbow-braces .token.punctuation.brace-level-2,
138+
.rainbow-braces .token.punctuation.brace-level-6,
139+
.rainbow-braces .token.punctuation.brace-level-10 {
140+
color: darkgreen;
141+
opacity: 1;
142+
}
143+
.rainbow-braces .token.punctuation.brace-level-3,
144+
.rainbow-braces .token.punctuation.brace-level-7,
145+
.rainbow-braces .token.punctuation.brace-level-11 {
146+
color: #26F;
147+
opacity: 1;
148+
}
149+
.rainbow-braces .token.punctuation.brace-level-4,
150+
.rainbow-braces .token.punctuation.brace-level-8,
151+
.rainbow-braces .token.punctuation.brace-level-12 {
152+
color: #E0E;
153+
opacity: 1;
154+
}
155+

‎demo/favicon.ico

7.23 KB
Binary file not shown.

‎demo/images/alice_152.png

56 KB
Loading

‎demo/images/alice_192.png

85.8 KB
Loading

‎demo/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--
5+
Everything in the head is static and does not change.
6+
Everything in the body and the body itself is loaded
7+
dynamically and can change at any point in time.
8+
-->
9+
<meta charset="utf-8">
10+
<meta name="author" content="Aliyss Snow">
11+
<meta name="description" content="Because it surprisingly works?">
12+
<meta name="theme-color" content="#43cd80"/>
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14+
15+
<title id="title">Aliyssium</title>
16+
17+
<link rel="canonical" media="all" href="https://github.com/Aliyss/html-but-js"/>
18+
<link rel="stylesheet" media="all" href="css/main.css"/>
19+
<link rel="stylesheet" media="all" href="css/prism.css"/>
20+
21+
<noscript><meta content="no-js" http-equiv="default-style"></noscript>
22+
<!--
23+
script.js is a self-built module for building clean
24+
HTML5 files without having to worry about syntax
25+
and errors.
26+
-->
27+
<script defer src="js/script.js"></script>
28+
<!--
29+
main.js is the content which is loaded after script.js
30+
is loaded. This also enables the Web-Designer to use
31+
minimal code to edit the content.
32+
-->
33+
<script defer src="js/main.js"></script>
34+
<!-- Makes JS Code look good. -->
35+
<script defer src="js/prism.js"></script>
36+
</head>
37+
</html>

0 commit comments

Comments
 (0)