Dark Mode Toggle

Flexbox Dark Mode Toggle Template #502

Flexbox

Flexbox is just another tool that you can add to your web development arsenal.

It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding. See: Columns with Flexbox

The New Image File Formats

502 Template Kit 502 Template Kit 502 Template Kit

The large picture above is a great example of why to use the new image file formats. The png vesrion of the same picture is 1.1mb in size. The avif version that you are DVW is 93.2k. Imagine the difference in loading time if you had a page full of large png images.

502 Template Kit 502 Template Kit 502 Template Kit

Drop down Menu

The style sheet for the drop down menus is one from our free navbar collection. It was installed by adding a linked style sheet in the head section of the template document.

It is coupled with the Modal Menu that kicks in for smaller devices when the drop down menu is hidden.

502 Template Kit 502 Template Kit 502 Template Kit

Box-Sizing

When using Flexbox or Grid, box-sizing-border-box (top of stylesheet) means that the declared width and height of an element automatically includes its content, padding, and box-shadow or border.

The green border on these columns helps us to see how it works.

502 Template Kit 502 Template Kit 502 Template Kit

Less is More

I've tried to construct these templates with as little HTML code as possible.

Flexbox is the same. With flexbox, less is more. Let it do the work of controlling page structure. It isn't designed for text flow or image placement.

502 Template Kit 502 Template Kit 502 Template Kit

Optimize Images

The best way to optimize your images these days is to convert them to one of the newer file formats. We demonstrate using an avif image and providing the fallback png image for older browsers.

There are a lot of fallback codes out there that don't work. This one does.