Codepen

Codepen is an extremely useful tool for developing webpages, where users can instantly view the effects of editing a page's HTML, CSS and Javascript.

Each page (and sub-page) in a website can be opened independently in Codepen, allowing users to view content without having to deploy the entire website.

Open a website page in Codepen, change the CSS rules and upload back into the CMS to replace the default rules

The CMS also provides a companion upload utility whereby updated CSS rules can be uploaded back into the CMS effectively overwriting the auto-generated rules. This is a feature for experienced web developers who don't like how their websites look using my default CSS rules. 

Note that only CSS can be updated - while nothing stops you changing the HTML and Javascript in Codepen, these are not part of the update process. This is because the CMS depends entirely on CKEditor for producing supported HTML content; the javascript provided by  the CMS should not be changed either because it captures page performance metrics that are sent back in a defined format to the CMS database.

Note also that CSS rules updated in this way will apply to ALL deployed website pages; this is by design to encourage consistency.

To enable this feature, you must have a Codepen account (cost-free) and must have signed in to Codepen. After opening a page from the CMS in Codepen, you can make your CSS rule changes, and when ready to replace these in the CMS - follow these steps:

1. Click Save at top of the Codepen screen
2. Click Export button at bottom of screen and save as a zip file
3. The zip file is saved on your file system as {domain_name}.zip
4. Return to the CMS, click “Upload Codepen” and select the zip file

The upload process updates the website's CSS with your changed rules.

If you want to revert to the auto-generated rules simply create a dummy zip file making sure not to include a file called “/src/style.css”. This also happens automatically if you delete the contents of the CSS panel before clicking Save.

Of course, you could create CSS rules independently of Codepen and upload these using exactly the same method - you would just have to ensure that the rules are defined in a file called “/src/style.css” and included in a zip file.

Note that there's no flexibility in how the files in the zip are named.

Codepen actually creates multiple files in the generated zip: 

$ unzip -l adfreesites-com.zip

Archive:  adfreesites-com.zip
  Length      Date    Time    Name
---------  ---------- -----   ----
      145  05-11-2024 09:44   adfreesites-com/README.md
     1118  05-11-2024 09:44   adfreesites-com/LICENSE.txt
     3014  05-11-2024 09:44   adfreesites-com/src/index.html
    14316  05-11-2024 09:44   adfreesites-com/src/style.css
     6789  05-11-2024 09:44   adfreesites-com/src/script.js
     3294  05-11-2024 09:44   adfreesites-com/dist/index.html
    14315  05-11-2024 09:44   adfreesites-com/dist/style.css
     6787  05-11-2024 09:44   adfreesites-com/dist/script.js