Improvements in documentation using the W3 Framework

Having used the W3 Framework to enhance the Parish Council website I am finding there are some useful techniques that I can use in general.

These include the ability to format comments and quotes in a way similar to what I was doing but that are more consistant with other sites, namely the W3 Schools website. The handling of images and the generation of navigation tools such as side overlays with dropsdown items (accordians) is also handled quite elegantly by the use of the framework.

Integrating the Framework into my existing template

My use of the W3 Framework has taking tow approaches. The first was to develop a new-look web template using one of the W3 Schools website templates, the other was to incorporate the Framework into my exisiting Template.

While I found that there was a some interaction between my Template and some of the CSS definitions of the Framework I found that these were not insurmountable. With my current work-around the major difference is the colours of my page menus. I am sure that if I really wanted to I could "fix" this but as it is the menus still work and have the same functionality.

My work with responsive design is pretty much taken care of behind the scenes and it is reassuring to see that what I managed to develop is not too far off the mark. In fact, I have a better understanding of the media query.

The more I use the Framework I find that there are more and more things that I can "fix". For example the footer of this page was fixed by the addition of another spacer so that the bottom menu displays below the footer as I had it before. This was due to the redefinition of the footer class. I could fix this in a more elegant method by doctoring my CSS file to add a top and bottom margin to my footer class.

Documenting code that has W3 classes - and code in general

The W3 Framework offers a number of features that make documentation better in my opinion.

Code, html, JavaScript and CSS can be documented as seen here.

The code is documented using w3-panel w3-card and w3 ‑ code classes. As can be seen if the window size is changed the class declarations will be wrapped in a confusing manner unless non-breaking spaces and hyphens are used ‑ 🔗. This is using " ‑ " between the w3 and the classname.

This is interesting as the non-breaking seems to be different ‑  using a fa icon i.e. there is the non-breaking construct between the different and the icon so they should not split.

Quotes

This has worked out well for me. See the Friends bells page for example.

Adding a link to a quote or reference

An event handler is added to the element. If you place the cursor over the "quote box" above you will notice that the cursor changes as the "quote box" is now a link to another page.