Toggle switch without javascript

Wednesday July 31 2024

I withdrew both ttCMS and DCP-Portal from the marketplace at the same time. Both were nearly identical CMS systems. ttCMS was a hack of DCP-Portal. When the original developer of DCP-Portal was looking to part with it, I bought it. Roughly six years later, I withdrew it from public availability. Those of you who recall Byte magazine, may also recall that both ttCMS and DCP-Portal shared the honor of being the Year's Top Selection at one time.

The reason for withdrawing is really simple. I grew weary of feature bloat. The status of the marketplace at the time (as it is today) is such that all competitive products are involved in a "me-too" action plan ... each has to have the latest widget. As time goes on, the emphasis is widgets and core functionality gets left behind.

I'll speak to ttCMS for a bit. In the early 2000s, I had just finished working as an executive for a satellite internet provider. One of the tools the internet provider was lacking at the time was a "community" tools. Articles, news, an ecommerce section, banner ads, a forum ... well, you get the idea. The commercial products available at the time were start ups with none of the features really polished. Most of the "open source" products were actually better than the commercial products. After leaving the company, I ended up contacting the owner of DCP-Portal and using that product. The features and modules were excellent ... but it lacked in user interface, speed and security. Speed I added quickly. Security was an on-going set of fixes. At the point of changing the user interface, I had modified nearly all of the underlying code ... and decided to fork my own product (note: I did give DCP-Portal credit, maintained the copyright notices, and kept in touch with the DCP-Portal developer – including sharing code with him).

I am in process of doing a complete 100% re-boot of DCP-Portal. It is a vastly different product with none of the widgets (or features) of the original. It is now strictly a blog (or article/news) platform. The first version of DCP-Portal re-boot is running the PHPMailer Pro blog. The underlying code is the new DCP-Portal, the user interface is (was) based on Bulma CSS, version 0.9.4. I will update that shortly to my own CSS "framework".

I am calling my own CSS framework "Blade CSS" ... I chose "blade" to be in the name as an indication that it is cutting the garbage out. As an example, the code base for the Bulma v0.9.4 grid is 35Kb (raw). The Blade CSS grid is 11Kb (raw). Both are based on CSS Flexbox. Is mine cripped? lacks functionality? Absolutely not, it provides the same functionality. It's just efficient code. None of the duplication or bloat found in Bulma.

Back to the original title of this article. One of the UI elements that I just pinned down is a toggle switch replacement for a form checkbox. What I wanted was a pure CSS implementation that would display a toggle style look and upate the underlying input checkbox. I finally managed to achieve that by using a span to contain the toggle element with an on/off appearance. I then put both the input and span into a container ... click the container, and both (input and span) automatically toggle. Of course, both the checkmark and X are optional content ... I may remove those (looks a bit cheesy with them, doesn't it?).

PS. I'm also moving away from bloated icon sets like Font Awesome. The load time for Font Awesome is heavy. I'm using a subset of that, built from Font Awesome and several others, based on the Fontello service. And, I'm trying to get away from that too. The toggle I designed above is based entirely on pure CSS with the checkmark as unicode /u2713 and the X as unicode /u2718 ... zero overhead. And a further PS ... many will tell you that you can't change unicode display color – I did, and it's simple, and also pure CSS.

Look, ma, no javascript ....

 

◀ Previous Next ▶

Post a Comment