This is a practice project, The goal is:
reading some custom
css-variable
s from a*.css
file, adding it into a.html
file , and make it interactively changeable
_for more information on `` read these two articles: MDN | CSS-Tricks
graph LR
A((root)) --> B(01)
A --> C[index.html]
A --> D[style.css]
B --> E[step01.html]
B --> F[step01.js]
Here I'm just working with style.css
containing some css-variables
. the result is produced in step01.html
file.
- The
step01.js
doesn't do anything but logging a description about what's going on. - The
index.html
provided just for navigating between steps.
graph LR
A((root)) --> B(02)
A --> C[index.html]
A --> D[style.css]
B --> E[step02.html]
B --> F[step02.js]
Here I'm actually creating a link
element in step02.js
file, attaching the style.css
to it and adding it into the step02.html
file.
graph LR
A((root)) --> B(dist)
A --> C(src)
A --> D[package-lock.json]
A --> E[package.json]
A --> F[webpack.config.js]
B --> G[step03.html]
B --> H[step03.js]
C --> I[index.js]
A --> J[index.html]
A --> K[style.css]
With the help of webpack, I import the style.css
in the index.js
file and bundle it to the dist/step03.html
.
graph LR
A((root)) --> B(04)
A --> C[index.html]
A --> D[style.css]
B --> E[step04.css]
B --> F[step04.html]
B --> G[step04.js]
In this example, the style.css
isn't use 'cause it's completely different markUp.
There're some css-variable
s defined in step04.css
. There's a cssData
object in step04.js
which is an imaginary presentation of fetched css-variable
s from step04.css
.
Once a colored circle is clicked, the cssData
is updated and the theme has changed
graph LR
A((root)) --> B(05)
A --> C[index.html]
A --> D[style.css]
B --> E[step05.css]
B --> F[step05.html]
B --> G[step05.js]
The implementation of the former file was a little complicated. There's better solution for Implementing the reColor()
function, which is using setProperty
on the root
element.
graph LR
A((root)) --> B(06)
A --> C[index.html]
A --> D[style.css]
B --> E[step06.css]
B --> F[step06.html]
B --> G[step06.js]
Solving the problem using CSS Object Model
graph LR
A((root)) --> B(07)
A --> C[index.html]
A --> D[style.css]
B --> E[step07.css]
B --> F[step07.html]
B --> G[step07.js]
B --> H[varCollector.js]
Solving the problem using array methods and CSSOM
graph LR
A((root)) --> B(08)
A --> C[index.html]
A --> D[style.css]
B --> E[step08.css]
B --> F[step08.html]
B --> G[step08.js]
B --> H[varCollector.js]
Improving the functionality