In this Git repository, there are source code and design documents for the web-call.cc website, examples of special ondragover and ondrop event-handler code, and a code example showing the dynamic modification of a stylesheet.
To build the main demo:
-
Download CodeKit, which requires MacOS 10.13+. Spend the 15 minutes or less to learn the basics of it.
-
Clone web-call.cc and load it into CodeKit.
-
Load the npm packages from the cloud.
-
Build the project.
-
Put the build/ directory under the document root of your web server like Apache. The web server only needs to serve static pages.
-
Browse the website.
A Sitepen article by Dojo Toolkit contributor Sam Foster, Dynamic Stylesheets, Part 1 , links to a demo of dojox.html.style, which, as Sam says, "give you the ability to query the stylesheets collection in a document, add and remove rules, and dynamically create new sheets." The article is brilliant, but it is so old that the source file for Dojo that the demo includes has already been removed. A Git project has been created to resurrect the demo, but the 2-file demo is also reproduced here, with very minor changes.
Version 1.13.0 of Dojo. The file index.html uses Google's API CDN to source this.
Browse demo. Open the browser's
developer tools. Play with the reset and present buttons and the "nubbin"
(small, blue, inverted pyramid) to adjust the relative sizes of the
pink and blue table (built using <div>s)
and watch the style of the <div> element with
id "dv1" change as you make the adjustments.
Add rows to the table by pressing the "+" button to verify that the
new row is using the same styles as the first row.
This demo of dynamic stylesheets is mainly for just that: a demo. However, the code is there to be copied and used if someone finds it useful.
-
It would be nice to have various versions of this demo for newer libraries. Version 1.13.0 of Dojo might seem to be old.
-
The capability of saving the modified styles in a CSS file on a website's backend would an interesting feature.