CSS Reduces The Need For Images — Part 5, Modal Driven Help
In this final part of the series I’ll document the help system. It too shows how little we need images with things like webfonts and CSS 3 on the table. Look at the above image where those keys and buttons are styled entirely by CSS with no images. The forward/back/up links at the bottom use webfonts for their icons. There are no images on that page other than that canvas background showing through the modal frame’s opacity.
As with the calc.app.js I’m going to summarizy by sections, if you want to browse the whole script go ahead and grab it here:
https://cutcodedown.com/for_others/medium_articles/htmlCSSCalcScripted/scripts/sources/help.modals.js
And remember there’s a .rar of the whole app available here:
https://cutcodedown.com/for_others/medium_articles/htmlCSSCalcScripted/htmlCSSCalcScripted.rar
/*
help.modals.js
Jason M. Knight
January 2023
REQUIRES
dom.lib.js
POLLUTES
nothing
EVENTS
none
Generates the help pages for our calculator
*/
As with the other files, list what is needed or could influence other scripts.
{
const
buttonDocs = {
Open up a scope block, create a buttonDocs constant. “buttonDocs” will contain…