Codepen

This article is only of interest to people who are comfortable with the foundational web languages.

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

Website owners, once authenticated, can open any page in Codepen and play around with the CSS.

A companion upload utility enables changed CSS rules to be uploaded back into the editor effectively overwriting the auto-generated rules. This is a feature for experienced web developers who don't like how their websites look using our default CSS rules.

Note that only CSS can be updated - while nothing stops you changing the HTML (and Javascript), these are not part of the upload process. This is because we depend entirely on CKEditor for producing standard HTML content.

Note also that any CSS rules updated in this way will apply to ALL of a subsequently deployed website's pages; this is by design in order to optimise page weight and 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 website in Codepen.

To make your CSS rule changes permanent for the website, follow these steps:

Click Save at top of the Codepen screen
Click Export button at bottom of screen
Save as a zip file
The zip file is saved on your file system as {domain_name}.zip
On your website, click “Upload Codepen” and select the zip file from your download folder

If you want to revert to the auto-generated rules, create a dummy zip file making sure not to include a file called “/src/style.css”. You could also delete the contents of the CSS panel in Codepen 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.

Here's what an exported Codepen zip file looks like:

$ 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